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.
Related
I have the first chart:
Multiple y-axis with broken y-axis for left-hand-side y-axis only
The left-hand-side y-axis is broken from 1M to 25M, while there is no broken setting for the right-hand-side y-axis. The horizontal lines for the 2 y-axis in the chart area make it a little bit hard to read. It can be improved by setting the broken for the right-hand-side y-axis from 250K to 6.25M like the 2nd chart shows:
Multiple y-axis with broken y-axis for both y-axis
The broken setting is set by user. They cannot preview the result when configuring the settings.
I want to have a chart with the horizontal lines for both hand side overlapped with each other. I can only add the broken setting for right-hand-side y-axis. But I should know the min & max value for all the series used. The min value is default to be 0, but the max value for the series which use left-hand-side y-axis is around 44M, while it is around 13.5M for the right-hand-side y-axis. But the chart shows me 56M for the left-hand-side y-axis, while it is 14M for the right-hand-side y-axis. I cannot predict the max value for the y-axis while generating the chart setting.
Is it possible to add the broken setting for the right-hand-side programmatically? Or is there any other approach?
Is it possible to add the broken setting for the right-hand-side
programmatically? Or is there any other approach?
Yes, adding programmatically calculated breaks seems to be the only way. You can use for example chart's load event where you have access to all the required values.
For example:
chart: {
events: {
load: function() {
const yAxes = this.yAxis;
yAxes[1].update({
breaks: [{
from: 20,
to: 40,
breakSize: 0
}]
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/s01box6p/
API Reference:
https://api.highcharts.com/highcharts/chart.events
https://api.highcharts.com/highcharts/yAxis.breaks
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/
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 a Highcharts chart as follows:-
http://jsfiddle.net/sushengloong/KQNhm/1/
I need to change it such that the bar chart appears right in between the ticks. As you can see from the above link, I tried using pointPlacement: 'between' but some charts are still not displayed in between the two adjacent ticks. On top of that, there are some spacing to the right of every bar chart which make the gap between the bar charts unequal.
In addition, the xAxis tick label should also appear in the middle whereby the two adjacent ticks depict the start and end of the respective month. I can't find an option for this.
In the one xAxis, you cannot have "between" / "o"n option for different series. Only what you can try to do is using two xAxis.
xAxis:[{
//...options
pointPlacement: 'between'
},{
linkedTo:0
pointPlacement: 'on'
}]
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