Your should declare colours object as an array “colours”: [{ fillColor: ‘rgba(47, 132, 71, 0.8)’, strokeColor: ‘rgba(47, 132, 71, 0.8)’, highlightFill: ‘rgba(47, 132, 71, 0.8)’, highlightStroke: ‘rgba(47, 132, 71, 0.8)’ }]; Working Plunkr For more info refer this post / this too. For newer versions, see eli0tt’s answer, as the parameter names have changed.
If you guys run through this post and tried the posted answer and didn’t work, try this one: legendCallback: function(chart) { var text = []; text.push(‘<ul>’); for (var i=0; i<chart.data.datasets.length; i++) { console.log(chart.data.datasets[i]); // see what’s inside the obj. text.push(‘<li>’); text.push(‘<span style=”background-color:’ + chart.data.datasets[i].borderColor + ‘”>’ + chart.data.datasets[i].label + ‘</span>’); text.push(‘</li>’); } text.push(‘</ul>’); return text.join(“”); … Read more
With the approach you are taking (e.g. creating a new Chart object each time the date range changes), then you must first destroy the previous chart and then create the new one. You can use the .destroy() prototype method to do this. Here is exactly what the API states. Use this to destroy any chart … Read more
Like the error says you are using the category scale so you will need to import and register it like so: import {CategoryScale} from ‘chart.js’; Chart.register(CategoryScale); Or you can choose to not use treeshaking and import everything like so: import Chart from ‘chart.js/auto’; For all available things you might need to import and register please … Read more
Another reason to get the same error, is if the element referred by the id is not a <canvas>. I had a <div> element in my HTML source, and of course it did not work.
I had huge problems with this First I tried .clear() then I tried .destroy() and I tried setting my chart reference to null What finally fixed the issue for me: deleting the <canvas> element and then reappending a new <canvas> to the parent container There’s a million ways to do this: var resetCanvas = function … Read more
I had a lot of problems with that, because after all of that my line graphic looked terrible when mouse hovering and I found a simpler way to do it, hope it will help 🙂 Use these Chart.js options: // Boolean – whether or not the chart should be responsive and resize when the browser … Read more
Solution for ChartJs Version > 2.1.5: Chart.pluginService.register({ beforeRender: function (chart) { if (chart.config.options.showAllTooltips) { // create an array of tooltips // we can’t use the chart tooltip because there is only one tooltip per chart chart.pluginTooltips = []; chart.config.data.datasets.forEach(function (dataset, i) { chart.getDatasetMeta(i).data.forEach(function (sector, j) { chart.pluginTooltips.push(new Chart.Tooltip({ _chart: chart.chart, _chartInstance: chart, _data: chart.data, _options: … Read more
The code that you were trying to use is actually for chart.js v1 and, as you discovered, does not work for chart.js v2 (which is almost a full chart.js re-write). To achieve the same results in chart.js v2, you need to extend Chart.elements.Rectangle and overwrite it’s draw method in order to paint the rounded top. … Read more
UPDATE chart.js 2.1 and above var chart = new Chart(ctx, { … options:{ scales:{ xAxes: [{ display: false //this will remove all the x-axis grid lines }] } } }); var chart = new Chart(ctx, { … options: { scales: { xAxes: [{ ticks: { display: false //this will remove only the label } }] … Read more