We are trying to provide spacing between the categories used for highcharts but for some reason the x-axis seem so zoomed in that its difficult to navigate.
Tried using maxPadding setting for x-axis but the labels on x-axis are also getting changed.
These are the categories used :
categories: [
'11-20','11-23','11-24','11-25','11-27','11-30','12-01']
}
Upon using
xAxis: {
maxPadding: 1
},
The spacing looks fine but categories used above are all replaced by 0,0.5,1,... till 12.
Is there any way we can preserve the categories or x-axis labels while reducing spacing between them
Could you please clarify
Thank You
Related
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 am generating Highcharts column charts with many columns. The chart is very wide, necessitating scrolling (via the CSS overflow option on the Highcharts div). Is there a way for the Y axis to always be visible, even when one has scrolled to the right? I am aware that Highstock has an option for a scrollbar, but I'm only using Highcharts. Is there anything comparable there?
Thanks in advance.
You can enable scrollbar in highcharts including highstock.js. but using highcharts. see example: http://jsfiddle.net/xVyLr/
xAxis: {
max:5
},
scrollbar: {
enabled:true
},
On hiding both the series using legends, and then clicking one of the series shows xAxis starting from '-1', when ideally it should show only not null categories.
Using 'ignoreHiddenSeries: false' solves the purpose but again on hiding both the series using legend and then enabling other series tends to overlap both the series. Although on window resize event, series get aligned properly.
chart: {
type: 'column'
// ignoreHiddenSeries: false
},
Example for reference: http://jsfiddle.net/t88rc/
You can simply set for xAxis min:0, see: http://jsfiddle.net/t88rc/2/
Grouped column charts work best with equal number of data points per series.
Best solution I have found for this is to fill any missing data points with null values:
http://jsfiddle.net/jlbriggs/t88rc/1/
data: [49.9, 71.5,null,null,null,null,null,null]
In chart, the x-axis labels are overlapping, when chart data is big.
I have used "step" property as follows :
xAxis: {
labels:{
step: (stepVal ? stepVal : 0),
},
}
I calculate the value of stepVal, depending upon data.
This resolves the issue of overlapping labels on x-axis.
But, when I zoom the chart, I want to see all the labels on x-axis.
How to get it?
In Highcharts 3.0 you can use
chart.xAxis[0].update({
labels: {
step: newValue
}
}
for updating step. Just setting new value in options for new chart won't work.
I believe what you are looking for is this..
http://api.highcharts.com/highcharts#chart.events.selection
You would need to change the xAxis labels steps in the event of a zoom action. You will need to determine how many labels you would want to show, based on how many labels are visible as a result of the zoom.