How to disable converting decimal number to exponential?

Question

window.chartColors = {
  red: '#ffb5c5',
  orange: '#FFA500',
  yellow: '#F0E68C',
  green: '#aee0e0',
  blue: '#87CEFA',
  purple: '#EE82EE',
  grey: '#C0C0C0'
};
$(document).ready(function() {
  var data = [{
    "tc": "1.25173997",
    "trf": "0.00000024",
    "nc": "1.00139199",
    "formatted_date": "temmp1",
    "from_date": "2019-02-01 00:00:00",
    "to_date": "2019-02-08 23:59:59"
  }, ];
  var formatted_date = [];

  var tcs = [];
  var trps = [];
  var ncs = [];
  // var data = $.parseJSON(data);
  $.each(data, function(index, item) {
    formatted_date.push(item.formatted_date);
    tcs.push(item.tc);
    trps.push(item.trf);
    ncs.push(item.nc);
  });

  refData = [{
      label: 'C',
      backgroundColor: window.chartColors.blue,
      borderColor: window.chartColors.blue,
      data: tcs,
      fill: false,
      /* cubicInterpolationMode: 'monotone' */

    },
    {
      label: 'R P',
      backgroundColor: window.chartColors.red,
      borderColor: window.chartColors.red,
      data: trps,
      fill: false
    },
    {
      label: 'N C',
      backgroundColor: window.chartColors.green,
      borderColor: window.chartColors.green,

      data: ncs,
      fill: false
    },
  ];


  var chartdata = {
    labels: formatted_date,
    datasets: refData
  };
  //console.log(chartdata);
  var graphTarget = $("#myChart");
  var Graph = new Chart(graphTarget, {
    type: 'line',
    data: chartdata,
    options: {
      responsive: true,
      title: {
        display: true,
        text: 'R P'
      },
      scales: {
        xAxes: [{
          // stacked: true,
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Duration'
          }
        }],
        yAxes: [{
          // stacked: true,
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Amt'
          },
          ticks: {
            min: 0, // it is for ignoring negative step.
          }
        }]
      },

    },
  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

<div style="width:75%;">
  <canvas id="myChart"></canvas>
</div>

As you can see for R P 0.00000024 is getting converted into 2.4e-7. But I want it show as is i.e. 0.00000024.
For other decimals numbers, it's perfectly fine, but for the above-mentioned decimal, it's converting into exponential. Is there any option to set? Is this possible?

have you tried adding scale:'linear' to the axis where you don't want the exponents? see here: https://www.chartjs.org/docs/latest/axes/cartesian/linear.html — John, Mar 27 '19 at 13:57
I think you are telling me about axis values, but **NO**. It's data which to be mapped. — Rahul, Mar 27 '19 at 14:03

score 2 · Accepted Answer · answered Mar 27 '19 at 13:52

With the help of this solution, I patched my problem. If anyone got better solution let me know.

Number.prototype.noExponents = function() {
  var data = String(this).split(/[eE]/);
  if (data.length == 1) return data[0];

  var z = '',
    sign = this < 0 ? '-' : '',
    str = data[0].replace('.', ''),
    mag = Number(data[1]) + 1;

  if (mag < 0) {
    z = sign + '0.';
    while (mag++) z += '0';
    return z + str.replace(/^\-/, '');
  }
  mag -= str.length;
  while (mag--) z += '0';
  return str + z;
}


window.chartColors = {
  red: '#ffb5c5',
  orange: '#FFA500',
  yellow: '#F0E68C',
  green: '#aee0e0',
  blue: '#87CEFA',
  purple: '#EE82EE',
  grey: '#C0C0C0'
};
$(document).ready(function() {
  var data = [{
    "tc": "1.25173997",
    "trf": "0.00000024",
    "nc": "1.00139199",
    "formatted_date": "temmp1",
    "from_date": "2019-02-01 00:00:00",
    "to_date": "2019-02-08 23:59:59"
  }, ];
  var formatted_date = [];

  var tcs = [];
  var trps = [];
  var ncs = [];
  // var data = $.parseJSON(data);
  $.each(data, function(index, item) {
    formatted_date.push(item.formatted_date);
    tcs.push(item.tc);
    trps.push(item.trf);
    ncs.push(item.nc);
  });

  refData = [{
      label: 'C',
      backgroundColor: window.chartColors.blue,
      borderColor: window.chartColors.blue,
      data: tcs,
      fill: false,
      /* cubicInterpolationMode: 'monotone' */

    },
    {
      label: 'R P',
      backgroundColor: window.chartColors.red,
      borderColor: window.chartColors.red,
      data: trps,
      fill: false
    },
    {
      label: 'N C',
      backgroundColor: window.chartColors.green,
      borderColor: window.chartColors.green,

      data: ncs,
      fill: false
    },
  ];


  var chartdata = {
    labels: formatted_date,
    datasets: refData
  };
  //console.log(chartdata);
  var graphTarget = $("#myChart");
  var Graph = new Chart(graphTarget, {
    type: 'line',
    data: chartdata,
    options: {
      responsive: true,
      title: {
        display: true,
        text: 'R P'
      },
      scales: {
        xAxes: [{
          // stacked: true,
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Duration'
          }
        }],
        yAxes: [{
          // stacked: true,
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Amt'
          },
          ticks: {
            min: 0, // it is for ignoring negative step.

          }
        }]
      },
      tooltips: {
        callbacks: {
          label: function(tooltipItem, data) {
            var label = data.datasets[tooltipItem.datasetIndex].label || '';

            if (label) {
              label += ': ';
            }

            label += tooltipItem.yLabel.noExponents();
            return label;
          }
        }
      }
    },
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

<div style="width:75%;">
  <canvas id="myChart"></canvas>
</div>

How to disable converting decimal number to exponential?

1 Answers1