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.
Related
My Bubble Chart - https://jsfiddle.net/cm4fortp/
Here in this chart I am showing data of last 3 months. The problem is due to width, Highcharts is wrapping up the x-axis ticks i.e. showing only few x-axis labels. I want to show the label for every first date of month and also on 2-weeks interval.
I have used following formatter to play with x-axis labels but not all indexes are coming here.
xAxis: {
labels: {
formatter: function() {
if(this.value!=-1 && this.value!=0){
console.log(this.value); //to print all the x-axis index
}
}
}
}
I am looking for maybe something that can give me all the x-axis index or can force Highcharts to display all x-axis labels or something horizontal scroll so that I can increase and fix the width of chart to show all labels.
To show as many ticks as you want you can use xAxis.tickPositions - an array defining where the ticks are laid out on the axis.
API reference:
https://api.highcharts.com/highcharts/xAxis.tickPositions
I have in excess of three years data being shown along the xAxis of a graph.
I'd like a user to be able to zoom into the xAxis to view data points more closely (yAxis doesn't need to change), by clicking buttons that will show "1 month", "6 months", "1 year" worth of data points in the visible chart area.
I can achieve this zoom using chart.xAxis[0].setExtremes(startDate, endDate) but I'd then like the user to be able to scroll along the xAxis at the specified zoom level to view the data that is off the side of the visible chart area and this I can't work out.
I imagine the issue is that setExtremes sets specific start and end points to the visible area, whereas what I really want to do is limit the view by a generic time period.
Appreciate any pointers!
I recommend you to use Highstock. You will be able to create a stock chart with additional features that you need or create a chart with scrollbar.
scrollbar: {
enabled: true
}
Live demo: http://jsfiddle.net/BlackLabel/8L0aj1wt/
Thanks for the Highstock recommendations #ewolden & #ppotaczek I can see it does have the right kind of functionality, but I managed to solve it by adding the following (panning, panKey and pinchType) to my chart options:
chart: {
type: 'spline',
panning: true,
panKey: 'shift',
pinchType: 'x',
}
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
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]
I have an odd request. My boss wants me to improve an existing chart with a second axis.
The blue area must define the scale of the second axis, like a percentage of completion for the reading of the green area. The 100% value must be at the maximum of the blue area. I can collect the highest value of the blue area without any trouble, but I don't know how to set the properties of the second axis according to this value. The thing is that the second axis does not have any data associated, therefore, he isn't shown...
Any idea ?
PS : I tried to be as clear as possible, but maybe that was not the case. Don't hesitate to tell me if you need more explanations.
You can use axis.linkedTo to get a second axis and data formatters to get the data formatted as percentages.
I'm not modifying the series data, only changing the text shown in the second yAxis scale, the tooltip and the data labels.
yAxis: [{
// Default options
}, {
linkedTo: 0,
opposite: true,
labels: {
formatter: function () {
return formatPercent(this.value);
}
}
}]
Example on jsFiddle: http://jsfiddle.net/uPHZx/