How To Format Scale Numbers in Chart.js v2 - javascript

First of all, I apologize if my question is a slightly the same as others question. I searched for a solution and found 3 similar questions, yet none of them worked in my case, because the examples I found use Chart.js v1.
I saw a sample using a function placed in scaleLabel to format the numbers just like this:
var options = {
animation: false,
scaleLabel: function(label){
return '$' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
};
The above code, however, doesn't work anymore in the new Chart.js v2.
How can I format the scale numbers in Chart.js v2?
Here is my code: https://jsfiddle.net/2n7xc7j7/

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/

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>

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

Related

Chart.js data set static numbers

how to make the Y-axis have static values, even if the graph is not drawn. I need to always have 4 values ​​0, 5, 10, 15, even if there is no graph. This is an updatable chart.
This is my chart
I need like this
This ca be achieved by defining the y-axis as follows:
y: {
suggestedMin: 0,
suggestedMax: 15,
ticks: {
stepSize: 5
}
}
Please take a look at below runnable code and see how it works.
new Chart('myChart', {
type: 'bar',
data: {
labels: ['A', 'B', 'C'],
datasets: [{
label: 'My Dataset',
data: [,,]
}]
},
options: {
scales: {
y: {
suggestedMin: 0,
suggestedMax: 15,
ticks: {
stepSize: 5
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.js"></script>
<canvas id="myChart" height="90"></canvas>

Charts.js how to have 2 different size y-axis

So I have 2 datasets, and I would like to have one y-axis to be bigger and one smaller if you know what I mean.
The Return Procent datas are somewhere between 20-100, but price can be small like 0.06 or something. And it makes the chart useless. How can I make two different size y-axis?
var ctx = document.getElementById('skinsChart').getContext('2d');
var skinsChart = new Chart(ctx, {
type: 'line',
data: {
labels: [ < ? php echo $date; ? > ],
datasets: [{
label: 'Return Procent',
data: ["65.7", "63.7", "69.7", "62.7"],
borderColor: 'rgb(0,0,0)',
borderWidth: 1,
backgroundColor: 'rgba(0,0,0,0.2)'
}, {
label: 'Price',
data: ["0.07", "0.08", "0.06", "0.07"],
borderColor: 'rgb(255,0,0)',
borderWidth: 1,
backgroundColor: 'rgba(0,0,0,0.2)'
}]
},
options: {
scales: {
yAxes: [{
beginAtZero: false
}]
},
elements: {
point: {
radius: 0
}
}
}
});
You need to define multiple y-axes as explained in chapter Create Multiple Axis from the Chart.js documentation.
Please take a look at your amended code and see how it works.
var ctx = document.getElementById('skinsChart').getContext('2d');
var skinsChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
label: 'Return Procent',
data: ["65.7", "63.7", "69.7", "62.7"],
borderColor: 'rgb(0,0,0)',
borderWidth: 1,
backgroundColor: 'rgba(0,0,0,0.2)',
yAxisID: 'yLeft'
}, {
label: 'Price',
data: ["0.07", "0.08", "0.06", "0.07"],
borderColor: 'rgb(255,0,0)',
borderWidth: 1,
backgroundColor: 'rgba(0,0,0,0.2)',
yAxisID: 'yRight'
}]
},
options: {
scales: {
yAxes: [{
id: 'yLeft',
},
{
id: 'yRight',
position: 'right',
}]
},
elements: {
point: {
radius: 0
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="skinsChart" height="100"></canvas>

Side by side dual bar chart with Chart.js 2

Is it possible to do this with Chart.js (v2)? I know how to do multiple axes charts, but all of the examples I've seen so far are limited to overlapped (eg:line+bar) or stacked bar charts that are on the same plane.
This is a close example of what I want but not quite right
var canvas = document.getElementById('chart');
new Chart(canvas, {
type: 'bar',
data: {
labels: ['Target', 'Actual'],
datasets: [{
label: 'A',
yAxisID: 'A',
data: [1400,0]
}, {
label: 'B',
yAxisID: 'B',
data: [0,0.83]
}]
},
options: {
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
}, {
id: 'B',
type: 'linear',
position: 'right',
ticks: {
max: 1,
min: 0
}
}]
}
}
});

chartjs - multi axis line chart - cannot read property 'min' of undefined

When running the below code without the scales and yAxisID values, it renders a 2 line chart with both lines on the same axis.
UPDATE: When only removing the yAxisID values from the code it runs as before without errors - although still with only a single y axis.
When adding these elements in order to get a split axis, it returns the js error cannot read property 'min' of undefined and the canvas is blank.
Not sure if his should make a difference, but data is a json object returned through an ajax request by way of a vue.js method.
Here is an example of how the data.sales variable looks in the browser console:
sales: (187) [0, 0, 43.2874, 10.276, ..., 23.834]
var ctx = document.getElementById("chart_canvas").getContext('2d')
var basic_line = new Chart(ctx, {
type: 'line',
data: {
labels: data.labels,
datasets: [{
label: 'Price',
yAxisID: 'B',
fill: false,
borderColor: ["#668cff"],
data: data.price
}, {
label: 'Sales',
yAxisID: 'A',
fill: false,
borderColor: ["grey"],
data: data.sales
}],
options: {
scales: {
yAxes: [{
id: 'A',
position: 'left',
type: 'linear'
}, {
id: 'B',
position: 'right',
type: 'linear'
}]
},
responsive: true,
maintainAspectRatio: false
}
}
})
The issue is merely occurring due to the fact that, you have placed the options object/property, inside the data property, while it should be outside.
Here is the revised version of your code :
var ctx = document.getElementById("chart_canvas").getContext('2d')
var basic_line = new Chart(ctx, {
type: 'line',
data: {
labels: data.labels,
datasets: [{
label: 'Price',
yAxisID: 'B',
fill: false,
borderColor: ["#668cff"],
data: data.price
}, {
label: 'Sales',
yAxisID: 'A',
fill: false,
borderColor: ["grey"],
data: data.sales
}]
},
options: {
scales: {
yAxes: [{
id: 'A',
position: 'left',
type: 'linear'
}, {
id: 'B',
position: 'right',
type: 'linear'
}]
},
responsive: true,
maintainAspectRatio: false
}
});

Custom alphanumerical values in chart.js?

I am trying to make a simple horizontal bar chart with Chart.js with some languages ('Spanish', 'English', ...) in the y-axis and its CEFR Level (from A1 to C2) in the x-axis instead of some numerical level (1-10 for example).
Is there a way to have a bar chart without pure numerical values in the x-axis?
That is what I'm getting right now with this code:
var spokenLangChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['Spanish', 'English', 'German'],
datasets: [{
label: 'CEF Level',
labels: ['A1', 'A2', 'B1', 'B2', 'C1', 'C2'],
data: ['C2', 'C1', 'B1'],
backgroundColor: "rgba(255,153,0,0.4)"
}]
},
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
Currently, ChartJS does not support directly two axis without numerical values. But you can accomplish this with callbacks as you can see on my example:
var ctx = document.getElementById('chart');
var xLabels = ["A","B","C","D","E","F","G","H","I","J","K"]; //Put here your x labels
var spokenLangChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['Spanish', 'English', 'German'], //Put here your x labels
datasets: [{
label: 'CEF Level',
labels: ['A1', 'A2', 'B1', 'B2', 'C1', 'C2'],
data: ['C2', 'C1', 'B1'],
backgroundColor: "rgba(255,153,0,0.4)"
}]
},
options: {
scales: {
xAxes: [{
ticks: {
//Returns the x labels
callback: function(value, index, values) {
return xLabels[index];
}
},
}]
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" width="200" height="100"></canvas>
Or look at JSFiddle.
I hope it helps you.
So thanks to Julian Schmuckli I was able to fix this. Since it wasn't entirely solved I'm going to post my own answer so I can share the result.
var ctx = document.getElementById('spokenLangChart').getContext('2d');
var xLabels = ['A1', 'A2', 'B1', 'B2', 'C1', 'C2'];
var spokenLangChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['Spanish', 'English', 'German'], //Put here your x labels
datasets: [{
label: 'CEF Level',
data: [5, 4, 3],
backgroundColor: "rgba(255,153,0,0.4)"
}]
},
options: {
legend: {
position: 'bottom'
},
title: {
display: true,
text: 'Spoken Languages'
},
scales: {
xAxes: [{
ticks: {
beginAtZero: true,
//Returns the x labels
callback: function (value, index, values) {
return xLabels[index];
}
}
}]
}
}
});
It's very important that you put beginAtZero: true, otherwise it will put your lowest value as zero and as I hadn't numerical values it was a bit difficult to spot the error.
Here's the final result:

Categories