CODEWITHSUNDEEP
highcharts
coding-jewelry
coding-jewelry

Reputation: 11

How to display raw decimal numbers on tooltips in Highcharts.js

In my website, Highcharts.js is used for charting section. What I want to do is to change the way of displaying decimal numbers on tooltips in the chart. Currently decimal numbers leading several zeros, are displayed like: e.g. 1e-8 (meaning 0.000000001)

I want to display such these decimal numbers as it is, so it should be displayed like 0.00000001.

Please let me know if you are familiar with it.

Thank you.

Upvotes: 0

Views: 383

Answers (1)

raf18seb
raf18seb

Reputation: 2146

This is not actually a Highcharts issue - it is normal JavaScript behavior. JavaScript writes extra large or extra small numbers with scientific (exponent) notation.

In Highcharts, we can walk around this using formatter function to change the look of our yAxis labels and tooltip:

yAxis: {
    labels: {
      formatter: function() {
        return this.value.toFixed(8)
      }
    }
  },

  tooltip: {
    formatter: function() {
      return this.y.toFixed(8)
    }
  },

jsFiddle: https://jsfiddle.net/BlackLabel/ymra564g/

Upvotes: 2

Related Questions