๐:0
When adding option configurations, you need to make sure you nest the settings in the right sections. You can format the scale numbers by adding a callback
function to the yAxes
ticks configuration section:
options = {
scales: {
yAxes: [{
ticks: {
callback: function(value) {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
}
}]
}
};
JSFiddle Demo: https://jsfiddle.net/2n7xc7j7/1/
๐:0
In V3 the locale
property has been added. This makes it so all the numbers on the scales an tooltips get formatted correctly automatically in the numberformat of that country code:
// Element
const ctx = document.getElementById("myChart")
// Data
const data = {
labels: ['First', 'Second', 'Third', 'Fourth'],
datasets: [{
label: 'Sample',
data: [2982, 1039, 3200, 2300],
backgroundColor: "rgba(90, 150, 220, 0.85)",
borderColor: "rgba(70, 120, 180, 1)",
borderWidth: 2
}],
}
// Options
const options = {
locale: 'en-US'
};
const chart_trans_hari = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
๐:-1
I did this:
http://profwtelles.ddns.net/grafico2.html
var canvas = document.getElementById('chart');
new Chart(canvas, {
type: 'line',
data: {
labels: ['1', '2', '3', '4', '5'],
datasets: [{
label: 'A',
yAxisID: 'A',
data: [100, 96, 84, 76, 69]
}, {
label: 'B',
yAxisID: 'B',
data: [1, 1, 1, 1, 0]
}]
},
options: {
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
}, {
id: 'B',
type: 'linear',
position: 'right',
ticks: {
max: 1,
min: 0
}
}]
}
}
});
I hope to help you.
Best Regards