score:12
just try to set more series, and play a while with size and inner size, see: http://jsbin.com/oyudan/165/edit
series: [{
name: 'browsers',
data: [11,23,14,15],
size: '40%',
datalabels: {
formatter: function() {
return this.y > 5 ? this.point.name : null;
},
color: 'white',
distance: -30
}
}, {
name: 'versions',
data: [4,7,11,11,2,3,3,8,5,5,5],
size: '70%',
innersize: '40%',
datalabels: {
formatter: function() {
// display only if larger than 1
return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%' : null;
}
}
}, {
name: 'versions',
data: [2,2,3,4,6,5,6,5,1,1,2,1,2,1,4,4,2,3,2,3,2,3],
size: '80%',
innersize: '70%',
datalabels: {
formatter: function() {
// display only if larger than 1
return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%' : null;
}
}
score:0
you can do the same by using two charts.
one chart will be having a pie and a donut while the second will have only a donut chart you can manage them by providing same center as well as radius such that they will synchronize.
hope this will work for you
score:0
a different method to achieve this is using the sunburst series type (highcharts 6.0.0 or newer).
here you specify data with an id
parameter if they are to have series below them, and for the children you specify a parent
parameter.
for example (jsfiddle, documentation):
$(function () {
var data = [
{
name: 'anakin skywalker',
id: 'father'
}, {
name: 'luke skywalker',
id: 'child-1',
parent: 'father',
value: 1
}, {
name: 'leia organa',
id: 'child-2',
parent: 'father',
value: 3
}, {
name: 'ben skywalker',
parent: 'child-1',
value: 1
}, {
name: 'jaina solo',
parent: 'child-2',
value: 1
}, {
name: 'jacen solo',
parent: 'child-2',
value: 1
}, {
name: 'anakin solo',
parent: 'child-2',
value: 1
}
];
$('#container').highcharts({
chart: {
type: 'sunburst'
},
title: {
text: 'family tree'
},
series: [{
data: data
}]
});
});
or see this very elaborate example of world population for its potential.
Source: stackoverflow.com
Related Query
- 3 layer donut chart in Highcharts
- Highcharts donut chart without inner pie?
- Highcharts donut chart customization
- Highcharts Donut Chart text in center change on hover
- Highcharts Donut chart is rendered as a Pie chart in IE 8
- HighCharts Stock Chart error code 18
- highcharts - donut chart - Labels inside and outside
- highcharts donut chart center text overlaps with tooltip
- jQuery Highcharts double donut chart (donut within donut)
- Highcharts Donut Chart customization
- Highcharts - Is there a chart similar to full donut
- How to make a Highcharts semi-circle donut chart using Hightchart-ng
- HighCharts - Trying to create a 'thin' donut chart
- Highcharts display label for pie chart using html table as data source
- How can I get highcharts Donut chart to auto calculate percentages
- Convert group json for Highcharts Donut chart
- Using hours and minutes as data in highcharts donut chart
- HighCharts donut chart drilldown
- Highcharts datalabel 'callout' shape not working for donut chart
- Recreating a highcharts donut chart in highcharter
- How to draw an outer border for a donut chart - Highcharts
- Highcharts donut chart remove border when at 100%
- highcharts donut pie - How to calculate pie size percentages after resize the chart
- How to remove default Hover text and display the custom text title on hover Donut chart Highcharts
- Highcharts cloud issue with data source when duplicating chart
- Disable data overlap in donut chart in Highcharts
- How to draw a donut chart sparkline using highcharts in react?
- Center Highcharts tooltip in the middle of donut chart in a responsive way
- Highcharts -- yAxis on donut chart not being displayed
- Missed colors in Highcharts donut chart rendering
More Query from same tag
- how to make a scatter with regression line graph in amcharts / highcharts?
- Is there a maximum number of x-Axis items in HighCharts
- Rails 3 Array in HighCharts - my brain will explode
- Correction chart view with Highcharts
- How to move islands in a highmap
- highcharts / stock charts custom toolbar button text / title
- shift y-axis from dumbell chart within the line
- Highcharts error #13 unless I run under IE compatibility view?
- How to hide specific dots and labels onmouseover in highcharts
- HighStock y-axis labels changing by itself when horizontal scroll moves
- Highchart.js Custom Y-Axis Ticker
- Highchart - Chart type, gap in the x and y axis (0,0)
- Display legend items in two columns highcharts
- Position of highcharts map series
- Add more data into Highchart's column
- Adding a label to the left and to the right of a bar in highcharts
- HighCharts disable y-axis label notation
- R-highcharter combine tooltips
- Angular 7 High Charts Stock Chart Datetime X Axis tooltip formatting independently of other tooltips
- xaxis populated with weekdays looping
- Possibilities/advise for creating a grid-like Dashboard with graphs (highcharts)?
- How to set the background of clicked or selected label on y axis gantt chart Highcharts?
- angularjs & highcharts - setting up properties in directive
- Highchart value series mapping
- all bar should be of same height . data part should be coloured and rest should be grayed
- Highcharts PieChart Legend paging faulty
- Highchart Pie chart, de-structure dataLabels and define custom formatter
- Highcharts Column Chart Drilldown
- How to remove margins in highmaps?
- Highchart Pie chart with partially colored slices