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
Related
Can you customise the height and width of the data points on Scatter chart? I want the square data point to be long rectangle line as demonstrated on the image below. The only option I see is pointRadius but that increases both h/w so doesn't give me desired size.
Thanks
On options of chart.js, adjust barPercentage of xAxes
The requirements are:
1. "ellipsis" visual effect "..." for overflowed legend items' text.
2. After resized, the legend item width should adjust with the new container size. Means if the legend item had text "blahblahblahblah", and after resizing, the chart container get smaller and have no enough space to display the full text, it should display "blahblah...".
I've figured out the 1st requirement by giving the legend itemWidth a fixed width in pixel, and set the textOverFlow to "ellipsis":
chartOptions.legend.itemStyle.width = $container.width() + "px";
chartOptions.legend.itemStyle.textOverflow = "ellipsis";
But for the 2nd requirement, I changed the chart.legend.itemStyle.width to the current container width, and call the chart.redraw(), and it doesn't really redraw the chart.
`chart.legend.itemStyle.width = $container.width() + "px";
`chart.redraw()`
Is there any way I can update the chart with new legend.itemStyle.width?
Jsfiddle: https://jsfiddle.net/scottszb1987/z5qv1t80/
Cheers
In your case, I'd suggest adding a window .resize() event and then producing a new version of the chart with the updated options. That way, your legend size will pull in the new width of the container element.
// whenever the window is resized, destroy the chart and redraw it using updated options
$(window).resize(function() {
chart.destroy();
chart = new Highcharts.Chart(getChartOptions($("#container")));
});
Here's an updated version of your fiddle with this change: https://jsfiddle.net/brightmatrix/z5qv1t80/5/
I hope this is helpful for you.
i have a question with Jqplot Legend table size, legend table will override my plot size while legend contain a lot of content and i'm using outsizeGrid. I been try using scroll for legend table, but the table have no show any scroll bar and only legend table size is increase.
var legendTable = $($('.jqplot-table-legend')[0]);
legendTable.css('display', 'block');
legendTable.css('z-index', 100);
legendTable.css('height', '100px');
legendTable.css('overflow-y', 'scroll');
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/
I am trying to reduce the width of the bar. I achieved the same by using pointWidth attribute. However, the padding before and after the label "1 page" is too high. I want to compress the whole graph similar to the second image.
Does anyone know?
Before:
After:
try setting the height of the chart :
chart: {
type: 'bar',
height: 250, // this can be calculated on the basis of categories length along with some default margin at the bottom and top of the chart
}
You can set use pointPadding / groupPadding http://api.highcharts.com/highcharts#plotOptions.bar.groupPadding
http://api.highcharts.com/highcharts#plotOptions.bar.pointPadding