You were close to it ! Actually, the attribute you have to edit is not lineWidth but borderWidth (in the first example of Chart.js docs, you can see the attribute). As stated in the example of the MDN doc of lineTo : Use the beginPath() to begin a path to draw a line on, move … Read more
I was also getting same error. To fix this I moved the chart script into separate graph.js file. Still I was getting same error. Which is fixed later when I put tag in following order before end of tag as shown below. <script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js”></script> <script type=”text/javascript” src=”jscript/graph.js”></script> </body> The page look like this: var ctx … Read more
in the option add this parameter multiTooltipTemplate: “<%= datasetLabel %> – <%= value %>”
You can use the border-dash property for particular dataset. You can specify border length & spacing. E.g borderDash: [10,5] var ctx = document.getElementById(“myChart”); var myChart = new Chart(ctx, { type: ‘line’, data: { labels: [“Label1”, “Label2”, “Label3”], datasets: [{ label: ‘legend1’, data: [12, 19, 3], borderDash: [10,5] },{ label: ‘legend2’, data: [22, 9, 13], }] … 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
According to the docs there is a onClick handler for the legend exposing the event object. If you stopPropagation it stops the data series hiding: let chart = new Chart(elem.find(‘canvas’)[0], { type: ‘line’, data: { labels: [], datasets: [] }, options: { responsive: true, maintainAspectRatio: false, legend: { onClick: (e) => e.stopPropagation() } } }); … Read more
You need to wrap the title object inside an options object like var myChart = new Chart(ctx, { type: ‘doughnut’, options: { plugins: { title: { display: true, text: ‘TEST’ } } } …. Here are the docs for a full list of all the options, chartjs:title var data = [2137680, 6282693, 805566, 2568163, 598599, … Read more
This improper cutoff was raised as issue#622 in the Github repository for ChartJS. This was determined to be a bug (evidently this bug hasn’t yet been fixed) https://github.com/nnnick/Chart.js/issues/622 In response to that issue, Robert Turrall has a solution which he says is a good workaround. Here is his proposed fix: I’m sure that this is … Read more
I believe, what you are looking for, is a scatter graph, not line. var x = new Chart(document.getElementById(“myChart1”), { type: ‘scatter’, data: { datasets: [{ label: “Test”, data: [{ x: 0, y: 5 }, { x: 5, y: 10 }, { x: 8, y: 5 }, { x: 15, y: 0 }], }] }, options: … 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