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
Related
I know I can get the actual value to show up in the pie chart, i.e. on the slice. However I want the percentage in the pie chart (which I can get to show up) since it is more likely to fit in a slice and the actual value underneath the label. However no matter what I do I can't get anything besides the respective percentage to show up underneath each slice's label. Help!
I understand that you want to change your pie graph hiding the percentage shown inside the pie slice. If that is your goal, then you only have to update one chart setting. Follow these steps:
Double left click on the chart. The chart editor sidebar will open.
Click on the Customise tab.
Open the Pie chart submenu.
Update the Slice label property from Percentage to None.
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.
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/
I am using highcharts library to draw chart and I need to display Weekdays as labels on x-axis and also to auto reset it like from Monday to M if all weekdays can't fit on screen.
It should be dynamic, which means no flickering should appear when changing label text on x-axis.
Any suggestions?
Thanks in advance.
There is no straight option for that, rather simple workaround:
Disable reflow from Highcharts, use window.resize browser event
In that event add condition to decide showing full name of just shortened, and set this for chart - chart.xAxis[0].dateTimeLabelFormats should be fine
After setting new format, apply new chart dimensions using chart.setSize(w, h)
I have the following issues while working with stacked column charts:
Firstly,look at the following chart:
http://jsfiddle.net/QnuEA/
If you notice the time range is wide, the columns appear too thin. I know that setting pointWidth is one option. But actually the chart should be appearing as they would if the time interval range is narrow as follows:
http://jsfiddle.net/QnuEA/1/
The expectation is x-axis interval must adjust itself.
Secondly, for the same chart as above, if the width of the chart is more (say 900 px or so), the x-axis seems to have a lot of empty space before the first tick.
Is there a solution to this? (I am unable to post more than 2 jsfiddle links here.So I am not providing a link for this issue)
You need to define pointRange as timestamp
http://jsfiddle.net/QnuEA/3/