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
- Coloring treemap by parent node in highcharts styled mode
- Broken y-axis in multiple y-axis settings for Highchart
- Highcharts in the Rails Assest Pipeline not Loading
- HIghcharts column tickmarks not aligned to column
- Line series graphs gives error on resizing - highcharts
- Dynamic updates with highcharts
- Change background color on HighCharts
- Highcharts IE issues with jQuery ajax load
- highcharts; add arbitrary data which lasts when rendered
- Highcharts - How do I dynamically change Marker radius when zooming?
- changing page output view after click event on highchart plot point
- Highcahrts sometimes loads but not always
- Highstock Angular value in legend
- Highcharts:Remove the color area below the 2 series
- highcharts: Set same spacing between bars
- Jinja2: TemplateSyntaxError: Encountered unknown tag
- How to set new yAxis data in chart dynamically (highcharts + angular2(4))?
- How do I properly format HighStock x-axis ticks based on unix timestamps?
- Highchart yAxis plotLines label position
- Use an array of objects for series data in Highcharts
- Highcharts Columnrange data labels high and low different colors
- Testing for NaN in a JS array?
- Creating depth chart using highcharts and creating bids and asks in such a way that bids and asks are created from center of chart
- How to take the middle out of a highchart donut chart?
- How to instruct highcharts scatter chart to print all dataLabels
- Preprocessing data in HighCharts JS in C# ASP.NET
- Can't assign names to legend points
- Highchart stacked column chart missing some items
- Highstock chart export as PDF with image and text in title
- Highcharts series hover state enables after adding series