CODEWITHSUNDEEP
javascripthighchartslogarithm
Cumulo Nimbus
Cumulo Nimbus

Reputation: 9695

Highcharts: Logarithmic y-axis with seconds, minutes, hours and days

I would like to display data for time values on the y-axis of a Highchart's graph. These time values can vary from 10 seconds up to 10 days

Currently I can set the y-axis type like so:

yAxis: {
  type: 'logarithmic'
}

And get something that looks like this:

y-axis scale with just minutes

What is the best way to use a logarithmic time scale, but instead of showing only minutes, show seconds, minutes, hours and days?

Something like: 10 seconds, 30 seconds, 1 minutes, 2 minutes, 5 minutes, 10 minutes, 30 minutes, 1 hour, 2 hours, 4 hours, 8 hours, 1 day, 2 days, 5 days, 10 days. I understand this isn't exactly a logarithmic progression, but you catch my drift hopefully.

Upvotes: 1

Views: 1024

Answers (2)

Cumulo Nimbus
Cumulo Nimbus

Reputation: 9695

Moment.js to the rescue:

yAxis: {
  type: 'logarithmic',
  labels: {
    formatter: function () {
      return moment.duration(this.value, 'minutes').humanize()
    }
  }
}

Upvotes: 0

Kamil Kulig
Kamil Kulig

Reputation: 5826

Please refer to my first post in this topic (official Highcharts forum): https://forum.highcharts.com/highstock-usage/chart-customisation-t39677/?hilit=logarithmic#p137385

I explain there how to approach connecting logarithmic axis and datetime input.

I simplified the original demo and adjusted it to your needs: http://jsfiddle.net/kkulig/5Ldowjbr/

In this case the x axis is logarithmic (not y):

  yAxis: [{
    type: 'logarithmic',
    showFirstLabel: false,
    labels: {
      formatter: function() {
        return Highcharts.dateFormat("%Hh %Mm %Ss", this.value + baseline - timeOffset);
      }
    }
  }],

I also changed displayed format of the date to %Hh %Mm %Ss and renamed point's timestamp poperties to miliseconds.

Upvotes: 1

Related Questions