why isn't the chart being updated with this code?:
<script type="text/javascript">
function updateConfigByMutating() {
chart.options.plugins.title.text = 'new title';
chart.update();
}
</script>
<input type="button" onclick="updateConfigByMutating(barChart)">
<body>
<canvas id="barChart"></canvas>
<script>
var ctxB = document.getElementById("barChart").getContext('2d');
var barChart = new Chart(ctxB, {
type: 'bar',
data: {
labels: ["Pennetta", "Menna", "Carinci", "Notaro", "Giangiacomo", "Carugno"],
datasets: [{
label: 'Andamento dei Voti - Elezioni 2021',
data: [<?php echo $checkpennetta[0]; ?>, <?php echo $checkmenna[0]; ?>, <?php echo $checkcarinci[0]; ?>, <?php echo $checknotaro[0]; ?>, <?php echo $checkgiangiacomo[0]; ?>, <?php echo $checkcarugno[0]; ?>],
backgroundColor: [
'rgba(250, 216, 89, 0.2)',
'rgba(207, 0, 15, 0.2)',
'rgba(232, 126, 4, 0.2)',
'rgba(31, 58, 147, 0.2)',
'rgba(137, 196, 244, 0.2)',
'rgba(77, 175, 124, 0.2)'
],
borderColor: [
'rgba(250, 216, 89, 1)',
'rgba(207, 0, 15, 1)',
'rgba(232, 126, 4, 1)',
'rgba(31, 58, 147, 1)',
'rgba(137, 196, 244, 1)',
'rgba(77, 175, 124, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
I press the button and it does not update.
The title doesn't change, and I don't know why, honestly
Thank you
....................................................................................................................................................................................................
Remember that you assigned the newly created chart to the variable barChart. Therefore, try to change your updateConfigByMutating from...
function updateConfigByMutating() {
chart.options.plugins.title.text = 'new title';
chart.update();
}
...to
function updateConfigByMutating() {
barChart.options.plugins.title.text = 'new title';
barChart.update();
}
I have tried to set the legend option to display: false, but no matter what I do the legend does not go away.
I have triple checked my syntax, and scoured this site, but I cannot figure out why this label will not disappear.
See codepen:
https://codepen.io/peidj/pen/dyNrJqP
var config_overdue = {
type: 'bar',
data: {
labels: [
'90 Days Overdue',
'180 Days Overdue',
'365 Days Overdue'
],
datasets: [{
label: 'HOW DO I DELETE THIS??',
data: [100,500,1000],
backgroundColor: [
'rgba(255, 205, 86, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgb(255, 205, 86)',
'rgb(255, 159, 64)',
'rgb(255, 99, 132)'
],
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
indexAxis: 'y',
plugins: {
title: {
display: true,
text: 'Overdue Trainings'
}
},
scales: {
y: {
beginAtZero: true
},
},
tooltips: {
callbacks: {
label: function (tooltipItem) {
console.log(tooltipItem)
return tooltipItem.yLabel;
}
}
}
}
};
var chart_all_uwf_overdue = document.getElementById('chart_all_uwf_overdue').getContext('2d');
new Chart(chart_all_uwf_overdue, config_overdue);
div {
max-width: 500px;
}
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.2.0/dist/chart.min.js"></script>
</head>
<body>
<div>
<canvas id="chart_all_uwf_overdue" width="600" height="400"></canvas>
</div>
</body>
</html>
In version 3 the legend has moved to the plugin section in the options so if you put it like this it will hide the legend:
options: {
plugins: {
legend: {
display: false
}
}
}
chartjs-plugin-datalabels supports displaying of inforamtion related to the value, data, context of the graph content. Need to display image along with the text label on each graph based on the values . Refer attached snapshot
Tried custom option for toopltip but basically need to try rendering of html in the plugin data label so as image can also be added
plugins: {
datalabels: {
anchor: 'end',
align: 'start',
font: {
size: 20,
}
}
}
Display image on the bar
Expected Result :
This can be achieved by combining chartjs-plugin-datalabels with chartjs-plugin-labels as follows:
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: ['2009', '2010', '2011', '2012'],
datasets: [{
label: 'My First Dataset',
data: [25, 59, 80, 76],
fill: false,
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)'],
borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)'],
borderWidth: 1
}]
},
options: {
plugins: {
datalabels: {
anchor: 'end',
align : 'start'
},
labels: {
render: 'image',
textMargin: -60,
images: [
null,
null,
{
src: 'https://i.stack.imgur.com/9EMtU.png',
width: 20,
height: 20
},
null
]
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
canvas {
max-width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart" width="10" height="5"></canvas>
As soon as I give the chartJS div flexible values such as width=100%, the graph is not animated anymore.
I tried to use things such as width=45vh but this doesn't fit my need as the chart should always fill 100% of the width of the div above it.
I also tried to add the flexible width to the div id="1" (outer div). The chart is then animating but the width is totally screwed.
In Codepen it's working with exactly the same code:
https://codepen.io/anon/pen/ebjvMm
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Standard", "Premium"],
datasets: [{
label: 'Noahs Box',
data: [139, 189],
backgroundColor: [
'rgba(30, 56, 79, 1)',
'rgba(30, 56, 79, 1)',
],
borderColor: [
'rgba(30, 56, 79, 1)',
'rgba(30, 56, 79, 1)',
],
borderWidth: 1
},
{
label: 'Amazon',
data: [192.30, 440.55],
backgroundColor: [
'rgba(255, 153, 0, 1)',
'rgba(255, 153, 0, 1)'
],
borderColor: [
'rgba(255, 153, 0, 1)',
'rgba(255, 153, 0, 1)'
],
borderWidth: 1
}],
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: true
},
animation: {
duration: 7500,
},
title: {
display: true,
text: 'Comparison: Noahs Box vs. Amazon'
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
<div style="height:450px">
<div style="position: relative;
margin: auto;
height: 100%;
width: 100%;">
<canvas id="myChart"></canvas></div></div>
This is the page where I have the problem: https://noahsbox.com/pages/price-comparison
As you can see I I have two graphs. The second one is working as it has a fix width.
The chart should be responsive and always take 100% of the width of the 'div id="1" class="grid__item large--one-half medium-down--one-whole right-image statistic-tile' (right side of the tile/section).
AND it should animate when loading the page and not just show up without any animation.
Helpful links:
https://github.com/chartjs/Chart.js/issues/2958
https://www.chartjs.org/docs/latest/general/responsive.html#configuration-options
In Chart.js you can hide a section of a chart by clicking on the label on top.
picture of a pie chart with hidden section
I want a section of the chart to be hidden on startup. With another type of chart I would use the dataset hidden property, but pie chart sections do not correspond with the datasets. So if you do the same the entire dataset is hidden, not just the needed section.
(Extra information: I use a pie chart with multiple datasets)
The closest I have come to a solution is this code:
for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {
meta = chart.getDatasetMeta(i);
meta.data[index].hidden = !meta.data[index].hidden;
}
chart.update();
Or I could overwrite the generateLabels function.
Can anyone help me find a better solution?
Thank you
You may see an implementation as a plugin here and below.
// A plugin that hides slices, given their indices, across all datasets.
var hideSlicesPlugin = {
afterInit: function(chartInstance) {
// If `hiddenSlices` has been set.
if (chartInstance.config.data.hiddenSlices !== undefined) {
// Iterate all datasets.
for (var i = 0; i < chartInstance.data.datasets.length; ++i) {
// Iterate all indices of slices to be hidden.
chartInstance.config.data.hiddenSlices.forEach(function(index) {
// Hide this slice for this dataset.
chartInstance.getDatasetMeta(i).data[index].hidden = true;
});
}
chartInstance.update();
}
}
};
Chart.pluginService.register(hideSlicesPlugin);
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
data: [15, 1, 1, 1, 45, 1],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}, {
data: [5, 1, 25, 10, 5, 1],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}],
// Hide the second (index = 1) and the fourth (index = 3) slice.
hiddenSlices: [1, 3]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
The slices to be hidden are provided using the hiddenSlices attribute, which should be an array of indices corresponding to existing slices. The slices are hidden across all datasets using the hideSlicesPlugin, if hiddenSlices has been set.
After creating the chart, you can retrieve its metadata through .getDatasetMeta(index), change the hidden attribute of the desired slice and update the chart as shown in the following code snippet. When the user clicks on the label of the hidden slice, it will become visible again.
const chart = new Chart(document.getElementById('myChart'), {
type: 'pie',
data: {
labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
datasets: [{
data: [100, 100, 200, 300, 140],
backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)']
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
title: {
display: true,
text: 'Colors - Sample Pie Chart'
}
}
});
chart.getDatasetMeta(0).data[4].hidden = true;
chart.update();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="150"> </canvas>
None of the answers provided here have worked for Chart.js version 3.2.1 (what I am using). Here is what I came up with (and it works):
let ctx = document.getElementById('myChart').getContext('2d');
window.chart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
datasets: [{
data: [100, 100, 200, 300, 140],
backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)'],
hoverOffset: 6,
}]
},
options: {
layout: { padding: 10 },
responsive: true,
maintainAspectRatio: true,
plugins: {
title: {
display: true,
text: 'Colors - Sample Pie Chart'
}
}
}
});
toggleData('red');
window.chart.render();
function toggleData(txt) {
let ci = window.chart;
let legendItems = ci.legend.legendItems;
let index;
for (index = 0; index < legendItems.length; ++index) {
let legendItem = legendItems[index];
if (legendItem.text.toLowerCase() === txt.toLowerCase()) {
// let visible = chart.getDataVisibility(index);
ci.toggleDataVisibility(index);
ci.update();
return;
}
}
}
/*
Note: Do not style the canvas element. See:
https://github.com/chartjs/Chart.js/issues/9089
*/
#myChartContainer {
width:400px;
height:400px;
}
<div id="myChartContainer">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.2.1/dist/chart.min.js"
integrity="sha256-uVEHWRIr846/vAdLJeybWxjPNStREzOlqLMXjW/Saeo=" crossorigin="anonymous"></script>
References:
https://www.chartjs.org/docs/latest/developers/api.html#toggledatavisibility-index
https://www.chartjs.org/docs/latest/configuration/legend.html#custom-on-click-actions
Update - 17/Nov/2019
Don't do this, at the time I wrote this I was new to ChartJS and Web Development as well and it seems that the solution above already outdated, so I tried to answer with things that works for me. Maybe it's already outdated too, I haven't used ChartJS much since then. I moved to Echarts.
Since #xnakos answer is already outdated, I just wanted to share the same thing can be done easier in the current ChartJS version (2.7.3). Simply set the values to undefined, setting it to other values such as null will leave the legends being seen (or not crossed).
var ctx = document.getElementById("myDoughnut").getContext("2d");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Red", "Green", "Blue"],
datasets: [{
label: '# of Votes',
data: [12, 19, undefined],
// Set this value to undefined
backgroundColor: [
'#f87979',
'#79f879',
'#7979f8'
],
borderWidth: 5
}]
},
options: {
tooltips: {
mode: null
},
plugins: {
datalabels: {
borderWidth: 5,
borderColor: "white",
borderRadius: 8,
// color: 0,
font: {
weight: "bold"
},
backgroundColor: "lightgray"
}
}
}
});
<div id="app">
<div width="400">
<canvas id="myDoughnut"></canvas>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.4.0/dist/chartjs-plugin-datalabels.js"></script>
<!-- Made in 21 Nov 2018 -->
<!-- with ChartJS 2.7.3 -->
Here's a link to JSFiddle, for you to play around.
http://jsfiddle.net/irfandyjip89/fokbgnvz/5/
However, must be noted, if you're using datasets on Pie/Doughnut, it's better to set it into null. Because one undefined value in any of the dataset will cross the legends.
But if you do set one undefined values on any of the dataset, it will result in the legends being crossed (or strikethrough). EVEN WHEN THERE'S A VALUE ON THE NEXT DATASET.
This means that if you only use one dataset, and you don't want the data being shown in the chart and getting the legends crossed you want to set the values to undefined. Whereas, null values will get you same result without the legends being crossed.
However it's preference on how the Chart should appear, but personally I would want to use undefined values if I would like to cross the legends (usually on one dataset chart)and hide the data, and will use null values if I would like to just hide the data without getting the legends crossed (usually on multiple dataset chart).
If you want to check how it went when playing with multiple datasets, you can check this fiddle http://jsfiddle.net/irfandyjip89/fokbgnvz/19/
P.S. If you're wondering how did I put a label value on the center, it's using a plugin called chartjs-plugin-datalabels
In V3 of chartjs you can use the API they provide to toggle the visibility of an item.
chart.toggleDataVisibility(2); // toggles the item in all datasets, at index 2
chart.update(); // chart now renders with item hidden
Note: Only doughnut / pie, polar area, and bar use this.