Develop Reference

Why the labels under chart are not corresponding with labels in legend in Chart.js for bar chart?

I would like to make a chart with labels on xAxes and the same labels in the legend. I was trying different solutions, but the best I got is the snippet below. I don't understand, why all bars are connected with my first label. Could you please help me to fix it?
I found a solution with would be almost perfect here, but unfortunately, it doesn't work as expected: after clicking on the label in legend all charts are hiding, not only one corresponding to the label I clicked.
var canvas2 = document.getElementById("wykres_kategorie");
var ctxD2 = canvas2.getContext('2d');
var myLineChart = new Chart(ctxD2, {
type: 'bar',
data: {
labels: [
'a','b','c'
],
datasets: [
{
label: 'a',
data: [ 60 ],
backgroundColor: [ 'red' ],
},
{
label: 'b',
data: [ 80 ],
backgroundColor: [ 'blue' ],
},
{
label: 'c',
data: [ 50 ],
backgroundColor: [ 'yellow' ],
},
]
},
options: {
legend: {
position: 'bottom'
},
responsive: true,
scales: { xAxes: [{
ticks: {
autoSkip: false
} }],
yAxes:[{ ticks: {beginAtZero: true}}]}
}
});
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.20.0/js/mdb.min.js"></script>
<canvas class='col-12 mx-auto' id="wykres_kategorie"></canvas>

The data.labels defines the ticks for a category axis. Following your configuration, the chart is expecting to have 3 data items for dataset, (first at tick 'a', second at tick 'b', third at tick 'c').
Instead, the dataset.label are used in the legend.
In your config, all datasets have got only 1 value and all values are related to the first data.labels, 'a'.

How can I create a dynamically assigned variable for a chart with chart.js?

I am trying to create a series of line chart dynamically and then update them once the data has been updated for a particular user in real-time.
I am running into difficulty because I can only get the most recent one to render.
I think this is because when the following code runs it overwrites the ctx variable and I lose the earlier charts.
I tried the following technique with dynamic variables so no two ctx variables would be the same, but it doesn't work.
Thanks in advance for your help.
window['ctx_'+userid] = document.getElementById("forceCurveGraph_"+userid).getContext("2d");
window['myLineChart'+userid] = new Chart(window['ctx_'+userid], {
type: 'line', data: {
datasets: [{
label: "Force Curve",
data: forcecurvedata, backgroundColor: ['rgba(57,118,251, 0.8)']
}],
labels: labels
}, options: {
backgroundColor: ['rgba(40, 84, 141, 0.3)'],
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
max: graphMax
}
}],
xAxes: [{
ticks: {
display: false
}
}]
}
}
})

Chart JS Displays Only Bigger Dataset But Has Both Datasets?

fairly new to JS and I have a strange issue with chart JS bar chart.
<script>
$(document).ready(function() {
var bar = document.getElementById("chart-bar-11").getContext('2d');
var data1 = {
labels: ["Yesterday"],
datasets: [{
label: "Win",
data: [{{ gam }}],
borderColor: '#4099ff',
backgroundColor: '#4099ff',
hoverborderColor:'#4099ff',
hoverBackgroundColor: '#4099ff',
}, {
label: "Lose",
data: [{{ results }}],
borderColor: '#0e9e4a',
backgroundColor: '#0e9e4a',
hoverborderColor:'#0e9e4a',
hoverBackgroundColor: '#0e9e4a',
}]
};
var myBarChart = new Chart(bar, {
type: 'bar',
data: data1,
options: {
barValueSpacing: 20
}
});
});
</script>
I have a simplke bar chart, but here is a screen shot of current behavior, super confused how this chart shows it has both datasets but will only display the larger dataset?

Ended up finding the options needed in another Chart JS post, this is what I was missing.
var myBarChart = new Chart(bar, {
type: 'bar',
data: data1,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
It appears he "beginAtZero" is what was missing. This now works as expected.

Styling problems with Chart.Js

How can I add these styles to my graph? I'm having trouble finding it in the documentation for it, and the other forums aren't very helpful. I am using Flask for the backend, so that's why the data values look like that.
Labels on top of bars
Change font size on both axis
Set y scale as a fixed value (0,8)
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var options = {
scales: {
yAxes: [{
ticks: {
fontSize: 40
}
}]
}
}
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Lithium Battery', 'Other Mfg', 'Delivery', 'Tailpipe', 'Fuel Cycle', 'Disposal', 'Total'],
datasets: [{
label: 'ICEV CAR (MTCO2e/Year)',
labels: [
"{{data['battery_icev_car']}}",
"{{data['other_mfg_icev_car']}}",
"{{data['delivery_icev_car']}}",
"{{data['tailpipe_icev_car']}}",
"{{data['fuel_cycle_icev_car']}}",
"{{data['disposal_icev_car']}}",
"{{data['total_icev_car']}}"
],
data: [ /* errors are normal, fixes when server ru
[0, {{data['y1_icev']}}],
[{{data['y1_icev']}}, {{data['y2_icev']}}],
[{{data['y2_icev']}}, {{data['y3_icev']}}],
[{{data['y3_icev']}}, {{data['y4_icev']}}],
[{{data['y4_icev']}}, {{data['y5_icev']}}],
[{{data['y5_icev']}}, {{data['y6_icev']}}],
[0, {{data['y6_icev']}}]
],
backgroundColor: [
'rgba(0,0,0,0.9)'
],
borderColor: [
'rgba(0,0,0,1)'
],
borderWidth: 1,
borderSkipped: false
}]
},
options: {
responsive: true,
plugins: {
legend: {
labels: {
// This doesn't work on axis
font: {
size: 20
}
}
}
},
y: {
beginAtZero: true
}
}
});
</script> </script>

Since your config is not working I assume you are using V3, in which case the solution is as followed:
For point one you need to use an external plugin, you can write your own or use the datalabels plugin
For your second problem you need to style it as a font object as told in the documentation like so:
options: {
scales: {
y:{
ticks:{
font:{
size: 50
}
}
}
}
}
For your last part you can set the stepSize to 0.8

Dynamic stacked column in CanvasJS

How can I create a stacked column chart with dynamic data?
For example, I have an external JSON object like:
[
{
id : ‘ID123’,
occurrences: [5,6,8],
description: ["Hours spent working", "Hours spent skiing", "Hours spent studying"]
},
{
id : ‘ID456’,
occurrences: [7,2,12],
description: ["Hours spent working", "Hours spent skiing", "Hours spent studying"]
}
]
How do I make it so there would be two stacked columns using the id as the label and the array of occurrences is used to build the stacked column on top of each label?
Edit:
Added representation of how graph should look

I would suggest using chart.js for this as it will be much easier than building it out yourself. Here is a example using the data you provided.
var barChartData = {
labels: ['ID123', 'ID456'],
datasets: [{
label: 'Hours spent working',
backgroundColor: '#FF0000',
data: [
5,
7
]
}, {
label: 'Hours spent skiing',
backgroundColor: '#00FF00',
data: [
6,
2
]
}, {
label: 'Hours spent studying',
backgroundColor: '#0000FF',
data: [
8,
12,
]
}]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>