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.
Instead of polling, you can use server-sent-events, which does not put as much strain on the server as data is only sent if a new event has happened (like a new row). More can be found out about them here: https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events Here is an example, as the one in the link is not that good. … 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
In Chart.js version 2.0 this is possible: options = { scales: { yAxes: [{ scaleLabel: { display: true, labelString: ‘probability’ } }] } } See axes labelling documentation for more details.
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
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
Solution for ChartJS 2.6.0 ꜱᴄʀɪᴘᴛ (ᴇxᴛᴇɴᴅɪɴɢ ʟɪɴᴇ ᴄʜᴀʀᴛ) Chart.defaults.LineWithLine = Chart.defaults.line; Chart.controllers.LineWithLine = Chart.controllers.line.extend({ draw: function(ease) { Chart.controllers.line.prototype.draw.call(this, ease); if (this.chart.tooltip._active && this.chart.tooltip._active.length) { var activePoint = this.chart.tooltip._active[0], ctx = this.chart.ctx, x = activePoint.tooltipPosition().x, topY = this.chart.legend.bottom, bottomY = this.chart.chartArea.bottom; // draw line ctx.save(); ctx.beginPath(); ctx.moveTo(x, topY); ctx.lineTo(x, bottomY); ctx.lineWidth = 2; ctx.strokeStyle=”#07C”; ctx.stroke(); ctx.restore(); … Read more
As of v2, you can simply specify an array of values to correspond to a color for each bar via the backgroundColor property: datasets: [{ label: “My First dataset”, data: [20, 59, 80, 81, 56, 55, 40], backgroundColor: [“red”, “blue”, “green”, “blue”, “red”, “blue”], }], This is also possible for the borderColor, hoverBackgroundColor, hoverBorderColor. From … Read more