score:1
The following minor patch to highcharts.src.js
v4.0.1 achieves the desired behaviour:
--- highcharts.src.orig.js 2014-04-24 08:25:52.000000000 +0000 +++ highcharts.src.js 2014-06-24 13:57:42.957605307 +0000 @@ -12167,6 +12167,22 @@ positions = [pick(centerOption[0], '50%'), pick(centerOption[1], '50%'), options.size || '100%', options.innerSize || 0], smallestSize = mathMin(plotWidth, plotHeight), isPercent; + + /** + * Allow a chart (pie) to specify a size relative to another series. In + * that case, simply copy the center position of the parent, and scale + * the radius. + */ + if ( options.relativeSize ) { + parentPositions = chart.series[options.relativeSize.parentSeries].center; + positions[0] = parentPositions[0]; + positions[1] = parentPositions[1]; + positions[2] = options.relativeSize.size * parentPositions[2]; + + return map(positions, function (length, i) { + return positions[i] + }); + } return map(positions, function (length, i) { isPercent = /%$/.test(length);
Then, when configuring the donut:
series: [{ name: 'Browsers', data: browserData, center: ['50%', '50%'], dataLabels: { formatter: function() { return this.y > 5 ? this.point.name : null; }, color: 'white', distance: -30 } }, { name: 'Versions', data: versionsData, relativeSize: { parentSeries: 0, // index of parent series size: 0.75 // 75% of parent pie } dataLabels: { formatter: function() { // display only if larger than 1 return this.y > 1 ? ''+ this.point.name +': '+ this.y +'%' : null; } } }]
Note that the parent (outer) pie must be explicitly centered in the container, otherwise in certain cases the two pies may not be concentric.
Also, requiring the index of the series to be specified is clearly not ideal, but in a tightly controlled graph (as is a donut), it seems to do the job.
score:0
Unfortunately this option is not available, so I advice you to post your request on the uservoice
score:1
The dataLabels: formatter...
is only controlling whether or not to show datalabel for thinner slices. It's not controlling the size of the pie chart. That is being specified by the series:[{size
parameter. In your example it's set to 85% of the container which does lead to overflow.
According to the docs
The default behaviour (as of 3.0) is to scale to the plot area and give room for data labels within the plot area.
If you comment out the size on your example, it does indeed squeeze in the labels but I'm not sure you'll love the look of it.
Source: stackoverflow.com
Related Query
- Highcharts donut label overflow container
- Highcharts display label for pie chart using html table as data source
- Highcharts donut chart without inner pie?
- Highcharts tooltip overflow is hidden
- Highcharts width exceeds container div on first load
- Fixed y-axis label width in Highcharts
- Highcharts donut chart customization
- How do I format x-axis label in highcharts
- Highcharts graph X-axis label for different date ranges
- How to align centre a custom label in highcharts
- Highcharts TypeScript, y-axis label
- HighCharts Place Label on Bar
- 3 layer donut chart in Highcharts
- Highcharts - Long multi-line y axis labels causing following label to be removed
- Show specific series values in the stack label using highcharts
- Hide first yAxis label in Highcharts
- Show label only every x number of steps in highcharts
- Highcharts Pie Chart Label Threshold
- data label is not shown Highcharts
- Highcharts Donut Chart text in center change on hover
- Highcharts data label getting cut off
- Highcharts - show every month on datetime x-axis when the parent container is small
- create a sticky tooltip for a point or a permanent label using HighCharts
- How to change axis label size when exporting in Highcharts / Highstock
- Highcharts plotband label zIndex
- Highcharts axis label before first point
- How to add a label above each bar in HighCharts
- Show value of last point as label or tooltip on Highcharts Stock Chart
- How can I force highcharts to show every x-axis label regardless of spacing constraints?
- Adding HTML label to Highcharts
More Query from same tag
- Is there a way to update with new data a Radial (or Circular) bar chart after rendering?
- Number Formatting at Highcharts Chart Values?
- US Counties map in Highmaps for Angular throws compilation error
- Overlapping columns in highchart
- Start x axis at minimum value
- High Charts Polar / Spider chart with off-graph y-axis labels
- Is there a method to calculate quartiles and outliers of a boxplot(highchart) directly in JavaScript
- Highchart how to use custom javascript variable in highchart?
- How can I have same hover point color in highcharts?
- Delete Highchart top line with heatmap
- Highcharts - synchronized-charts crosshair line and circle point display
- Highcharts Y Axis Tick Marks not setting
- Trying to inject datapoints into iOS webView using highcharts
- How to implement drilldown in asp.net mvc project?
- Highstock with data.csv starts with 01.01.1970
- Highcharts: How to change colors of all areas except hovered one on MouseOver event in area plot
- Parallelcoordinates in R-highcharter R
- HighMaps Only Displaying Color For Last Series In US Map
- Highcharts shared tooltip making a percentage difference between series
- How to pass custom tootlip for each data point in Line chart : Highcharts+ ReactJS
- Refresh an Angular page (controller $scope, directive $scope) to emulate a first load of a page not $window.location.reload
- How to sort objects by creation date to plug into high charts with Meteor
- Highcharts gradient fill how to?
- Line chart not drawn to scale
- Highcharts Display Issue
- How to Get element properties from Highchart
- HighChart created before $.getJSON
- Cannot display a legend with special character in highchart from the serie name
- Highcharts networkgraph datalabels on hover
- In highcharts, the state of rangeselector buttons with custom events do not change correctly