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
You can extend the line chart to do this. Preview Script Chart.defaults.NegativeTransparentLine = Chart.helpers.clone(Chart.defaults.line); Chart.controllers.NegativeTransparentLine = Chart.controllers.line.extend({ update: function () { // get the min and max values var min = Math.min.apply(null, this.chart.data.datasets[0].data); var max = Math.max.apply(null, this.chart.data.datasets[0].data); var yScale = this.getScaleForId(this.getDataset().yAxisID); // figure out the pixels for these and the value 0 var top … Read more
Try this: You can make changes globally using this code: Chart.defaults.global = { // Boolean – Determines whether to draw tooltips on the canvas or not showTooltips: true, // Array – Array of string names to attach tooltip events tooltipEvents: [“mousemove”, “touchstart”, “touchmove”], // String – Tooltip background colour tooltipFillColor: “rgba(0,0,0,0.8)”, // String – Tooltip … Read more
UPDATED for CHARTJS V4 With the new version of ChartJS, you need to set the indexAXIS to ‘y’, and set the x and y scales to stacked. options: { indexAxis: ‘y’, scales: { x: { stacked: true }, y: { stacked: true } } } Here’s an updated Codepen using V4 of ChartJS https://codepen.io/jamiecalder/pen/vYaWyVy ORIGINAL … Read more
Apparently, if you do not modify the original reference to the labels array, it seems to work, at least for me. I mean, if you want a completely different set of labels, you should do something like this: In the template: <canvas baseChart [datasets]=”lineChartData” [labels]=”lineChartLabels” [options]=”lineChartOptions” [chartType]=”‘line'”></canvas> In the ts component: this.lineChartLabels.length = 0; for … Read more
The chart seem to be async so you will probably need to provide a callback when the animation has finished or else the canvas will be empty. var options = { bezierCurve : false, onAnimationComplete: done /// calls function done() {} at end };
The below answer is concerned with chart.js 1.x. Chart.js 2.x supports this Chart.js how to get Combined Bar and line charts? EDIT 2 I have now added this feature to my custom build of chartjs if you want to use that https://github.com/leighquince/Chart.js the only difference is i named it Overlay not LineBar so to use … Read more
You can use getElementAtEvent() method to detect which section/slice of your pie chart was clicked on, and based on that open a link/page accordingly. Here is a quick example : var canvasP = document.getElementById(“pieChart”); var ctxP = canvasP.getContext(‘2d’); var myPieChart = new Chart(ctxP, { type: ‘pie’, data: { labels: [“Värde 1”, “Värde 2”, “Värde 3”, … Read more
I’m aware that this is an old post but since it has been viewed so many times, I’ll describe a solution that works with the current Chart.js version 2.9.3. The Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterDraw hook to draw images … Read more
If you want a customized background color then, you’d have to draw a background with your preferred color, and you can do so, like this … var backgroundColor=”white”; Chart.plugins.register({ beforeDraw: function(c) { var ctx = c.chart.ctx; ctx.fillStyle = backgroundColor; ctx.fillRect(0, 0, c.chart.width, c.chart.height); } }); DEMO // draw background var backgroundColor=”white”; Chart.plugins.register({ beforeDraw: function(c) { … Read more