How to show more decimals in a Chart.js chart?

Question

I have this chart, and the real value of the price is like 0.0000571134. The react-chartjs-2 only shows value to 3 decimals but I want the entire value to show or at least 8 decimals. I tried some settings in the datasets like stepSize but none of them worked.

import React from 'react';
import { Line } from 'react-chartjs-2';

import {Col, Row, Typography} from 'antd';

const {Title } = Typography;

const LineChart = ({coinHistory, currentPrice, coinName}) => {

    const coinPrice = [];
    const coinTimestamp = [];

    for (let i = 0; i < coinHistory?.data?.history?.length; i += 1) {
        coinPrice.push(coinHistory?.data?.history[i].price);
        coinTimestamp.push(new Date(coinHistory?.data?.history[i].timestamp).toLocaleDateString());
      }


      const data = {
        labels: coinTimestamp,
        datasets: [
          {
            label: 'Price In USD',
            data: coinPrice,
            fill: false,
            backgroundColor: '#0071bd',
            borderColor: '#0071bd',
          },
        ],
      };
      const options = {
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true,
              },
            },
          ],
        },
      };
    

    return (
        <>
        <Row className="chart-header">
            <Title level={2} className="chart-title">{coinName} Price Chart</Title>
            <Col className="price-container">
                <Title level={5} className="price-change">Change: {coinHistory?.data?.change}%</Title>
                <Title level={5} className="current-price">Current {coinName} Price: $ {currentPrice}</Title>                
            </Col>
        </Row>
        <Line data={data} options={options} />
        </>
    )
}

export default LineChart

coinHistory log:

{"status":"success","data":{"change":147.09,"history":[{"price":"0.0000283221","timestamp":1634756400000},{"price":"0.0000282727","timestamp":1634760000000},

coinPrice log:

"0.0000283221" "0.0000282727" "0.0000282314"

Berci · Answer 1 · 2021-10-27T19:12:13.537

Is working for me without any special treatment:

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line', 
    data: {
        labels: ["Jun 2016", "Jul 2016", "Aug 2016", "Sep 2016", "Oct 2016", "Nov 2016", "Dec 2016", "Jan 2017", "Feb 2017", "Mar 2017", "Apr 2017", "May 2017"],
    datasets: [{
            label: 'Price In USD',
            fill: false,
            backgroundColor: '#0071bd',
            borderColor: '#0071bd',
            data: [26.4231435453, 39.8231435453, 66.8231435453, 66.4231435453, 40.6231435453, 55.2231435453, 77.4231435453, 69.8231435453, 57.8231435453, 76, 110.8, 142.6],
        }]
    }
});

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Charts.js</title>
</head>
<body>
    <div class="chart">
        <canvas id="myChart" width="400" height="200"></canvas>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
</body>
</html>

Make sure your yValue is of type decimal and you are not using round.

EDIT 2:

This is literally your code forked (just input is copied from your code). It just seem like LineChart component is not the problem. You should try to see if there is any config done anywhere in your app (for "react-chartjs-2").

Or try to reproduce your problem somehow.

Thanks! I added my entire code snippet because it doesn't work for me. yValue is generated by react-chartjs from the datasets as I knew. — Tivi, Oct 27 '21 at 18:10
I also added a react example which works. And it has basically your options. Could you try to log JSON.stringify(coinPrice) and maybe JSON.stringify(coinHistory) as well? — Berci, Oct 27 '21 at 18:35
I edited the sandbox again. But I don't see any way to help you without a reproduction because as mentioned: it seems like your problem is not laying inside `LineChart` component — Berci, Oct 27 '21 at 19:13

How to show more decimals in a Chart.js chart?

1 Answers1