We Keep Coding

Bar chart.js legend showing "undefined"

I'm working with chart.js and need to make a legend on horizontalBar, but isn't working because my data have 5 values and on legend label is showing only one and the value is "undefined", this undefined value control all chart colors.
Here is my code:
horizontalMeters = new Chart("chartHorizontalBar", {
type: "bar",
data: {
labels: ["red", "blue", "green"],
datasets: [{
backgroundColor: ["red", "blue", "green"],
data: [123, 321, 213]
}]
},
options: {
indexAxis: 'y',
plugins: {
legend: {
display: true,
position: "right",
}
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"
integrity="sha512-TW5s0IT/IppJtu76UbysrBH9Hy/5X41OTAbQuffZFU6lQ1rdcLHzpU5BzVvr/YFykoiMYZVWlr/PX1mDcfM9Qg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0-rc.1/chartjs-plugin-datalabels.min.js"
integrity="sha512-+UYTD5L/bU1sgAfWA0ELK5RlQ811q8wZIocqI7+K0Lhh8yVdIoAMEs96wJAIbgFvzynPm36ZCXtkydxu1cs27w=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<canvas id="chartHorizontalBar"></canvas>
I'm using chart.js v3.7 and a datalabels plugin v2.0, i don't know if this plugin and version have a conflict, but i make a Doughnot Chart with the same CDN's and that one works
The code:
doughnotQualities = new Chart("chartDoughnutBar", {
type: "doughnut",
data: {
labels: ["red", "blue", "green"],
datasets: [{
backgroundColor: ["red", "blue", "green"],
data: [123, 321, 213]
}]
},
options: {
plugins: {
legend: {
display: true,
position: "right"
},
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"
integrity="sha512-TW5s0IT/IppJtu76UbysrBH9Hy/5X41OTAbQuffZFU6lQ1rdcLHzpU5BzVvr/YFykoiMYZVWlr/PX1mDcfM9Qg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0-rc.1/chartjs-plugin-datalabels.min.js"
integrity="sha512-+UYTD5L/bU1sgAfWA0ELK5RlQ811q8wZIocqI7+K0Lhh8yVdIoAMEs96wJAIbgFvzynPm36ZCXtkydxu1cs27w=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<canvas id="chartDoughnutBar"></canvas>
That's the difference between charts:
Does anyone know how to solve this?

It shows undefined since it takes the label of the dataset, for doughnut and pie charts chart.js overrides the legend generator to use the labels array instead.
You can use multiple datasets with null values and then set the skipNull options to true like so:
Chart.register(ChartDataLabels)
horizontalMeters = new Chart("chartHorizontalBar", {
type: "bar",
data: {
labels: ["red", "blue", "green"],
datasets: [{
backgroundColor: "red",
label: "red",
data: [123, null, null]
}, {
backgroundColor: "blue",
label: "blue",
data: [null, 321, null]
}, {
backgroundColor: "green",
label: "green",
data: [null, null, 213]
}]
},
options: {
indexAxis: 'y',
skipNull: true,
plugins: {
legend: {
display: true,
position: "right",
}
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js" integrity="sha512-TW5s0IT/IppJtu76UbysrBH9Hy/5X41OTAbQuffZFU6lQ1rdcLHzpU5BzVvr/YFykoiMYZVWlr/PX1mDcfM9Qg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0-rc.1/chartjs-plugin-datalabels.min.js" integrity="sha512-+UYTD5L/bU1sgAfWA0ELK5RlQ811q8wZIocqI7+K0Lhh8yVdIoAMEs96wJAIbgFvzynPm36ZCXtkydxu1cs27w==" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<canvas id="chartHorizontalBar"></canvas>
Edit:
To use the datalabels plugin you will need to register it either inline or globally as in my example.

This answer explains how to solve the problem with a vertical bar chart.
The code needs to be slightly adapted to also work for a horizontal bar chart.
Please take a look at the following code and see how it could be done in your case.
new Chart('myChart', {
type: 'bar',
plugins: [{
afterInit: chart => {
let dataset = chart.data.datasets[0];
chart.data.datasets = chart.data.labels.map((l, i) => ({
label: l,
data: [{ x: dataset.data[i], y: i }],
backgroundColor: dataset.backgroundColor[i],
categoryPercentage: 1
}));
chart.data.labels = undefined;
},
beforeLayout: chart => {
chart.options.scales.y1.labels = chart.data.datasets.filter((ds, i) => !chart.getDatasetMeta(i).hidden).map(ds => ds.label);
}
}],
data: {
labels: ['Red', 'Blue', 'Green'],
datasets: [{
data: [123, 321, 213],
backgroundColor: ['red', 'blue', 'green']
}]
},
options: {
indexAxis: 'y',
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right'
},
tooltip: {
callbacks: {
title: () => null
}
}
},
scales: {
y: {
display: false
},
y1: {
offset: true
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<canvas id="myChart"></canvas>

In your dataset object, just add label:''. This will remove the undefined interpulated string.

Chartjs not displaying timed data

I'm new to chartjs, but after googling around, i still cannot figure out, why would I not get data charted out. I'm using "parser" attribute to parse string and providing expected display format with min/max values, but no data is shown
var ctx = document.getElementById("canvas");
var chart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["labelA", "labelB"],
datasets: [{
data: ["10:32", "00:12"],
borderWidth: 1
}]
},
options: {
responsive: 'true',
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
type: 'time',
time: {
parser: 'm:s',
unit: 'minute',
unitStepSize: 1,
min: '00:00',
max: '20:00',
displayFormats: {
'minute': 'mm:ss'
}
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="canvas" height="100"></canvas>

In my opinion your code looks good and should work. Semantically, however, the use of the timeline is not quite correct. Your bars actually represent durations.
Please have a look at your amended code that works now with durations instead of times:
function asSeconds(value) {
const tokens = value.split(':');
return Number(tokens[0]) * 60 + Number(tokens[1]);
}
function format(seconds) {
return moment.utc(seconds * 1000).format("mm:ss");
}
new Chart('canvas', {
type: 'horizontalBar',
data: {
labels: ['labelA', 'labelB'],
datasets: [{
label: 'My Dataset',
data: ['10:32', '00:12'].map(v => asSeconds(v)),
backgroundColor: ['red', 'blue'],
borderWidth: 1
}]
},
options: {
responsive: 'true',
scales: {
xAxes: [{
ticks: {
min: 0,
stepSize: 60,
max: asSeconds('20:00'),
callback: s => format(s)
}
}]
},
tooltips: {
callbacks: {
label: (tooltipItem, data) => format(data.datasets[0].data[tooltipItem.index])
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="80"></canvas>

Disable automatic zoom in on the data

I have a scatter plot with the x axis being the day of the year.
I always want the whole X axis shown, even when I hide dataset A (by clicking on the blue box).
For the Y axis it already works
var ctx = document.getElementById("plot").getContext('2d');
var doyChart = new Chart(ctx, {
type: 'scatter',
data: {
labels: ['2016-01-01', '2016-11-01', '2016-12-01'],
datasets: [{ label: 'A', backgroundColor: 'blue',
data: [{t: '2016-07-08', y: 1},{t: '2016-12-29', y: 1}]
},
{ label: 'B', backgroundColor: 'red',
data: [{t: '2016-11-01', y: 2}]
}
]
},
options: {
scales: {
xAxes: [{ type: 'time',
ticks: { source: 'labels',
/*min: moment("2016-01-01"), max: moment("2016-12-31") */
min: "2016-01-01", max: "2016-12-31"
},
time: {parser: 'YYYY-MM-DD',
displayFormats: {day: 'MMM D' },
stacked: true
}
}],
yAxes: [{ ticks: {
beginAtZero:true,
max: 2,
},
}]
}
}
});
<html>
<body>
<canvas id="plot" ></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
</body>
</html>
My min and max values seem to have no effect at all, I tried as date and as string, to no avail.

How to feed hour and minute data into chartJS

I'm trying to make a line chart using Chart.js. My data is of the form:
var result = [{x:"18:00",y:"230"},{x:"19:00",y:"232"},{x:"20:00",y:"236"},{x:"22:00",y:"228"}];
Where x represents the time with hours and minutes. I fed the data like this
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00","24:00"],
datasets: [{
label: 'Voltage Fluctuation',
data: result,
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
position: 'bottom',
unit: 'minute',
time: {
displayFormats: {
hour: 'HH:mm'
}
}
}],
},
}
});
And I'm getting an empty chart. Where am I going wrong? I feel I'm doing something wrong with my labels since they don't show up on the chart but I don't understand how. Is there any way I can feed datalabels with momentjs?

You cannot just pass the result array to data, as it isn't in correct format. data property expects an array of numbers. So, you need to parse the labels (using moment.js) and data from result array before using them for the chart.
Here is how labels and data should be parsed from the result array and fed to the chart :
var result = [{ x: "18:00", y: "230" }, { x: "19:00", y: "232" }, { x: "20:00", y: "236" }, { x: "22:00", y: "228" }];
// parse labels and data
var labels = result.map(e => moment(e.x, 'HH:mm'));
var data = result.map(e => +e.y);
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Voltage Fluctuation',
data: data,
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'hour',
displayFormats: {
hour: 'HH:mm'
}
}
}]
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Bubble Chart in Chartjs not working

I tried implementing the bubble chart as given on the official site of chartjs
http://www.chartjs.org/docs/latest/charts/line.html
but it only displays the grid without any data points.
It also does not show any errors.
Here's the code
var ctx = document.getElementById("myChart");
var data = [{x:10, y:10, r:10}];
// For a bubble chart
var myBubbleChart = new Chart(ctx,{
type: 'bubble',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
min: -30,
max: 30
}
}],
xAxes: [{
ticks: {
beginAtZero:true,
min: -30,
max: 30
}
}],
}
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chart Js demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
</head>
<body>
<div class="chart-container" style="height:400px; width:400px">
<canvas id="myChart" width="40" height="40"></canvas>
</div>
</body>
</html>
What am i missing ?

You are defining the data property incorrectly. It should be an object (consist of other properties) not an array.
So, you should use ...
...
data: {
datasets: [{
label: 'Dataset 1',
data: data
}]
},
...
instead of ...
...
data: data,
...
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var ctx = document.getElementById("myChart");
var data = [{
x: 10,
y: 10,
r: 10
}];
// For a bubble chart
var myBubbleChart = new Chart(ctx, {
type: 'bubble',
data: {
datasets: [{
label: 'Dataset 1',
data: data
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min: -30,
max: 30
}
}],
xAxes: [{
ticks: {
beginAtZero: true,
min: -30,
max: 30
}
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
<div class="chart-container" style="height:400px; width:400px">
<canvas id="myChart" width="40" height="40"></canvas>
</div>

The data object should be structured differently.
For instance...
data: {
datasets: [{
label: ["Label"],
data: [{x: 3, y:4, r:5}]
}]
},