I have a column highchart where I have two series, out of which the data is something as follows :
series1 : [10000, 20000, 30000, 40000, 50000]
series2 : [500, 600, 800, 1200, 1400]
When i have both the axes, It is required to set a tick interval of 10000. So that the ticks of y-axis goes as per series1. And it looks fine.
Now, I click on the legend, allowing only series2 to be displayed.
So only series2 is in the view, and having tickinterval 10000 is not quite what we need.
I need to dynamically adjust the tick interval, when any one series comes in display, i.e, when the legend is clicked. How do I achieve this?
You can try this scenario out at :
https://stackblitz.com/edit/angular-bar-highcharts-kabali
[Click on Balance (legend). tickInterval: 1000000]
You can use legendItemClick event function callback and set tickInterval property dynamically:
events: {
legendItemClick: function() {
if (this.visible) {
this.yAxis.update({
tickInterval: 100000
});
} else {
this.yAxis.update({
tickInterval: 1000000
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/g1weLpkq/
API Reference:
https://api.highcharts.com/highcharts/series.column.events.legendItemClick
https://api.highcharts.com/class-reference/Highcharts.Axis#update
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/
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
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 am using Highstock charts, and there is a requirement to show line graphs with a fixed x-axis range, irrespective of the data. Setting the xAxis min and max properties accomplishes that for me.
The trouble comes when I try to use the navigator. The API documentation says that the you can include an xAxis object in the navigator options which can contain all of the same properties, but here, setting the min and max properties doesn't seem to do anything: the xAxis on the navigator still begins and ends at the data min and data max. Instead, I'm trying to get it to use the same xAxis settings as the main chart.
I've thought about inserting fake data points into the series at the desired min and max (with a value of null), but was hoping there was a better way to accomplish this.
A simple example can be found here: http://jsfiddle.net/j6GFq/2
$('#container').highcharts('StockChart', {
chart: {},
navigator: {
xAxis: {
min: 0,
max: 100,
ordinal: false
}
},
xAxis: {
ordinal: false,
min: 0,
max: 100
},
rangeSelector: {
enabled: false
},
series: [{
data: [
[10, 20],
[20, 40],
[50, 10]
]
}]
});
I am currently experimenting with the Highcharts charting library, and am totally blown away by its capabilities.
Something I am trying to accomplish is to add a permanent, draggable 'selection' box (or mask) to my chart. This selection box will always be a certain fixed width. For example, say my chart has 30 days worth of data, I would like there to be a draggable box with the width of 1 day. Dragging the box up and down the x-axis (over the actual chart data) will fire off other application events using the selected day as a parameter.
I guess I am looking for something very similar to the navigator in Highstock charts - but again the primary difference is keeping a fixed width selection. Any tips or suggestions would be greatly appreciated.
In Highcharts there is no such built-in feature but in Highstock you can also use only scrollbar, see: http://jsfiddle.net/ea7za/ Now you can use or bottom scrollbar or panning (drag on plotting area).
$.getJSON('url.json', function(data) {
var min = data[0][0], // min
max = data[500][0]; // max - e.g. max = min + 24 * 3600 * 1000; as one day
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
enabled: false
},
navigator: {
enabled: false
},
xAxis: {
min: min,
max: max
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});