Tengo este gráfico y el valor real del precio es como 0.0000571134 . El react-chartjs-2 solo muestra el valor hasta 3 decimales, pero quiero que se muestre el valor completo o al menos 8 decimales. Probé algunas configuraciones en los conjuntos de datos como stepSize pero ninguna funcionó.
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 LineChartregistro de coinHistory:
{"estado":"éxito","datos":{"cambio":147.09,"historial":[{"precio":"0.0000283221","marca de tiempo":1634756400000},{"precio":"0.0000282727", "marca de tiempo": 1634760000000},
registro de precio de moneda:
"0.0000283221" "0.0000282727" "0.0000282314"
Me está funcionando sin ningún tratamiento especial:
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> Asegúrese de que su yValue sea de tipo decimal y que no esté usando round .
EDITAR 2:
Este es literalmente su código bifurcado (solo la entrada se copia de su código). Parece que el componente LineChart no es el problema. Debe intentar ver si hay alguna configuración realizada en cualquier lugar de su aplicación (para "react-chartjs-2" ).
O intente reproducir su problema de alguna manera.