How to get Highcharts XAxis to Display in 2 Minute Intervals

user_7803344 0
Viewed 112

I am somewhat new to Highcharts and I am trying to pull off something that I am sure can be done but I cant figure it out.

I have posted my jsfiddle here: https://jsfiddle.net/dfeagin/1hn6c9ad/7/ Here is what the data looks like in my categories section for that axis:

categories: ['1/20/2020 9:22:02 PM', '1/20/2020 9:22:03 PM', '1/20/2020 9:22:04 PM', '1/20/2020 9:22:08 PM', '1/20/2020 9:22:09 PM', '1/20/2020 9:22:10 PM', '1/20/2020 9:22:12 PM', '1/20/2020 9:22:14 PM', '1/20/2020 9:22:15 PM', '1/20/2020 9:22:16 PM', '1/20/2020 9:22:18 PM', '1/20/2020 9:22:19 PM'.....]

On the XAxis, which represents minutes, there are a total of 46 minutes between the start to end time frame. I want to show two minute increments and just show the minute number vs. a date/time stamp: 0 2 4 6 8 10 ..... 42 44 46

How can I get it to do that? The data will have differing numbers of data points between those two minute increments but I want the 2 min intervals to be consistent.

Another note: I am generating the data that I feed to Highcharts in a .net web application so if it helps the situation I can send in a series of minute numbers vs. time/date stamps. So I could be sending over:

categories: ['0', '0', '0', '1', '1', '2', '2', '2', '2', '2', '2', '2', '3', ... '43', '43', '43', '44', '44', '45', '45', '45', '45', '45', '45', '45', '46', '46']
highcharts javascript
1 Answers

I think you would be better setting the chart up as spline rather than each series, with a datetime x-axis and putting data into the series as an array of date/value x/y pairs.

This way you can have more control over the xAxis ticks in this case setting tick interval to 2 minutes, and is more flexible in general.

Use a custom formatter to manipulate the tick value.

https://jsfiddle.net/gazx45oy/

Chart type:

chart: {
  type: 'spline',

xAxis settings:

xAxis: [{
type: 'datetime',
startOnTick: true,
minPadding: 0,
tickInterval: 120000, 
labels: {
    formatter: function () {
        return (this.value - this.axis.min) / 60000;
    },

Series data:

var vesselSteamTemp = [
[Date.UTC(2020,20,1,9,22,2), 119],
user_58393810
Related