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
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/
Hello, I want to reduce height of grids in chart, how can I?
I am using iOS-Charts(Daniel Gindi).
What you want to adjust the barSpacing (Charts 2.*) or barWidth (Charts 3.0), to change the size of the bar relative to the size of the grid strip.
The intervals of the grid are calculated dynamically, and may change when you zoom in/out, but you can constraint them also with granularity. This will affect the labels intervals too.
How can I decrease space between series on a Highstock control? See attached image:
You are using this example: http://www.highcharts.com/stock/demo/candlestick-and-volume - just set proper values for height and top for y-axes
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;".