CODEWITHSUNDEEP
javascriptchartschart.js
Rojj
Rojj

Reputation: 1210

ChartJS 3.0 - Number format

How do I format numbers in ChartJS for axis and tooltips? I looked everywhere, but I could not find any example.

Looking at the code on Github it seems possible, but can't understand how to do it.

I have a logarithmic scale from 1e-5. I have tried:

scales: {
  x: {
    ticks: {
      beginAtZero: true,
      display: true,
      autoSkip: true,
      maxTicksLimit: 11,
      maxRotation: 0
    }
  },
  Residuals: {
    type: 'logarithmic',
    title: {
      display: true,
      text: 'Residuals'
    },
    position: 'left',
    ticks: {
      beginAtZero: false,
      display: true,
      format: "scientific"
    },
    max: 1.0,
    min: convergence / 10.0
  }
}

but unfortunately it does not work.

EDIT

Just to add to the answer. For tooltips you can use a similar approach

plugins: {
  tooltip: {
    callbacks: {
      label: function(context) {
        var label = context.dataset.label
        label += ": "
        label += Number.parseFloat(context.parsed.y).toExponential(2); // limit to 2 decimal numbers 
        return label
      }
    }
  }
}

Upvotes: 1

Views: 677

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31341

The ticks have a callback section which receives 3 arguments, the current value, the index of the tick and all the ticks.

Here you can transform the value to scientific notation yourself like so

scales:{
  y: {
    ticks: {
      callback: function (val, index, ticks) {
         return Number.parseFloat(val).toExponential(2); // limit to 2 decimal numbers
       }
    }
  }
}

Upvotes: 1

Related Questions