I am having an issue with a pie chart I created in highcharts.
Depending on the placement of the data labels the actual chart will grow or shrink.
We need the pie chart to stay the same size so is there a way to keep the pie size constant and force the labels to fit around it or do I just have to place the labels inside each slice?
You will have to set a fixed size for the pie chart. Can be a percentage or a pixel value. For example:
plotOptions: {
pie: {
size: 100
}
},
See this fiddle from the API http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/pie-size/
Related
Is there any way to make a Highcharts pie chart with a height that automatically fits the chart and the legend? I have a variable number of legend elements and cannot rely on a fixed pixel height or one relative to the width.
The legend is far away from the pie chart. I would like the pie chart to be at the top of the container with the legend right below, with the height set to whatever the combined height is (rather than setting a static height).
You can calculate the required chart height and use setSize method to set it:
events: {
load: function() {
this.setSize(
null,
this.seriesGroup.getBBox().height +
this.marginBottom + this.plotTop + 20
);
}
}
Live demo: http://jsfiddle.net/BlackLabel/5jL1acdk/
API: https://api.highcharts.com/class-reference/Highcharts.Chart#setSize
i need to set each slice height based on value which am passing. I need to plot a pie chart like this Pie Chart
You can use cut-out distance to simulate similar effect. Setting: https://zoomcharts.com/developers/en/pie-chart/api-reference/settings/slice/style.html#doc_cutoutDistance
Following this demo here (http://www.highcharts.com/docs/chart-and-series-types/combining-chart-types) I am trying to have a Pie chart and a bar chart on the same page.
The catch is I would like the Pie chart to be large on the left and then the bar chart on the right. I see the code to move the pie chart around, but I cannot figure out how to do the same with the bar chart, as it seems to want to span the entire container width. I understand that I could have two independent charts and place them in their own floating DIVs, but since the combining of charts is possible, I thought this would be a viable option.
You can set chart.marginLeft to half of the chart width. And set pie.center x coordinate to a negative value.
chart: {
marginLeft: 400
},
series: [{
center: ['-75%', '50%'],
example: http://jsfiddle.net/L55w9n53/
I have 10 series in one chart and using the Percentage Stacked Area chart type in Highchart, I can get the percentage distribution for each series.
However, when I deselect one series from the legend, it recalculate the percentage by only the active series. How do I tell Highchart to use the original total series instead of the active ones only?
You can set chart.ignoreHiddenSeries to false, see: http://jsfiddle.net/quthyjta/
API: http://api.highcharts.com/highcharts#chart.ignoreHiddenSeries
I am using highcharts 3D pie and if some label is a little bit long it does not resize correctly.
Here it is an example which I have taken from highcharts documentation and forked it for getting large labels.
http://jsfiddle.net/78wr256o/
It is important to mention that I would prefer to display the whole name and not cropping it. Resizing correctly the chart, keeping it centered and moving labels position if it is possible.
This is the initial version:
This is exactly the same chart but with a large label:
You can use html and css to format data labels.
series: [{...
dataLabels: {
useHTML: true,
style: {
"width": "30px"
}
......
Here is an example http://jsfiddle.net/8d517w3v/
It doesn't crop rather wrap labels around and make graph centered.