CODEWITHSUNDEEP
javascriptreactjschartsreact-chartjs
Tivi
Tivi

Reputation: 496

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

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"

Upvotes: 0

Views: 3552

Answers (1)

Berci
Berci

Reputation: 3386

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.

Upvotes: 1

Related Questions