I am new to ChartJS but this feels like I am running into a bug. I wrote the jsFiddle below as an example to demonstrate the issue.
https://jsfiddle.net/4mxvb3yg/
HTML
<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->
<canvas id="myChart"></canvas>
Javascript
var servicelabels = ["January", "February", "March", "April", "May", "June", "July"];
var servicechartData = [65, 0, 80, 81, 56, 85, 40];
barColors = ["#008000","#0000FF","#800080","#00FF00","#FF00FF","#008080","#FFFF00","#808080","#00FFFF","#000080","#800000","#008000","#0000FF","#800080","#00FF00","#FF00FF","#008080","#FFFF00","#808080","#00FFFF","#000080","#800000"];
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
type: 'bar',
data: { labels: servicelabels, datasets: [{ data: servicechartData, backgroundColor: barColors}]},
options: { legend: {display: false }}});
Currently, the fiddle is behaving as I want it to (bar chart with NO legend, as its display property is set to false). However, if you uncomment the top line in the HTML to use the CDN link as the source, it no longer respects the disabled legend.
The project that I am currently working on would require this cdn source link, and I need the legend to be disabled, hence my problem.
Any advice would be great, and thank you for taking a look. Andrew
It might be due to version mismatch, as per the latest version of chart.js, in order to remove the legend. The CDN might be using the latest chart.js
options: {
plugins:{
legend: {
display: false
},
}
}