Side by side dual bar chart with Chart.js 2 - javascript

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
}
}]
}
}
});

Related

Chart JS annotation issues

I am trying to load annotation the dynamic chart that I create after receiving data from the database and I have tried all possible options but somehow the chart loads but no the annotations.
chart.js version = v2.9.4
chart-plugin-annotation.min.js version = 0.5.7
Function in JS that runs when data is receiving from db:
function DrawChart(timeLabelList, unitsProducedList, goalList){
if(draw_the_chart != null) draw_the_chart.destroy();
Chart.defaults.global.defaultFontColor = 'white';
var ctx = document.getElementById('draw_the_chart').getContext("2d");
draw_the_chart = new Chart(ctx, {
type: 'line',
//plugins: [ChartAnnotation],
data: {
labels: timeLabelList,
datasets: [
{
label: 'Goal',
yAxisID: 'A',
data: goalList,
//backgroundColor: chartColumnColorBlueSolid,
borderColor: chartColumnColorGreenSolid,
borderWidth: 2,
pointStyle: 'star'
}]
},
options: {
annotation: {
annotations: [
{
id: "a-line-1",
type: "line",
mode: "vertical",
scaleID: "y-axis-0",
value: "1",
borderColor: "red",
borderWidth: 2
}
]
},
legend: {
position: 'bottom',
display: true,
},
elements: {
line: {
tension: 0
}
},
scales: {
xAxes: [{
stacked: true,
type: 'time',
time: {
unit: 'hour'
},
}],
yAxes: [{
stacked: false,
id: 'A',
type: 'linear',
position: 'right',
}]
},
}
});
}
I tried all possible ways to register and also different ways to used the plugin but had no luck plotting it. I even used latest CDN versions but had no luck.
Can anyone help with it.
Thanks!

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>

Same dataset with different yAxes in Chart.js Bar Chart

I have a chart.js bar chart with two datasets called "orange" and "grey". Each has six values: "a", "b", "c", "d" and "f", resulting in the current chart
As you can see it is not easily readable. What I want is to have "b" in a different yAxes than the rest of the datapoints, but as far as I read, having different axes is only possible for datasets ("orange" and "grey" in my case).
CodePen
var ctx = document.getElementById("myChart");
var barChartData = {
datasets: [{
backgroundColor: "#fe8359",
borderColor: "#fe8359",
data: [3000, 3500006, 90000, 12, 80000, 7000],
label: "orange"
},{
backgroundColor: "#e9e9e9",
borderColor: "#e9e9e9",
data: [5000, 2500000, 80000, 5, 90000, 9000],
label: "grey"
}],
labels: ["A","B","C","D","E","F"]
};
var myBarChart = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
maintainAspectRatio: false,
responsive: true,
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
},{
display: true,
id: 'B',
type: 'linear',
position: 'right',
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
}]
}
}
});
How could I configure the chart to properly show this data, or how could I accommodate data to show up properly?

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
}
});

How To Format Scale Numbers in Chart.js v2

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

Categories