Develop Reference

Chart.js: Label each dataset

I've been trying to make chart.js have a label for each dataset but the first label is located underneath both datasets and the second on an empty area of the chart.
var powerChart = new Chart(powerCanvas, {
type: "bar",
data: {
labels: ["Volts", "Amperes"],
datasets: [
{
label: "Volts", // This bar should have this label underneath itself
data: [24.78], // Initial value, will be overwritten
},
{
label: "Amperes", // This bar should have this label underneath itself
data: [14.51],
},
],
},
options: {},
});
See https://jsfiddle.net/w20c3tru/2/ for what I have tried and a working example.
Note: I tried to follow
Chart.js Line-Chart with different Labels for each Dataset
but could not see any difference.

Note the comments below:
var powerChart = new Chart(powerCanvas,
{
type: 'bar',
data:
{
labels: ['Volts', 'Amperes'],
datasets:
[
{
label: 'Value', // This is actually the label that shows up when you hover over a bar
data: [24.78, 14.51] // NOTE: Number of labels defined above should equal number of values here
},
]
},
options:
{
}
}
);
Edit:
data:
{
labels: ['Volts', 'Amperes'],
datasets:
[
{
data: [24.78, 14.51], // Volts and amperes, respectively
borderWidth: 1,
borderColor: ['#0000e0', '#e00000'], // Border colors for volts and amperes, respectively
},
]
},

Finally I have it working as I want thanks to a hint by a user who separated the data in x and y sections
Code on jsFiddle
Full working example here:
jsFiddle

Chart.js stacked line chart with differently styled sections

My React app uses react-chartjs-2 (which in turn uses the latest Chart.js 2.7.2). I'm trying to create stacked line charts with a differently styled section between the second-to-last and last x-axis labels, as shown in this example:
How can this be accomplished?

