The number precision of my data is about 0.000001,
let's take some demo value between 0.01 and 0.02,
such as
[0.010001
,0.011111
,0.012222
,0.013333
,0.014444
,0.015555
,0.016666
,0.017777
,0.018888
,0.019999
];
when I plot with these datasets, and then hover to any points, all of them tooltips with precision of only 0.001, looks like all value has run with (original-data).toFixed(3),
but I want to show the real original value, or more precision like 0.000001
Is there any way to set float precision in chartjs?
You can adjust the label callback so you can return the raw value instead of the parsed value of chart.js like so:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [0.010005, 0.011111, 0.012222, 0.013333, 0.014444, 0.015555, 0.016666, 0.017777, 0.019888, 0.019999],
borderColor: 'pink'
}]
},
options: {
plugins: {
tooltip: {
callbacks: {
label: (ctx) => (`${ctx.dataset.label}: ${ctx.raw}`)
}
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>