For Highcharts, I want the y-axis max value to be slightly greater than the max data point but it should never exceed "100".
I tried setting max =100, the problem is whenever the data point is too small like say 12, the line is pushed down. In this case the max value should not be 100 but slightly greater than 12.
here's a small snippet.
https://codepen.io/thushara07/pen/qQWjZG
maxPadding: 0.1,
endOnTick: false,
expected: Max value should be greater than the max data point but it should never exceed 100.
In the load chart event you can check the axis max property and use setExtremes, if it is necessary:
chart: {
...,
events: {
load: function() {
var yAxis = this.yAxis[0];
if (yAxis.max > 100) {
yAxis.setExtremes(null, 100, true, false);
}
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/moyr4xec/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
Related
I've implemented a Gantt chart that contains some Gantt long bars and their time period is usually more than a couple of months, moreover, the xAxis of the chart shows years and months as you can see below gif. XAxis's tick-interval should change automatically when I change the range of the Gantt period, but it doesn't!
The desired way is that if I change the time range to a month or smaller, xAxis's tick-interval should change to month/week or month/day.
xAxis: {
maxPadding: 0,
max: Date.UTC(2024, 07, 16),
plotLines: [
// some lines
]
}
Ticks on the xAxis are calculated based on the provided data.
When your data range is wide, the ticks also tend to cover a wider period of time. To change default behaviour you might set the tickInterval inside the afterSetExtremes function with the use of the update method.
Inside you might specify some conditions like for example visible range.
events: {
afterSetExtremes: function(e) {
if (this.chart.xAxis[1].max - this.chart.xAxis[1].min < 36e8) {
this.update({
tickInterval: 36e7
})
} else {
this.update({
tickInterval: undefined
})
this.chart.xAxis[1].update({
tickInterval: undefined
})
}
}
}
API:
https://api.highcharts.com/gantt/xAxis.events.afterSetExtremes
https://api.highcharts.com/class-reference/Highcharts.Axis#update
Live demo: https://jsfiddle.net/BlackLabel/9poc65fn/
i have a highchart with 4 series. I also only set the min value for each y-axis to 0 cause there arent any negative values possible. now highchart is calculating the max value by itself what is nice BUT i need this for each series itself. The reason is that i have 2 series with very high values from the range up to 5000 and the other two values are relativ small from 0 to 50.
The max value highcharts calculates is used for all four series - so the chart looks like this:
As you can see you can only see the two high value series - the other two arent really visible at the bottom of the chart.
When i disable the two series with the high values the chart looks nice for the other two values:
is there any flag i can use so highchart will calculate the max value / scale per series? Or have i really calculate it by myself - also on zoom and so on.
I found this: https://github.com/highcharts/highcharts/issues/4248
But i thought thats some basic functionality with is needed very often so there has to be something..
greetings
Maybe it would be better to use logarithmic axis type? Your chart would have only one axis adjusted to much difference between the values of series points. When it comes to differences between units of measurement, always you can set the different tooltip.pointFormat definition for specific series.
Highcharts.chart('container', {
title: {
text: 'Logarithmic axis demo'
},
yAxis: {
type: 'logarithmic',
},
series: [{
data: [1, 20, 30, 22, 16, 32, 45, 24, 11, 2],
pointStart: 1,
tooltip: {
pointFormat: '<b>{point.y} km/h</b>'
}
}, {
data: [4500, 3450, 4242, 2348, 5216, 3212, 4564, 3128, 5256, 4512],
pointStart: 1,
tooltip: {
pointFormat: '<b>{point.y} kW/h</b>'
}
}]
});
Live example: https://jsfiddle.net/bfnj4mp8/
API Reference:
https://api.highcharts.com/highcharts/yAxis.type
https://api.highcharts.com/highcharts/series.line.tooltip.pointFormat
I set the max value for yAxis but in some situation, I see a value more than max value that I set for Highchart.
I need in any situation max value will be shown in yAxis.
By default Highcharts computes values for ticks and may round up the maximum extreme so that it has the same value as the last tick.
You can modify ticks in tickPositioner callback to make sure that the max value will always be shown as a tick:
yAxis: {
max: 110,
min: -20,
tickPositioner: function() {
var tickPositions = this.tickPositions,
lastTick = tickPositions[tickPositions.length - 1],
max = this.options.max;
if (lastTick > max) {
tickPositions.pop(); // remove last tick
tickPositions.push(max);
}
}
},
Live demo: http://jsfiddle.net/kkulig/8k4skeh9/
API reference: https://api.highcharts.com/highcharts/xAxis.tickPositioner
With tickInterval (API) it's works
Fiddle
Edit :
For dynamic data you can use SetExtreme method API or update to update the tickInterval API
I want to calculate the min max for the data points, my fiddle:
http://jsfiddle.net/4NxYh/108/
I tried setting the min and max values to "null" as per the docs of highcharts-http://api.highcharts.com/highcharts/yAxis.max, but not sure how this one works exactly..
yAxis: {
min: null,
max: null
}
Ideas/help appreciated!Thanks
I would like to have specific point intervals in high chart.
I have a passrate chart where in the Y axis shows the percentage passrate. But I would like be able to alter the y axis plot points.
Please refer to this fiddle.
http://jsfiddle.net/Mn6sB/2/
Here is a small code piece - how ever the range is not 10 intervals.
yAxis: {
title: {
text: 'PassCount'
},
min: 0,
max:100,
minTickInterval:10
},
minTickInterval: NumberSince 2.3.0
The minimum tick interval allowed in axis values. For example on zooming in on an axis with daily data, this can be used to prevent the axis from showing hours.
If you want the y axis tick interval changes when you zoom in, you need to enable the zooming first.
chart: {
renderTo: 'chartContainer',
type: 'spline',
zoomType: 'y'
}
Or, if you want to fix the tick interval, what you need is not minTickInterval but tickInterval
So your small code piece should be:
yAxis: {
min: 0,
max:100,
tickInterval:10
}