I'm trying to get Highcharts to expand vertically to fill up available space. I can't seem to figure it out though. Here's the demo:
http://jsfiddle.net/9xa4unka/
Is it possible to get Highcharts to expand #container to fill the height without defining a height on #rail (the height of #rail is dynamic)?
Related
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 a high charts height which has a variable number of rows. I set it in a container with min-height of 300px, but when it has lots of entries they are all squashed.
How can I set the height dynamically?
I am using highchart's pie chart to display my data. But i am having some problem on setting the height of the sub-title. I am displaying my chart in a div named container(<div id="container></div>). However, the height i have to set is inside that div which is set by highchart itself. My subtitle is quite long and is not fully displayed in the chart.
I have made the js fiddle of my issue below:
http://jsfiddle.net/Simron_Thapa/eezpjaav/
You can explicitly bump up the height of the created highcharts-container:
var elem = $('.highcharts-container');
elem.css('height',elem.height() + 200); // increasing it by 200px
Updated fiddle.
I'm having trouble embedding a highcharts pie chart in an html document. Specifically, I can't resize the chart's container without changing the size of the chart. Does anyone know if you can reduce the default padding without shrinking the chart? Alternatively, can you increase the diameter of the chart without increasing the width of the container?
You can reduce padding / spacing / margins http://api.highcharts.com/highcharts#chart or increase size http://api.highcharts.com/highcharts#plotOptions.pie.size
This functionality is available for the Pie Chart via the plotOptions size parameter, however after inspecting the Highcharts API the size isn't available for the Gauge.
size API entry for Pie Chart
Considering the likeness of the two charts (being circular), I was hoping there would be a similar option but the gauge always fills some subset of the container div that I am unable to control. Has anyone else run into this issue or found a solution?
By setting the spacing to zero, you can fill the entire space:
http://jsfiddle.net/mkremer90/3sngK/1/
Fiddle with the spacing parameters to change how much the chart fills. As for a percentage based like size option I can't find one either.
I know this is old, but if like me, you have borderWidth set to something greater than 0, you'll find yourself with the tag being positioned (e.g. x="5.5" y="5.5") off from the corner and width and height shrunk. Setting spacing and margin options won't help in this case.
The simple solution then is to avoid setting borderWidth to anything at all; just leave it default or set it to zero. Instead, set the border on the container element you're calling highcharts on.
Alternatively, you could set negative margins and increase size on the container element to compensate for position shift and size shrink on the graph. Might need to wrap the container in a div with style="overflow: hidden;".