I solved it myself by separating the stacked line data into 2 datasets, to plot as separate stacked plots on the same figure/axes (by including the 2 separate datasets in a single chart's data object).

#Izzi (from comment) here is example:
Link with examle: https://www.chartjs.org/docs/latest/samples/area/line-boundaries.html
Paste this config into editor on the website linked above:
data
const data = {
labels: generateLabels(),
datasets: [
{
label: 'Data A',
data: [40.96,89.06,65.46,45.46,89.55,54.52,71.24,89.1],
borderColor: Utils.CHART_COLORS.red,
backgroundColor: Utils.CHART_COLORS.red,
// look at this setting
fill: 'origin'
},
{
label: 'Data B',
data: [20.96,65.06,15.46,34.46,53.55,24.52,31.24,59.1],
borderColor: Utils.CHART_COLORS.blue,
backgroundColor: Utils.CHART_COLORS.blue,
fill: 'origin'
},
{
label: 'Data C',
data: [20.96,65.06,15.46,34.46,53.55,24.52,31.24,59.1],
borderColor: Utils.CHART_COLORS.green,
backgroundColor: Utils.CHART_COLORS.green,
fill: 'origin'
}
]
};
config
const config = {
type: 'line',
data: data,
options: {
scales: {
y: {
// look at this setting
stacked: true,
}
},
plugins: {
filler: {
propagate: false,
},
title: {
display: true,
text: (ctx) => 'Fill: ' + ctx.chart.data.datasets[0].fill
}
},
interaction: {
intersect: false,
}
},
};

Chart Js showing the old data and shakes on mouse hover

I am making a map application that shows datas from different countries when i click on it. I have an info panel with a chart that shows the data. But after the first click, the old data somehow not updates and when i come over the chart hover it shakes and sometimes shows the old datas.
My code is :
chart = new APP_JS.Chart(canvas, {
type: 'pie',
data: {
labels: ["GERB", "BSP", "VatBir", "HÖH", "Volya", "DOST"],
datasets: [{
label: '# Oy Sayısı',
data: [sum_p11, sum_p10, sum_p17, sum_p9, sum_p6, sum_p13],
backgroundColor: [
'#ff00bf',
'#0000ff',
'#1f77b4',
'#ffff00',
'#00ff00',
'#ff8000'
]
}]
},
options: {
rotation: -Math.PI,
legend: {
display: false
}
}
})
I did the following but it is not working
if (chart != undefined) {
console.log("Chart is Undefined");
chart.data.labels.pop();
chart.data.datasets.forEach(dataset => {
dataset.data.pop();
});
chart.destroy();
}

there is a function inside chartJS which is updating the chart
chart.update();
here is the reference to the api, but im not sure if this is what your looking for

Pushing data from json to Chart.js labels and data

I am using the Chart.js lib to make charts.
I have a json array that I am getting from a database.
Here is the console log of it: Data
I need to get the address, speed, and speed limit for every element in the list and use it in a chart.
My current code is as follows:
function ShowChart() {
var popCanvas = document.getElementById("speedLimitsChart");
console.dir(speeddata);
var labels = speeddata.map(function (e) {
return e.Adress;
});
var speed = speeddata.map(function (e) {
return e.Speed;
});
var speedlimits = speeddata.map(function (e) {
return e.SpeedLimits;
});
console.dir(labels);
var barChart = new Chart(popCanvas, {
type: 'bar',
data: {
datasets: [{
label: 'Speed',
data: speed,
backgroundColor: '#1E90FF'
}, {
label: 'Speed Limits',
data: speedlimits,
backgroundColor: '#B22222',
type: 'line'
}],
},
labels: labels
});
}
But in the result I only have the first element in my chart, and there are no labels.
Here is the output screen: Chart
I checked speed, speedlimits and labels and all of them have 2 elements. Can you please advise where my problem might be?

I found where is my problem
I need to write labels inside of data
Like this
var barChart = new Chart(popCanvas, {
type: 'bar',
data: {
labels: labels ,
datasets: [{
label: 'Speed',
data: speed,
backgroundColor: '#1E90FF'
}, {
label: 'Speed Limits',
data: speedlimits,
backgroundColor: '#B22222',
type: 'line'
}],
},
});

chart.js one of the chart from mixed chart is not plotting

I am trying to create a mixed chart using chart.js. I separated my data into three different array for the plotting purpose. The sample data:
labelData:
Ezion Led Light Bulb - Warm White 10.5w E27
Ezion Induction Cooker Ez822
Ezion Led Light Bulb - Daylight 10.5w E27
Ezion Led Light Bulb - Warm White 5.5w E27
Ezion Led Light Bulb - Warm White 7.5w E27
For the amountData, I wanted it to be in horizontalBar format. As for the quantityData, I wanted it to be in line format.
var opt = {
type: "horizontalBar",
data: {
labels: labelData,
datasets: [{
label: brand,
data: amountData,
}, {
type: 'line',
label: brand,
data: quantityData,
}]
},
options: options
};
The line chart is not plotting at all. Any ideas?
Thanks in advance!
EDIT PART 2
This is the part where I tried to populate my labelData array. I am pulling from firebase but for demonstration purpose, I will just put a few dummy data first:
var topProductList = [{itemName: 'Ezion Led Light Bulb - Warm White 10.5w E27'},
{itemName: 'Ezion Induction Cooker Ez822'},
{itemName: 'Ezion Led Light Bulb - Daylight 10.5w E27'},
{itemName: 'Ezion Led Light Bulb - Warm White 5.5w E27'},
{itemName: 'Ezion Led Light Bulb - Warm White 7.5w E27'}];
for(var i = 0 ; i < topProductList.length; i++){
var itemName = topProductList[i].itemName;
itemName = itemName.replace(/\s/g, '\n');
labelData.push(itemName);
}
As suggested by #GRUNT, I am trying to replace the empty space with '\n' to format the string properly so that the chart could perform callback. However, the code above does not replace the empty space with '\n'. Here is what I obtained:

The easiest workaround would be to use a callback function (to merge the labels back) for tooltips title, as such :
tooltips: {
callbacks: {
title: function(t, d) {
return d.labels[t[0].index].replace(/\n/, ' ');
}
}
}
but first, you should break the x-axis labels using x-axis' ticks callback function, instead of using two-dimensional labels array (as suggested on the thread you mentioned), like so :
xAxes: [{
ticks: {
callback: function(tick) {
return tick.split(/\n/);
}
}
}]
* put a new-line character where you wanna break line in your label, e.g.: Jan\n2017
ᴅᴇᴍᴏ ⧩
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan\n2017', 'Feb\n2017', 'Mar\n2017', 'Apr\n2017', 'May\n2017'],
datasets: [{
label: 'LINE',
data: [3, 1, 4, 2, 5],
backgroundColor: 'rgba(0, 119, 290, 0.2)',
borderColor: 'rgba(0, 119, 290, 0.6)',
fill: false
}]
},
options: {
scales: {
xAxes: [{
ticks: {
callback: function(tick) {
return tick.split(/\n/);
}
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 1
}
}]
},
tooltips: {
callbacks: {
title: function(t, d) {
return d.labels[t[0].index].replace(/\n/, ' ');
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>