I have a plugin which should render a circle for each value in the dataset at the same height as each bar is. I can get the y position for a value with
chart.scales.y.getPixelForValue(index)
but that is not the position of the bars.
const data ={
labels:[
"Macht",
"Ehre",
"Besitz",
[
"Selbst-",
"verwirklichung"
],
"Wettbewerb",
"Dienen",
"Spiritualität"
],
"datasets": [
{
"label": "first",
"backgroundColor": "rgb(208,55,25)",
"data": [
4,
8,
5,
4,
1,
1,
3
]
},
{
"label": "second",
"backgroundColor": "rgb(240,223,89)",
"data": [
1,
4,
5,
2,
5,
3,
3
]
}
]
}
const circles = {
id: 'circles',
afterDraw(chart, args, options) {
const {ctx, scales:{x,y}} = chart;
options.data.forEach((dataset) => {
let even = true
dataset.data.forEach((value,index) => {
var xpos = x.getPixelForValue(value);
var ypos = chart.scales.y.getPixelForValue(index) //HERE I WANT THE Y POSITION OF EACH BAR
ctx.save();
ctx.fillStyle = dataset.backgroundColor;
ctx.beginPath();
ctx.arc(xpos, ypos, 10, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
ctx.restore();
})
})
}
}
const chartOptions = {
maintainAspectRatio: false,
responsive:true,
indexAxis: 'y',
scales: {
x:{
min: 1,
max: 9,
},
y:{
ticks: {
stepSize: 1,
autoSkip: false,
},
min: 0,
max: 6,
position: 'left',
},
},
plugins: {
circles: {
data: [
{
"label": "Selbseinschätzung",
"backgroundColor": "rgb(208,55,25)",
"data": [
6,
4,
3,
7,
4,
4,
7
]
},
{
"label": "Selbseinschätzung",
"backgroundColor": "rgb(240,223,89)",
"data": [
7,
4,
4,
3,
6,
5,
2
]
}
]
}
}
}
const ctx = document.getElementById('mts').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: chartOptions,
plugins: [circles]
});
[![enter image description here][1]][1]
How can I get the bars y position?
Now I have to give some more details, but I dont know how to explain the problem mor exactly. So I write this stuff.
I think you could use the dataset element for y.
const data ={
labels:["Macht", "Ehre", "Besitz", ["Selbst-", "verwirklichung"], "Wettbewerb", "Dienen", "Spiritualität"],
"datasets": [
{
"label": "first",
"backgroundColor": "rgb(208,55,25)",
"data": [4, 8, 5, 4, 1, 1, 3]
},
{
"label": "second",
"backgroundColor": "rgb(240,223,89)",
"data": [1, 4, 5, 2, 5, 3, 3]
}
]
}
const circles = {
id: 'circles',
afterDraw(chart, args, options) {
const {ctx, scales:{x,y}} = chart;
options.data.forEach((dataset, dsIndex) => {
const meta = chart.getDatasetMeta(dsIndex);
let even = true
dataset.data.forEach((value,index) => {
var xpos = x.getPixelForValue(value);
const elem = meta.data[index];
//var ypos = y.getPixelForValue(index) //HERE I WANT THE Y POSITION OF EACH BAR
var ypos = elem.y;
ctx.save();
ctx.fillStyle = dataset.backgroundColor;
ctx.beginPath();
ctx.arc(xpos, ypos, 10, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
ctx.restore();
})
})
}
}
const chartOptions = {
maintainAspectRatio: false,
responsive:true,
indexAxis: 'y',
scales: {
x:{
min: 1,
max: 9,
},
y:{
ticks: {
stepSize: 1,
autoSkip: false,
},
min: 0,
max: 6,
position: 'left',
},
},
plugins: {
circles: {
data: [
{
"label": "Selbseinschätzung",
"backgroundColor": "rgb(208,55,25)",
"data": [
6,
4,
3,
7,
4,
4,
7
]
},
{
"label": "Selbseinschätzung",
"backgroundColor": "rgb(240,223,89)",
"data": [
7,
4,
4,
3,
6,
5,
2
]
}
]
}
}
}
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: chartOptions,
plugins: [circles]
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.9.1/dist/chart.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
</body>
</html>
Related
I have a doughnut chart with 2 datasets with a custom tooltip callback. I'm trying to hide the tooltip for one of the datasets. I have it all working, but I get a bunch of js errors when I hover the second dataset. Here is my
code:
const data = {
labels: ' . $custom_label . ',
datasets: [
{
data: ' . $vdata . ',
backgroundColor: [ "#f56954", "#00a65a", "#f39c12", "#00c0ef", "#3c8dbc" ],
hoverOffset: 4
},
{
data: ' . $cdata . ',
backgroundColor: [ "#fff", "#fff", "#fff", "#fff", "#fff" ],
hoverBackgroundColor: [ "#fff", "#fff", "#fff", "#fff", "#fff" ],
hoverBorderColor: [ "#fff", "#fff", "#fff", "#fff", "#fff" ],
}
]
};
const config = {
type: "doughnut",
data: data,
options: {
cutoutPercentage: 40,
legend: {
display: false
},
tooltips: {
filter: function (tooltipItem) {
return tooltipItem.datasetIndex === 0;
},
callbacks: {
title: function(tooltipItem, data) {
var dataset = data["datasets"][0];
var percent = Math.round((dataset["data"][tooltipItem[0]["index"]] / dataset["_meta"][0]["total"]) * 100)
return data["labels"][tooltipItem[0]["index"]] + " " + percent + "%";
},
label: function(tooltipItem, data) {
var dataset = data["datasets"][0];
var value = dataset["data"][tooltipItem["index"]];
return "$" + (Math.round(value * 100) / 100).toFixed(2);
},
afterLabel: function(tooltipItem, data) {
var dataset = data["datasets"][1];
return dataset["data"][tooltipItem["index"]] + " " + data["labels"][tooltipItem["index"]];
}
},
titleFontColor: "#fff",
titleFontSize: 14,
backgroundColor: "#000",
bodyFontColor: "#fff",
bodyFontSize: 14,
bodySpacing: 4,
displayColors: false
}
}
};
var assetsChart = new Chart( document.getElementById("assetsChart"), config );
I'm assuming it's getting an error trying to read the ["index"] portion since it doesn't exist for the second dataset.
EDIT: I updated to show the full code for my chart
How do I resolve this?
You use a really old version of Chart.js. You should first switch to the latest version (currently v3.5.1).
Please take a look at your amended and runnable code below and see how it could work using Chart.js v3.5.1.
new Chart('chart', {
type: 'doughnut',
data: {
labels: ['One', 'Two', 'Three', 'Four', 'Five'],
datasets: [{
data: [5, 3, 7, 6, 7],
backgroundColor: ["#f56954", "#00a65a", "#f39c12", "#00c0ef", "#3c8dbc"],
hoverOffset: 4,
},
{
data: [2, 4, 5, 4, 6],
hidden: true
}
]
},
options: {
plugins: {
tooltip: {
filter: ctx => ctx.datasetIndex == 0,
callbacks: {
title: ctx => {
if (ctx.length) {
var data = ctx[0].dataset.data;
var value = data[ctx[0].dataIndex];
var total = data.reduce((a, b) => a + b, 0);
var percent = Math.round(value / total * 100);
return value + " " + percent + "%";
}
},
label: ctx => {
var value = ctx.dataset.data[ctx.dataIndex];
return "$" + (Math.round(value * 100) / 100).toFixed(2);
},
afterLabel: ctx => {
var hiddenDataset = ctx.chart.config._config.data.datasets[1].data;
var value = hiddenDataset[ctx.dataIndex];
return value + " " + ctx.label;
}
},
titleColor: "#fff",
titleFontSize: 14,
backgroundColor: "#000",
bodyFontColor: "#fff",
bodyFontSize: 14,
bodySpacing: 4,
displayColors: false
}
}
}
});
canvas {
max-height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="chart"></canvas>
I'm trying to remove a dataset from label:
But the label callback is called twice, so i don't know how to do it.
I was expecting an array in the callback and that you can simply remove the one not needed.
here's what i have so far and tried:
var labels = [];
for (let index = 0; index < 12; index++) {
labels.push(index);
}
window.onload = function () {
var canvas = document.getElementById('elm-chart'),
ctx = canvas.getContext('2d');
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: '-15',
data: [
{
x: 0,
y: 10,
},
{
x: 1,
y: 20,
},
],
borderColor: 'red',
},
{
label: '15',
data: [
{
x: 1,
y: 20,
},
{
x: 2,
y: 30,
},
],
borderColor: 'blue',
},
{
label: '25',
data: [
{
x: 2,
y: 30,
},
{
x: 3,
y: 35,
},
],
borderColor: 'yellow',
},
{
label: '-15',
data: [
{
x: 6,
y: -10,
},
{
x: 7,
y: -20,
},
],
borderColor: 'red',
},
{
label: '15',
data: [
{
x: 7,
y: -20,
},
{
x: 8,
y: -30,
},
],
borderColor: 'blue',
},
{
label: '25',
data: [
{
x: 8,
y: -30,
},
{
x: 9,
y: -35,
},
],
borderColor: 'yellow',
},
],
},
options: {
responsive: true,
plugins: {
legend: {
onClick: (evt, legendItem, legend) => {
let newVal = !legendItem.hidden;
legend.chart.data.datasets.forEach((dataset) => {
if (dataset.label === legendItem.text) {
dataset.hidden = newVal;
}
});
legend.chart.update();
},
labels: {
filter: (legendItem, chartData) => {
let entries = chartData.datasets.map((e) => e.label);
return entries.indexOf(legendItem.text) === legendItem.datasetIndex;
},
},
},
},
scales: {
x: {
type: 'linear',
ticks: {
stepSize: 30,
},
},
},
plugins: {
tooltip: {
callbacks: {
title: function (context) {
return [`test`, 'test2'];
},
label: function (context) {
console.log(context.dataset.label);
console.log(context.formattedValue);
console.log(context);
return [
`${context.dataset.label}:${context.formattedValue}`,
'test',
];
},
},
},
},
},
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
<canvas id="elm-chart" width="640" height="480"></canvas>
So to be clear i don't want to remove the datapoint in the dataset. I just want to remove 1 datapoint from the label, the top one always
What you can do is instead of using the default tooltip instead use a html tooltip.
In the JS that makes the tooltip instead of looping over each active item you only take the first one and display that.
Official sample of html tooltip: https://www.chartjs.org/docs/master/samples/tooltip/html.html
I have a chart as shown below. I have two expectation, firstly as you can see the tick number (1,2,3,4,5) hidden behind the background color of dump datasets (I need that background colors, that's why I am using fake datasets). I need to show them like using z-index or something. I wrote tick numbers in red color for sample.
Secondly I need the show angle line on top also.
var test2 = [2, 2, 2, 2, 2];
var test3 = [3, 3, 3, 3, 3];
var test4 = [4, 4, 4, 4, 4];
var test5 = [5, 5, 5, 5, 5];
new Chart(document.getElementById("myChart"), {
type: 'radar',
data: {
labels: sectionDescriptions,
datasets: [
{
label: "2050",
fill: true,
borderColor: "rgba(0,0,0,1)",
borderWidth: "4",
pointRadius: 3,
pointBorderWidth: 3,
pointBackgroundColor: "cornflowerblue",
pointBorderColor: "rgba(0,0,200,0.6)",
pointHoverRadius: 10,
data: sectionPoints
},
{
radius: 0,
fill: true,
backgroundColor: "rgba(240,0,0,1)",
data: test2
},
{
radius: 0,
fill: true,
backgroundColor: "rgba(255,190,4,1)",
data: test3
},
{
radius: 0,
fill: true,
backgroundColor: "rgba(255,250,5,1)",
data: test4
},
{
radius: 0,
fill: true,
backgroundColor: "rgba(0,180,233,1)",
data: test5
}
]
},
options: {
title: {
display: true,
text: 'Chart'
},
scale: {
gridLine: {
color : "white"
},
ticks: {
beginAtZero: true,
min: 0,
max: 5,
stepSize: 1,
fontColor: 'black',
backDropColor: 'black'
},
pointLabels: {
fontSize: 13,
//fontStyle: 'bold'
}
},
legend: {
display: false
}
}
});
I need to draw a chart with 2 lines using Chart.js.
Each of this line has a different label set.
i.e.
Chart 1:
1 -> 2
2 -> 4
3 -> 8
4 -> 16
Chart 2:
1 -> 3
3 -> 4
4 -> 6
6 -> 9
This following sample obviously does not work as it uses the labels from chart1. But is it possible to realize this with Chart.js?
var config = {
type: 'line',
data: {
labels: [1,2,3,4,5],
datasets: [{
label: 'Chart 1',
data: [2,4,8,16],
}, {
label: 'Chart 2',
data: [3,4,6,9],
}]
},
Other charting libs offers a (label/data) set as parameter so I could simply give a tupel as parameter
(ie. [(1->2),(2->4),(3->8)...]
for each chart and the lib will match everything.
Thanks
Edit: Detailed sample as requested:
var config = {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5],
datasets: [{
label: 'Chart 1',
data: [2, 4, 8, 16],
}, {
label: 'Chart 2',
data: [3, 4, 6, 9],
}]
},
options: {
spanGaps: true,
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Labels'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Values'
},
ticks: {
min: 1,
max: 10,
}
}]
}
}
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<div style="width:90%;" class="container">
<canvas id="canvas"></canvas><br>
</div>
Use scatter type chart and showLine: true instead of line type with labels:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [
{
label: 'Chart 1',
data: [{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}],
showLine: true,
fill: false,
borderColor: 'rgba(0, 200, 0, 1)'
},
{
label: 'Chart 2',
data: [{x: 1, y: 3}, {x: 3, y: 4}, {x: 4, y: 6}, {x: 6, y: 9}],
showLine: true,
fill: false,
borderColor: 'rgba(200, 0, 0, 1)'
}
]
},
options: {
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>
What this code does is, it displays multi line graph using chart.js
Create a class for your labeling x and y values
//DataContract for Serializing Data - required to serve in JSON format
[DataContract]
public class LabelPoint
{
//Explicitly setting the name to be used while serializing to JSON.
[DataMember(Name = "label")]
public string Label { get; set; }
public DataPoint DataPoint { get; set; }
}
[DataContract]
public class DataPoint
{
[DataMember(Name = "x")]
public List<string> X { get; set; }
//Explicitly setting the name to be used while serializing to JSON.
[DataMember(Name = "y")]
public List<string> Y { get; set; }
}
Controller code to retrieve data
List<LabelPoint> dataPoints = GetProducts.ToList()
.GroupBy(p => p.ProductName,
(k, c) => new LabelPoint()
{
DataPoint = new DataPoint { X = c.Select(y => y.Date.ToString("dd/MM/yyyy HH:mm")).ToList(), Y = c.Select(cs => cs.Quantity).ToList() },
Label = k
}
).ToList();
ViewBag.DataPoints = dataPoints;
cshtml code to display chart and retrieve data
<canvas id="myChart"></canvas>
<script>
$(document).ready(function () {
// Get the data from the controller using viewbag
// so the data looks something like this [ { Label : "ABC" , DataPoint :[ { X: '222' , Y :60 } ] } ]
var data = #Html.Raw(Json.Encode(ViewBag.DataPoints));
// declare empty array
var dataSet = []; var qty= []; var dates= [];
// loop through the data and get the Label as well as get the created dates and qty for the array of object
for (var i = 0; i < data.length; i++) {
qty.push(data[i].DataPoint.Y);
for (var d = 0; d < data[i].DataPoint.X.length; d++) {
// we're setting this on the X- axis as the label so we need to make sure that we get all the dates between searched dates
dates.push(data[i].DataPoint.X[d]);
}
// we create an array of object, set the Lable which will display LocationName, The data here is the Quantity
dataSet.push(
{
label: data[i].Label,
data: data[i].DataPoint.Y,
fill: false,
borderColor: poolColors(qtyInLocations.length),
pointBorderColor: "black",
pointBackgroundColor: "white",
lineTension: 0.1
}
);
}
// this is the options to set the Actual label like Date And Quantity
var options = {
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: "Date",
fontSize: 20
},
}],
yAxes: [{
ticks: {
beginAtZero:true
},
scaleLabel: {
display: true,
labelString: 'Quantity',
fontSize: 20
}
}]
}
};
// we need to remove all duplicate values from the CreatedDate array
var uniq = [ ...new Set(dates) ];
// get the canvas
var ctx = document.getElementById("myChart").getContext('2d');
// build the chart
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: uniq,
datasets:dataSet
},
options: options
});
});
/// will get get random colors each time
function dynamicColors() {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgba(" + r + "," + g + "," + b + ", 0.5)";
}
/// will display random colors each time
function poolColors(a) {
var pool = [];
for(i = 0; i < a; i++) {
pool.push(dynamicColors());
}
return pool;
}
</script>
I'm Working on Chart.js, wanted to implement Select All and Unselect All option for labels. I'm trying to find it out but couldn't get anything such.
Please do help me out if anything such feature can be implemented.
If you need to show/hide charts selecting/unselecting all labels here is an example:
var barChartData = {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32],
datasets: [{
label: 'One',
backgroundColor: 'rgba(206, 0, 23, 1)',
data: [0, 1, 3, 0, 2, 0, 0, 2, 0, 1, 0, 1, 1, 0, 0, 1, 0, 0, 2, 1, 0, 1, 2, 1, 1, 0, 0, 0, 2, 2, 0, 3]
}, {
label: 'Two',
backgroundColor: 'rgba(206, 0, 23, 0.75)',
data: [0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1]
}, {
label: 'Three',
backgroundColor: 'rgba(206, 0, 23, 0.5)',
data: [0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 1, 0, 0, 0, 1, 1, 0, 1, 2, 0, 0, 0, 1, 0, 0, 0, 0, 1]
}]
};
var ctx = document.getElementById('canvas').getContext('2d');
var chartInstance = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: false,
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
$("#toggle").click(function() {
chartInstance.data.datasets.forEach(function(ds) {
ds.hidden = !ds.hidden;
});
chartInstance.update();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<button id="toggle">show/hide all</button>
<canvas id="canvas" height="500" width="800"></canvas>
Jsfiddle: https://jsfiddle.net/beaver71/00q06vjp/
Credits: see https://github.com/chartjs/Chart.js/issues/3009
Update: for pie chart use "meta", see: https://jsfiddle.net/beaver71/u0y0919b/
For ChartJS 2.9.3, this works as requested by David in the comments:
const chart = ...
chart.data.datasets.forEach(dataset => {
Object.keys(dataset._meta).forEach(key => {
const current = !dataset._meta[key].hidden
dataset._meta[key].hidden = current || null
})
})
chart.update()
Toggles all with a button, while playing nicely with the individual toggling in the chart legend.
V3 Answer
You can use a custom generateLabels function together with a custom onClick to get it as an extra legendItem like so:
const defaultLegendClickHandler = Chart.defaults.plugins.legend.onClick;
const pieDoughnutLegendClickHandler = Chart.controllers.doughnut.overrides.plugins.legend.onClick;
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
plugins: {
legend: {
onClick: (evt, legendItem, legend) => {
const type = legend.chart.config.type;
let allLegendItemsState = [];
if (legendItem.text === 'hide all datasets' || legendItem.text === 'show all datasets') {
if (typeof legend.hideAll === 'undefined') {
legend.hideAll = false;
}
legend.chart.data.datasets.forEach((dataset, i) => {
legend.chart.setDatasetVisibility(i, legend.hideAll)
});
legend.hideAll = !legend.hideAll;
legend.chart.update();
return;
}
if (type === 'pie' || type === 'doughnut') {
pieDoughnutLegendClickHandler(evt, legendItem, legend)
} else {
defaultLegendClickHandler(evt, legendItem, legend);
}
allLegendItemsState = legend.chart.data.datasets.map((e, i) => (legend.chart.getDatasetMeta(i).hidden));
if (allLegendItemsState.every(el => !el)) {
legend.hideAll = false;
legend.chart.update();
} else if (allLegendItemsState.every(el => el)) {
legend.hideAll = true;
legend.chart.update();
}
},
labels: {
generateLabels: (chart) => {
const datasets = chart.data.datasets;
const {
labels: {
usePointStyle,
pointStyle,
textAlign,
color
}
} = chart.legend.options;
const legendItems = chart._getSortedDatasetMetas().map((meta) => {
const style = meta.controller.getStyle(usePointStyle ? 0 : undefined);
return {
text: datasets[meta.index].label,
fillStyle: style.backgroundColor,
fontColor: color,
hidden: !meta.visible,
lineCap: style.borderCapStyle,
lineDash: style.borderDash,
lineDashOffset: style.borderDashOffset,
lineJoin: style.borderJoinStyle,
strokeStyle: style.borderColor,
pointStyle: pointStyle || style.pointStyle,
rotation: style.rotation,
textAlign: textAlign || style.textAlign,
datasetIndex: meta.index
};
});
legendItems.push({
text: (!chart.legend.hideAll || typeof chart.legend.hideAll === 'undefined') ? 'hide all datasets' : 'show all datasets',
fontColor: color,
fillStyle: 'turquoise', // Box color
strokeStyle: 'turquoise', // LineCollor around box
});
return legendItems;
}
}
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>
The correct answer result in :
chart.data.datasets.forEach((obj, index) => {
let meta = this.eval_chart.getDatasetMeta(index);
meta.hidden = !meta.hidden || null;
});
chart.update();
As wrote in the documentation : https://www.chartjs.org/docs/latest/configuration/legend.html#custom-on-click-actions