Highcharts Y axis time in milliseconds

Question

I am trying to create a Highcharts chart where the yAxis data is time in milliseconds. I would like the yAxis label to show the time, i.e. seconds, minutes, etc. as appropriate. I tried setting yAxis.type = 'datatime' but that is converting to actual dates. Without it, using the example below, my yAxis is going from 0 to 100 M for obvious reasons.

[[1522187288000, 79692000], [1523314079000, 60000]]

This is my config where plot is the data above:

{
  chart: {
    type: 'line'
  },
  credits: {
    enabled: false
  },
  title: {
    text: null
  },
  yAxis: {
    title: {
      text: null
    }
  },
  xAxis: {
    type: 'datetime'
  },
  legend: {
    enabled: false
  },
  series: [{
    'data': plot
  }],
  plotOptions: {
    series: {
      animation: {
        duration: 0
      }
    }
  },
}

Edit: I also need my point labels to match the yAxis.

You can use custom formatter for Y-axis as in this question: [Making y axis of highcharts in time format hh:mm](https://stackoverflow.com/questions/19836382/making-y-axis-of-highcharts-in-time-format-hhmm) — gabonator, Apr 20 '18 at 23:25
That sort of works but it needs to be dynamic in that the y values may be seconds or they may be months. A scale from 0:0 to 9722.13 when the times are a year apart is not very meaningful. 0 months, 3 months, 6 months, 9 months, 12 months would be awesome. The scale is not fixed however. — Gremash, Apr 20 '18 at 23:45
-1, for me the question is not clear enough, w/o minimal, complete and verifiable example, also it shows unwillingness in reading the tech docs for HC — Vitaliy Terziev, Apr 21 '18 at 07:55
You do realize I spent 10 hours working on three charts. What is unclear about my question? What data am I missing to make it clear? I showed my data and my config. Is it because I didn't show my react component which is one line of code that takes in my config. Would you like me to post my 22k line of Javascript in my application? And yes, I spent a lot of time reading through the API. Where do you think the json above came from? — Gremash, Apr 22 '18 at 06:40

score 2 · Answer 1 · answered Apr 21 '18 at 07:37

By combining answers from those questions: custom Y axis formatter converting time interval into human readable form we get:

function millisecondsToStr (milliseconds) {
    // TIP: to find current time in milliseconds, use:
    // var  current_time_milliseconds = new Date().getTime();

    function numberEnding (number) {
        return (number > 1) ? 's' : '';
    }

    var temp = Math.floor(milliseconds / 1000);
    var years = Math.floor(temp / 31536000);
    if (years) {
        return years + ' year' + numberEnding(years);
    }
    //TODO: Months! Maybe weeks? 
    var days = Math.floor((temp %= 31536000) / 86400);
    if (days) {
        return days + ' day' + numberEnding(days);
    }
    var hours = Math.floor((temp %= 86400) / 3600);
    if (hours) {
        return hours + ' hour' + numberEnding(hours);
    }
    var minutes = Math.floor((temp %= 3600) / 60);
    if (minutes) {
        return minutes + ' minute' + numberEnding(minutes);
    }
    var seconds = temp % 60;
    if (seconds) {
        return seconds + ' second' + numberEnding(seconds);
    }
    return 'less than a second'; //'just now' //or other string you like;
}

...

yAxis: {
            title: {
                text: 'Time interval'
            },
            labels: {
                formatter: function () {
                    return millisecondsToStr(this.value);
                }
            }
        }

Highcharts Y axis time in milliseconds

1 Answers1