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/
Related
I am currently working on a specific type of chart and I am trying to achieve the following behavior for example :
As you can see there's a gap between the series last point and the xAxis max value and the reason for this is i wanna have a fix max value and load the daily values of a specific currency as the day passes by. So for example in the morning this chart would be empty and by 18:30 it would be filled.
In my mock example i have the current chart:
and when I try to set a new xAxis max value ( i also tried softMax) to a future day (using epoch converter for unixtimestamp) i am getting this:
and i set the max by doing :
return {
endOnTick: false,
max:1631962355,
tickLength: 2,
gridLineColor: '#b9b9b9',
gridLineWidth: 0,
tickColor: '#808080',
labels: {
style: {
color: '#b9b9b9',
},
x: 0,
y: 12,
format: '{value:%d.%b}',
},
visible: true,
};
}
UPDATE
After implementing your response I get an even weirder behavior. I get the same initial start I had before (no difference) but now if i click and drag it to the right I go from this :
to this:
and If i click and drag it to the left, into this:
The transformation happens without animation, neither by wathching the drag and move motion happen. It just instantly transforms after i drag my cursor pointer for a while towards the sides i mentioned above
You need to use milliseconds instead of seconds:
xAxis: {
max: 1631962355000,
...
}
Live demo: https://jsfiddle.net/BlackLabel/herncjL5/
API Reference: https://api.highcharts.com/highstock/xAxis.max
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
}
Two Part Q:
Why is high charts not correctly aligning and displaying the following date on the x axis?
How can I align the date on the x axis with the points in each series?
I have tried adjusting to tickinterval to various values but to no avail on either issue.
tickPixelInterval: 200
Fiddle->http://jsfiddle.net/EwpWh/
Use datetime axis instead of linear, see: http://jsfiddle.net/Fusher/EwpWh/5/
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%m/%d', this.value);
}
},
tickPixelInterval: 200
},
However if you want to have ticks exactly in the same place as points are, you need to use one of:
tickPositions: http://api.highcharts.com/highstock#xAxis.tickPositions
tickPositioner: http://api.highcharts.com/highstock#xAxis.tickPositioner
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
}
}]
});
});
I'm displaying a number of series in a highstock chart. I chose highstock because I want to show at least 4 hours of data with the option of scrolling if the user adds data points beyond those 4 hours (but I don't want the rangeSelector or navigator enabled, if that pertains to the problem I'm having).
I thought this would be straightforward, but I'm having problems showing 15-minute intervals on the x-axis. When one data point is dynamically added, the graph correctly shows the 15-minute tick intervals, but when more data points are added, the x-axis starts to scale the times incorrectly. If I then refresh the page and display a graph with multiple data points, I get really weird tickIntervals.
Here are my xAxis options:
xAxis: {
type: 'datetime',
min: 1361815200000,
max: 1361829780000,
tickInterval: 15 * 60 * 1000,
minTickInterval: 15 * 60 * 1000, // 15 minute intervals
gridLineWidth: 2,
labels: {
formatter: function () {
var d = new Date(this.value);
return (d.getMinutes() == 0) ? '<b>' + Highcharts.dateFormat('%H:%M', this.value) + '</b>' : d.getMinutes();
}
}
}
You can see the rest here: http://jsfiddle.net/pxCsX/
What am I missing? I've tinkered with minRange, type and other xAxis and series attributes and scoured the highstock docs, but I keep coming up with bupkis.
Setting ordinal to false solves the problem:
xAxis: {
ordinal: false
}