I'm trying to align columns to the left in my chart. By default they are in the middle.
I can't find anything about this in the API documentation.
Here is a jsFiddle test.
In the highcharts api, have you examined the group padding feature?
http://www.highcharts.com/ref/#plotOptions-column--groupPadding
plotOptions: {
series: {
groupPadding: 0
}
},
If the columns appear too wide when you set the groupPadding to 0,
you can still play with the pointPadding. http://www.highcharts.com/ref/#plotOptions-column--pointPadding
(If that doesn't fit your needs, I guess I'm a bit perplexed,
because I don't see how having chart columns aligned to the left,
then followed by a big blank space on the right, would make
for a well-designed chart...)
you can trying using the margin option http://www.highcharts.com/ref/#chart--margin
or the margin left option http://www.highcharts.com/ref/#chart--marginLeft
or the spacing left option http://www.highcharts.com/ref/#chart--spacingLeft
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.
Using HighChart, I wanted to create grouped column chart with max width, so that when there are less points on x axis the bar does not look wide.
I found some property maxPointWidth which can be applied to achieve the same. but using this there is a gap for each bar within x-point.
How to remove this gap ? I have tried pointPadding:0 as well seems this does not help
I am expecting chart something like below.
Fiddle: https://jsfiddle.net/mcshiva0507/hx83bbzb/2/
groupPadding will help. https://api.highcharts.com/highcharts/plotOptions.column.groupPadding
plotOptions: {
series: {
groupPadding:0.45,
maxPointWidth: 10
}
},
https://jsfiddle.net/mcshiva0507/hx83bbzb/2/
by default without touching the axis, highcharts try to use as much space as possible, what if I want to leave about half an inch on top or bottom because I want to put a logo there. How can I set option so that there is padding on the yaxis basically?
-------------1
-------------2
-------------3
-------------4
ie chart goes from 1 to 4 but series should be plotted within 2 to 3 only.
You can use the minPadding and maxPadding options:
yAxis: {
maxPadding: 0.2,
minPadding:0.2
},
http://api.highcharts.com/highcharts#yAxis.maxPadding
You can also define spacing to add more space above axis.
I have two bar charts, drawn using highcharts library, on a single page. I need to maintain same width for bars and same spacing between bars in a group, across these charts. Size of container is different across the charts and fixed as per the UI layout.
Snippet of plot options:
series: {
grouping:true,
groupPadding:0.12,
borderWidth: 0,
events: {
legendItemClick: function () {
return false;
}
}
}
I have tried various combinations and a jsfiddle link is here - http://jsfiddle.net/U6mhy/29/
In the above link, though the bar width is same between the two charts, spacing between bars in a single group is not same. In fact, bars in chart1 hardly appear to be grouped.
I have tried specifying different values of groupPadding, pointPadding and pointWidth but unable to achieve consistent spacing between bars across these charts.
Please suggest if any other combination of options can help me achieve this.
-Thanks
Just to make it clear, you can use one of (not both):
pointWidth: forces Highcharts to draw bars with fixed width,
pointPadding + groupPadding: calculates width of the bar according to these values and chart width/height
Just think about this: how to set the same width of the bar for all charts when you have different number of bars? And the answer is to change charts' width according to number of columns. For example you have 4 bars? Chart height/width will be sum: 4 x 10px + some_padding. If you have 10 bars, when height/width will be: 10 x 10px + some_padding (the same as above). I hope that's what you want to achieve.
I have an issue with a HighCharts pie I've created. Sometimes the tooltip text overlaps with the legend, so I had to increase the legend's y property. However, this is causing parts of the legend (it's horizontal with 4 rows) to become partially hidden. I've tried adjusting the height property of the container, as well as a bunch of other properties, but the problem never goes away...
Here's how it looks like:
http://imgur.com/YOPjoXG
Any help is much appreciated.
If you are fine with pagination in legend then fix the height of the legend with maxHeight.
if the legend overflows, then pagination appears automatically.
legend: {
maxHeight: 30,
}
here is a working fiddle for pagination http://jsfiddle.net/cEcRz/
hope this is what you are looking for.
You can use pagination but in exporting add custom options to the legend like here:
http://jsfiddle.net/cEcRz/1/
exporting:{
chartOptions:{
legend:{
layout: 'horizontal'
}
}
},
Obviosuly you need to adapt other parameters like size etc.