I have spline chart, with dateTime xAxis and more than 3k points in each of 2 categories: http://jsfiddle.net/jk171505/dmmhL5ha/7/
Is there a way, other than tickInterval, to prevent overlapping labels on xAxis?
I tried to use tickInterval but this isn't the option, as data points are irregular and amount varies (sometimes it's data for period of 2 weeks, sometimes 2 years):
xAxis: {
type: 'datetime',
categories: ["test1", "test"],
tickInterval: 24 * 3600 * 1000 * 31,
Set tickPixelInterval - bigger than label width, to make sure there is enough space between items JSFiddle.
Related
Example plunk refereed to below.
I have a line chart where the Y axis is a percentage between 0 and 1. Sometimes my highest percentage is less than 1% sometimes its between 99 and 100%. It never makes sense to have more than 100% displayed on the legend.
The problem is if I set max: 1 and have data that is all below 0.1, the chart looks flat like in the second example. However, If I don't set max and the data is approaching 100%, then y axis will render ticks up to 125%.
How do let the legend autoscale, but cap the max value.
You have this in your y-axis:
yAxis: {
max: 1,
min: 0
}
If you instead go for this, it should be more understandable:
yAxis: {
min: 0,
endOnTick: false
}
To clarify, you had max: 1 and endOnTick: true (default), and according to the API:
If the endOnTick option is true, the max value might be rounded up.
See this updated Plunker for a demonstration.
The same goes for starting at 0%. You could remove min and set startOnTick: false.
I am using highcharts to graph some datas. I can select two dates and the graph will show the datas between those 2 dates.
I have the following code:
options.xAxis[0] = {
type: 'datetime',
tickInterval: 3600 * 1000, // one hour
tickWidth: 5,
gridLineWidth: '1',
gridLineColor: gridLineColor,
labels: {
align: 'center',
x: -3,
y: 20,
formatter: function() {
return '<b style=\"font-size:120%\">' + Highcharts.dateFormat('%d-%m', this.value) + '<b>' + '<br>' + Highcharts.dateFormat('%l%p', this.value);
}
},
opposite: false
}
My problem is that if I have 1 day, I see all the hours and if I have selected 5 days for example, I see the 5 days on the axis but if I select 3 months, I see all the days within those 3 months. And this is unreadable.
Is it possible to say that you don't want to have more than 10 intervals shown on the axis?
Many thanks,
John.
You have a couple of options:
Set your tickInterval dynamically. Set the interval depending on time frame of your data
use the tickPixlInterval option. This decides on logical tick intervals that fall somewhere close to the pixel value you specify.
http://api.highcharts.com/highcharts#xAxis.tickPixelInterval
I need to set the step between the display lines in Highcharts. I mean it -
200
150
100
50
0
In this y-case step = 50. How can i set this in HighCharts?
This found with the yAxis.tickInterval. For example:
yAxis: {
tickInterval: 50
}
http://jsfiddle.net/BYeBa/
yAxis: {
min: 0,
max: 75,
title: {
text: ''
}
I am not sure why I cannot set the max value of the y axis in this highchart. I don't want it to go over 75. None of the data I have populate even goes near the value of 75.
Why does it stay at 100?
This is caused by endOnTick. If you set
endOnTick:false
75 will be your max.
See http://jsfiddle.net/kzoon/BYeBa/4/
You can set tickInterval as 25.
http://api.highcharts.com/highcharts#yAxis.tickInterval
Can anybody give an example of drilldown chart that has min and max for the Y axis labels? Here is the jsfiddle of the example from the Highcharts website.
I have been trying to figure out how to set a min and max for the Y axis labels. So for example instead of starting at 0 i would like to start at 88.
To get the desired result - for example, start yAxis values at 88, you should use this settings:
new Highcharts.Chart({
....
yAxis: {
min: 88,
startOnTick: false // To prevent rounding of this value.
},
....
});
Hope this helps.