I have been searching this but not able to get any solutions for this. I want my scatter chart to be of fixed height regardless of no of legends used.
Please look into below fiddle link:
http://jsfiddle.net/3o982ewu/118/
"chart": {
"type": "scatter",
"zoomType": "xy",
"plotBorderWidth": 2,
"width": 400,
"height":400,
.....
I have set chart height to be 400. If no of legends increase, then scatter chart height gets adjusted (decrease) accordingly. You can try increasing the legends and notice that chart height gets decreased. I have tried other options like setting margin top and bottom (suggested in one post) but no luck.
I see that in highcharts js, there is 'plotHeight' variable which is used to set the chart height but I find no means to set it from my code or provide into as chart options. This scatter chart will be displayed in pdf so there is no scope of adding pagination, scrolls or any other stuff which is feasible only in web browser but not in pdf.
I am answering my own question because I found a way to deal with this scenario.
We hid the legends on the chart, so this way plot height of the chart will be always fixed. (plotHeight will be equal to the height of the chart which we provide in the chart settings considering we don't supply any margins)
We stored the data points (color of the legend and legend name) in the array and printed those outside the chart to make them appear as legends.
Related
In my highchart's pie chart datalabels working properly when width and height is default (600*400),
but while change the height and width in custom manner the datalabel text (Internet Explorer some text) overflow from plot are and hide.
BTW i used the option
dataLabels: {
crop:false,
overflow:'none'
}
for avoiding overflow but can't
here my fiddle
The source of the problem here is size parameter.
From the API (https://api.highcharts.com/highcharts/series.pie.size):
The default behaviour (as of 3.0) is to scale to the plot area and
give room for data labels within the plot area.
So if you manually set it to 100% data labels can be rendered outside of the plot area - Highcharts won't try to find an optimal value for size parameter.
Your demo works fine if you preserve the default value of size: http://jsfiddle.net/BlackLabel/zjaa7y81/
I have three pie charts displayed in a row. Two have two segments, one has five. All three have vertical legends.
Given that, the chart with five segments displays the pie slightly smaller, due to the extra height of the legend. It also has a slight negative vertical offset.
Is there any way I can set all three charts to render the chart in the same position? I've tried setting the center to 50%,50% in plotOptions, didn't help.
You have to set the marginBottom-Value of the chart to a value that is equal an all charts. Highcharts is trying to display the pie as big as possible, therefore it will use more space if the legend is not as big.
By setting the marginBottom you force the chart to ignore the actual legend size.
The center: ['50%','50%'] setting will only take into account the actual plot area. So if this area is decreased because of a taller legend it has no effect.
I made a jsfiddle where you can explore this settings:
http://jsfiddle.net/doc_snyder/dsmgy6ts/
Highcharts columns sometimes don't make proper use of the available height, in some cases leaving nearly the upper half of a chart empty. After fiddling with the official example charts I noticed that the y-axis max extreme (internally) seems to be dependent on the chart's container height.
For example, the Highcharts example for stacked column chart:
The original example (container height of 400px) has a max of 12.5 for the y-axis with the largest columns having a value of 11. ~90% of the chart height are used.
When modifying the height to 300px, y-axis max changes to 15, so that only ~75% of the height is used.
When modifying the height to 200px, y-axis max changes to 20, only ~55% of the height being used.
Is there a way to improve this behavior without programmatically setting the axis extremes whenever the displayed data changes? You might argue that applying such a small height to a column chart is a weird thing to do, but this is just an example, I have seen similar behavior with larger charts (having other data).
This is related with fact, that defaulty highcharts has enabled maxPadding. Set that parameter as 0 to fillout area more efficient.
yAxis: {
maxPadding:0
}
The example charts could be fixed with Sebastian's answer. After applying the change to my own chart, I noticed another problem that screwed up the scale even more, but was not part of this question - adding this as another answer, just for the sake of completeness.
My chart consisted of combined column/line chart with a 2nd y-axis. Depending on its values, the line chart series had strange effects on the scale of the columns (even if the line chart series was empty). Doing some more research I found this SO answer pointing me to Highcharts' alignTicks option, setting it to false resolved the issue.
How to configure the chart options to get a constant height chart
regardless the number of series displayed in the legend ?
Below 2 links to exported charts showing the problem.
Notice that the height of the chart has descreased.
Ideally, the legend would be displayed at the bottom of the
chart when user process to an export of the chart.
Let me know if I have missed something from the documentation.
Best regards
Patrick
As you can see from the attached image, my x-axis categories are getting bunched together in the middle. How can I configure highcharts to take up more of the x-axis? Note: The chart size is dynamic, it grows and shrinks based on the overall browser size and split-panels within the app. So explicit computation of the point-width is not an option (I expect highcharts to do the work for me).
Note: The picture is vertically cropped.
The chart options I'm using are:
highchart.setAnimation(false);
Legend legend = new Legend();
legend.setEnabled(false);
highchart.setLegend(legend);
highchart.getXAxis().setCategories(result.getAxisXCategories().toArray(new String[] {}));
highchart.setType(Series.Type.COLUMN);
ColumnPlotOptions options = new ColumnPlotOptions();
options.setStacking(Stacking.NORMAL);
options.setGroupPadding(0);
options.setAnimation(true);
highchart.setColumnPlotOptions(options);
In other words, legend is turned off and column plot options is set to zero group-padding.
UPDATE: Here is a JSFiddle showing the same issue
For others who run into the same issue, the solution is to set the pointRange option of the ColumnPlotOptions. In JSON this looks like:
"plotOptions": {
"column": {
"stacking": "normal",
pointRange: 1,
"groupPadding": 0
}
}
In GWT-Highcharts, you don't actually have a specific API for pointRange. Therefore set a generic option like this:
ColumnPlotOptions options = new ColumnPlotOptions();
options.setOption("pointRange", 1.0);
...
You can try to set pointWidth() http://api.highcharts.com/highcharts#plotOptions.column.pointWidth