Related
so I'm basically pulling my hair as I can't get this to work for hours straight.
I'm trying to do a (I assumed simple) line-graph with on the x-axis time of day in hours and on the y-axis number of views. I'm trying to set the x-axis range as -24 hours until now.
My code is as follows. What am I doing wrong?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<div style="width: 500px; height: 500px;"><canvas id="myChart" width="400" height="400"></canvas></div>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: '# of Votes',
data: [{x:'1619701200',y:41},{x:'1619704800',y:9},{x:'1619708400',y:21}]
}]
},
options: {
scales: {
x: {
type: 'time',
min: Date.now() - (24 * 60 * 60 * 1000),
max: Date.now()
}
}
}
});
</script>
EDIT: the problem is that the x-axis doesn't extend to 24 hours prior to now(). Also, there are 3 values in the dataset, but only two are shown. You can even edit the x-values to whatever you want and the entire graph stays the same.
EDIT2:
Could someone help me get this right? I've pasted my data below:
What I am trying to achieve:
X-axis going from now until 24 hours prior with an interval of 1 hour between ticks, formatted as 'd-m-Y H:00:00'. The data now is in seconds since epoch, if I need to change that please let me know!
Y-axis going from 0 to whatever the max is in the dataset
What CDNs do I have to include? I find the documentation on chart.js, moments, adapters etc quite unclear and everything I find on the internet is for prior versions.
Thank you!!
<div style="width: 500px; height: 500px;"><canvas id="myChart" width="400" height="400"></canvas></div>
<script>
new Chart(document.getElementById("myChart"), {
type: 'line',
data: {
labels: ['1619701200','1619704800','1619708400','1619715600','1619719200','1619722800','1619726400','1619730000','1619733600','1619737200','1619744400','1619773200','1619780400','1619784000','1619787600','1619791200','1619794800','1619798400','1619802000','1619809200','1619812800','1619816400','1619820000','1619823600','1619856000'],
datasets: [{
data: [41,9,21,80,277,151,68,88,82,48,12,1,97,36,81,21,63,49,44,15,10,44,81,4,9],
label: "Views",
borderColor: "#3e95cd",
fill: false
},
{
data: [1,1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,4,1,1],
label: "Visitors",
borderColor: "#3e95cd",
fill: false
}
]
}
</script>
We want you to keep your hair :-)
Try the following 2 Options for latest version of Chart.js
Chart.js v3.2.1 (not backwards compatible with v2.xx)
Option 1:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
// gets you the latest version of Chart.js, now at v3.2.1
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>
// You need moment.js and adapter for time or timeseries to work at x-Axis
<div style="width: 500px; height: 500px">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
<script>
const startDate = new Date(1619701200*1000);
// first label from your data, times 1000 to get milliseconds,
// for last 24 hours from now, see further down below
const myLabels = [];
let nextHour = startDate;
let i = 0; // tip: declare i outside for-loop for better performance
for (i; i < 24; i++) {
nextHour = new Date((1619701200 + (i*3600)) *1000);
myLabels.push(nextHour);
};
const ctx = document.querySelector('canvas').getContext('2d');
const myChart3x = new Chart(ctx, {
type: 'line',
data: {
labels: myLabels,
datasets: [{
data: [41,9,21,80,277,151,68,88,82,48,12,1,97,36,81,21,63,49,44,15,10,44,81,4,9],
label: "Views",
borderColor: "#3e95cd",
fill: false
},
{
data: [1,1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,4,1,1],
label: "Visitors",
borderColor: "#3e95cd",
fill: false
}
]
},
options: {
scales: {
x: {
type: 'timeseries',
time: {
unit: 'hour', // <-- that does the trick here
displayFormats: {
hour: 'D-M-Y H:00:00'
},
tooltipFormat: 'D-M-Y H:00:00' // <-- same format for tooltip
}
},
y: {
min: 0
}
}
}
});
</script>
And this is what your chart would look like:
If you want to calculate dynamically the last 24 hours from now for your x-Axis, I would suggest to use moment.js instead:
<script>
// ...
const startDate = moment().subtract(1, 'd');
const myLabels = [];
let nextHour = startDate;
let i = 0;
for (i; i < 24; i++) {
nextHour = moment().add(i, 'h');
myLabels.push(nextHour);
};
// ....
</script>
Also, be aware that moment.js uses slightly different formatting string:
'D-M-Y H:00:00' instead of 'd-m-Y H:00:00'
Option 2:
If you have your data in json-format
data: [{x:1620237600000,y:41},{x:1620241200000,y:9},{x:1620244800000,y:21}]
like your first code snippet on top, using min and max at x-Axis: (Advantage: you don't have to define labels-array for x-Axis)
<script>
const ctx = document.querySelector("canvas").getContext("2d");
var myChart = new Chart(ctx, {
type: "line",
data: {
datasets: [{
label: "Views",
data: [{x:1620237600000,y:41},{x:1620241200000,y:9},{x:1620244800000,y:21}]
// x-value without quotes (has to be a number)
// and multiply by 1000 to get milliseconds
},
{
label: "Visitors",
data: [{x:1620237600000,y:1},{x:1620241200000,y:1},{x:1620244800000,y:2}]
}]
},
options: {
scales: {
x: {
type: "time", // <-- "time" instead of "timeseries"
min: Date.now() - (24 * 60 * 60 * 1000),
max: Date.now(),
time: {
unit: "hour", // <-- that does the trick here
displayFormats: {
hour: "D-M-Y H:00:00"
},
tooltipFormat: "D-M-Y H:00:00"// <-- same format for tooltip
}
},
y: {
min: 0,
max: 100
}
}
}
});
</script>
You should get the following:
I hope I understood correctly your need and hope this helps.
It needs more settings, I've searched and by trial/error - credit to this jsfiddle - , these are the results.
See updated working jsfiddle:
/*
Source: https://jsfiddle.net/microMerlin/3wfoL7jc/
*/
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: '# of Votes',
data: [{
x: '1619701200',
y: 41
}, {
x: '1619704800',
y: 9
}, {
x: '1619708400',
y: 21
}]
}]
},
options: {
responsive: true,
scales: {
xAxes: [{
min: Date.now() - (24 * 60 * 60 * 1000),
max: Date.now(),
type: "linear",
position: "bottom",
//stacked: true,
ticks: {
//beginAtZero: true,
userCallback: function(t, i) {
/*console.log("t: " + t.toString());
console.log("i: " + i.toString());*/
return i;
}
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width: 500px; height: 500px;"><canvas id="myChart" width="400" height="400"></canvas></div>
I'm trying to calculate the sum of the dataset values at the end of a tooltip in ChartJS.
When I execute this code in "label" callback, works correctly. However, when I execute this code in a different callback in "afterBody" or "footer" callback, it results in NaN.
new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: [2018, 2019, 2020],
datasets: [{
data: [1.09, 1.48, 2.48],
label: "ABC",
borderColor: "#3e95cd",
fill: false
}, {
data: [0.63, 0.81, 0.95],
label: "DEF",
borderColor: "#8e5ea2",
fill: false
}, {
data: [0.17, 0.17, 0.18],
label: "GHI",
borderColor: "#3cba9f",
fill: false
}]
},
options: {
title: {
display: true,
text: 'Past 2FY + Current FY Estimate, US$ millions'
},
tooltips: {
mode: 'index',
callbacks: {
label: function(tooltipItem, data) {
if (tooltipItem.index > 0) {
var previousdata = tooltipItem.index - 1;
var growth = ", YoY: " + ((data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] / data.datasets[tooltipItem.datasetIndex].data[previousdata] * 100) - 100).toFixed(1) + "%";
} else {
var growth = '';
};
return data.datasets[tooltipItem.datasetIndex].label + ': $' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + growth;
},
afterBody: function(tooltipItem, data){
var total = 0;
for(var i=0; i < data.datasets.length; i++)
total += data.datasets[i].data[tooltipItem.index];
return 'Sum:'+total;
}
}
}
}
});
<canvas id="line-chart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
Any help will be great!
I expect tooltip "Sum:" returns the sum of dataset values (in this case 'ABC' + 'CDE' + 'GHI' values).
Your use case is the given example for tooltip callbacks on the Chart.js samples page with the following code:
// Use the footer callback to display the sum of the items showing in the tooltip
footer: function(tooltipItems, data) {
var sum = 0;
tooltipItems.forEach(function(tooltipItem) {
sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
});
return 'Sum: ' + sum;
}
Editing your snippet as per the above example seems to yield the result you want, although you probably want it formatted to match the rest of your tooltip:
new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: [2018, 2019, 2020],
datasets: [{
data: [1.09, 1.48, 2.48],
label: "ABC",
borderColor: "#3e95cd",
fill: false
}, {
data: [0.63, 0.81, 0.95],
label: "DEF",
borderColor: "#8e5ea2",
fill: false
}, {
data: [0.17, 0.17, 0.18],
label: "GHI",
borderColor: "#3cba9f",
fill: false
}]
},
options: {
title: {
display: true,
text: 'Past 2FY + Current FY Estimate, US$ millions'
},
tooltips: {
mode: 'index',
callbacks: {
label: function(tooltipItem, data) {
if (tooltipItem.index > 0) {
var previousdata = tooltipItem.index - 1;
var growth = ", YoY: " + ((data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] / data.datasets[tooltipItem.datasetIndex].data[previousdata] * 100) - 100).toFixed(1) + "%";
} else {
var growth = '';
};
return data.datasets[tooltipItem.datasetIndex].label + ': $' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + growth;
},
footer: function(tooltipItems, data) {
var sum = 0;
tooltipItems.forEach(function(tooltipItem) {
sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
});
return 'Sum: ' + sum;
}
}
}
}
});
<canvas id="line-chart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
I am trying to hide data labels generated by the data labels plugin for small screens.
I thought that I could use the onResize property of chartjs and set display to false when the width got small. This is much like the hide labels solution found here.
Unfortunately, I've not been able to get this to work. I have the following CodePen that doesn't work.
var moneyFormat = wNumb({
decimals: 0,
thousand: ',',
prefix: '$',
negativeBefore: '-'
});
var percentFormat = wNumb({
decimals: 0,
suffix: '%',
negativeBefore: '-'
});
/*
* Unregister chartjs-plugins-datalabels - not really necessary for this use case
*/
Chart.plugins.unregister(ChartDataLabels);
var doughnutdata = {
labels: ['Housing',
'Food',
'Transportation',
'Clothing',
'Healthcare',
'Childcare',
'Misc'],
datasets: [
{
backgroundColor: [
'#9B2A00',
'#5B5C90',
'#6B8294',
'#1A6300',
'#BE0000',
'#B8A853',
'#64A856'
],
borderColor: [
'#FFFFFF',
'#FFFFFF',
'#FFFFFF',
'#FFFFFF',
'#FFFFFF',
'#FFFFFF',
'#FFFFFF'
],
data: [88480, 57680, 40050, 18430, 23860, 25840, 17490]
}
]
};
var chartOptions = {
responsive: true,
maintainAspectRatio: true,
legend: {
labels: {
boxWidth: 20
}
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
var index = tooltipItem.index;
return data.labels[index] + ': ' + moneyFormat.to(data.datasets[0].data[index]) + '';
}
}
},
plugins: {
datalabels: {
anchor: 'end',
backgroundColor: function (context) {
return context.dataset.backgroundColor;
},
borderColor: 'white',
borderRadius: 25,
borderWidth: 1,
color: 'white',
font: {
size: 10
},
formatter: function (value, pieID) {
var sum = 0;
var dataArr = pieID.chart.data.datasets[0].data;
dataArr.map(function (data) {
sum += data;
});
var percentage = percentFormat.to((value * 100 / sum));
return percentage;
}
}
}
};
var doughnutID = document.getElementById('doughnutchart').getContext('2d');
var pieChart = new Chart(doughnutID, {
plugins: [ChartDataLabels],
type: 'doughnut',
data: doughnutdata,
options: chartOptions,
onResize: function(chart, size) {
var showLabels = (size.width < 500) ? false : true;
chart.options = {
plugins: {
datalabels: {
display: showLabels
}
}
};
}
});
Any ideas concerning what I'm doing wrong (and fixes) would be greatly appreciated.
Responsiveness can be implemented using scriptable options and in your case, you would use a function for the display option that returns false if the chart is smaller than a specific size. (Example):
options: {
plugins: {
datalabels: {
display: function(context) {
return context.chart.width > 500;
}
}
}
}
As usual, as soon as I post a question I come up with an answer. One solution using inline plugin definitions is given at the following CodePen. If you put a browser into developer mode and shrink the window to less than 540 px, the data labels will vanish.
The code is shown below:
"use strict";
/* global Chart */
/* global wNumb */
/* global ChartDataLabels */
/*
* Unregister chartjs-plugins-datalabels - not really necessary for this use case
*/
Chart.plugins.unregister(ChartDataLabels);
var moneyFormat = wNumb({
decimals: 0,
thousand: ",",
prefix: "$",
negativeBefore: "-"
});
var percentFormat = wNumb({
decimals: 0,
suffix: "%",
negativeBefore: "-"
});
var doughnutdata = {
labels: [
"Housing",
"Food",
"Transportation",
"Clothing",
"Healthcare",
"Childcare",
"Misc"
],
datasets: [
{
backgroundColor: [
"#9B2A00",
"#5B5C90",
"#6B8294",
"#1A6300",
"#BE0000",
"#B8A853",
"#64A856"
],
borderColor: [
"#FFFFFF",
"#FFFFFF",
"#FFFFFF",
"#FFFFFF",
"#FFFFFF",
"#FFFFFF",
"#FFFFFF"
],
data: [88480, 57680, 40050, 18430, 23860, 25840, 17490]
}
]
};
var chartOptions = {
responsive: true,
maintainAspectRatio: true,
legend: {
labels: {
boxWidth: 20
}
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var index = tooltipItem.index;
return (
data.labels[index] +
": " +
moneyFormat.to(data.datasets[0].data[index]) +
""
);
}
}
},
plugins: {
datalabels: {
anchor: "end",
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderColor: "white",
borderRadius: 25,
borderWidth: 1,
color: "white",
font: {
size: 10
},
formatter: function(value, pieID) {
var sum = 0;
var dataArr = pieID.chart.data.datasets[0].data;
dataArr.map(function(data) {
sum += data;
});
var percentage = percentFormat.to(value * 100 / sum);
return percentage;
}
}
}
};
var doughnutID = document.getElementById("doughnutchart").getContext("2d");
var pieChart = new Chart(doughnutID, {
plugins: [
ChartDataLabels,
{
beforeLayout: function(chart) {
var showLabels = (chart.width) > 500 ? true : false;
chart.options.plugins.datalabels.display = showLabels;
}
},
{
onresize: function(chart) {
var showLabels = (chart.width) > 500 ? true : false;
chart.options.plugins.datalabels.display = showLabels;
}
}
],
type: "doughnut",
data: doughnutdata,
options: chartOptions
});
I hope that this is useful.
I have this chart below, I want to scale the Y axis using the TIME (the time isn't time of day it is total hours,mins, seconds so could be over 24 hours) just can't seem to get it to work, all I get is a blank screen, sure it's a syntax error but can't spot it! Thanks
var ctx = document.getElementById("myChart3").getContext('2d');
var myChart3 = new Chart(ctx, {
type: 'line',
data: {
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"],
datasets: [
{
label: "Time",
backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850", "#565452", "#321456", "#129864", "#326812", "#215984"],
data: ["11:46:07", "11:41:14", "11:55:26", "12:14:58", "11:54:55", "11:54:04", "12:28:29", "12:35:18"]
}
]
},
options: {
scales: {
yAxes: [{
type: 'time',
time: {
displayFormats: {
minutes: 'h:mm:ss a'
}
}
}]
}
}
});
Time scale works only for X axis.
It can only be placed on the X axis.
But for Y you can use a linear scale and express each time as date in milliseconds since 1970-01-01 (how the usual Date object does).
PLUNKER or use the following example:
$(function(){
const ctx = document.getElementById('myChart').getContext('2d');
let years = ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"];
let times = ["11:46:07", "11:41:14", "11:55:26", "12:14:58", "11:54:55", "11:54:04", "12:28:29", "12:35:18"];
let data = years.map((year, index) => ({
x: moment(`${year}-01-01`),
y: moment(`1970-02-01 ${times[index]}`).valueOf()
}));
let bckColors = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850", "#565452", "#321456", "#129864", "#326812", "#215984"];
let myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: "Time",
backgroundColor: 'rgba(188, 229, 214, 0.7)',
pointBackgroundColor: bckColors,
data: data,
pointBorderWidth: 2,
pointRadius: 5,
pointHoverRadius: 7
}
]
},
options: {
scales: {
xAxes: [
{
type: 'time',
position: 'bottom',
time: {
displayFormats: {
years: 'YYYY'
},
unit: 'year'
}
}
],
yAxes: [
{
type: 'linear',
position: 'left',
ticks: {
min: moment('1970-02-01 00:00:00').valueOf(),
max: moment('1970-02-01 23:59:59').valueOf(),
stepSize: 3.6e+6,
beginAtZero: false,
callback: value => {
let date = moment(value);
if(date.diff(moment('1970-02-01 23:59:59'), 'minutes') === 0) {
return null;
}
return date.format('h A');
}
}
}
]
}
}
});
});
<html>
<head>
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/moment#2.14.1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart" width="500" height="300"></canvas>
</body>
</html>
Explanation
You can have the years on X axis which can be a linear, time or category scale.
In this example X axis is a time scale.
The following code is used to generate values for X and Y axis:
let data = years.map((year, index) => ({
x: moment(`${year}-01-01`),
y: moment(`1970-02-01 ${times[index]}`).valueOf()
}));
For X axis I used moment js to create a date on the first day of the corresponding year.
For Y axis I used moment js to create the date in milliseconds since 1970-01-01. In this case all hours are combined with a day to form a date. 1970-02-01 in order to prevent an edge cases that may happen for 1970-01-01. Then these milliseconds, since 1970-01-01, are used with the Y axis linear scale.
Y axis tick.callback is used to format the corresponding milliseconds to an hour. Thus using the format h A to obtain for example 1 AM, 1 PM, 12 AM, 12 PM, ....
Using ChartJs (v2.2.2) can you change the line style between the last 2 points on a graph. e.g. have a solid line all the way and then dashed at the end? see picture below
The borderDashproperty (scroll to Line Configuration) is the key to your problem.
The thing is, the full chart is drawn with a border dash, you cannot choose where it starts and where it ends.
A simple workaround is to create two identical datasets. One dotted and one with a plain line. Then you remvoe the last data of your plain one, and they both will be displayed as how you want it.
You can see the full code in this jsFiddle, and here is its result :
Note :
Since there are two datasets now, the legend will display both of them. Setting the display to false fixes it (more or less).
The declaration order doesn't matter since the plain line will always overwrite the dotted one.
Having a bezier curve (tension property > 0) can create a display problem since the data is not the same in both datasets.
You can create a scatter chart and draw the lines directly on the canvas using the Plugin Core API. The API offers a range of hooks that can be used for performing custom code. The advantage of this approach is that you can customize the style of every single connection line (width, color, dash pattern etc.).
const labels = [1, 2, 3, 4, 5, 6];
const values = [12, 19, 3, 5, 2, 3];
const data = labels.map((label, index) => ({ x: label, y: values[index]}));
var lineChart = new Chart(document.getElementById("chart"), {
type: "scatter",
plugins: [{
afterDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-1'];
var yAxis = chart.scales['y-axis-1'];
chart.config.data.datasets[0].data.forEach((value, index) => {
if (index > 0) {
var valueFrom = data[index - 1];
var xFrom = xAxis.getPixelForValue(valueFrom.x);
var yFrom = yAxis.getPixelForValue(valueFrom.y);
var xTo = xAxis.getPixelForValue(value.x);
var yTo = yAxis.getPixelForValue(value.y);
ctx.save();
ctx.strokeStyle = '#922893';
ctx.lineWidth = 2;
if (index + 1 == data.length) {
ctx.setLineDash([5, 10]);
}
ctx.beginPath();
ctx.moveTo(xFrom, yFrom);
ctx.lineTo(xTo, yTo);
ctx.stroke();
ctx.restore();
}
});
}
}],
data: {
datasets: [{
label: "My Dataset",
data: data,
borderColor: '#922893',
pointBackgroundColor: "transparent"
}]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
ticks: {
stepSize: 1
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="90"></canvas>
const labels = [1, 2, 3, 4, 5, 6];
const values = [12, 19, 3, 5, 2, 3];
const data = labels.map((label, index) => ({ x: label, y: values[index]}));
var lineChart = new Chart(document.getElementById("chart"), {
type: "scatter",
plugins: [{
afterDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-1'];
var yAxis = chart.scales['y-axis-1'];
chart.config.data.datasets[0].data.forEach((value, index) => {
if (index > 0) {
var valueFrom = data[index - 1];
var xFrom = xAxis.getPixelForValue(valueFrom.x);
var yFrom = yAxis.getPixelForValue(valueFrom.y);
var xTo = xAxis.getPixelForValue(value.x);
var yTo = yAxis.getPixelForValue(value.y);
ctx.save();
ctx.strokeStyle = '#922893';
ctx.lineWidth = 2;
if (index + 1 == data.length) {
ctx.setLineDash([5, 10]);
}
ctx.beginPath();
ctx.moveTo(xFrom, yFrom);
ctx.lineTo(xTo, yTo);
ctx.stroke();
ctx.restore();
}
});
}
}],
data: {
datasets: [{
label: "My Dataset",
data: data,
borderColor: '#922893',
pointBackgroundColor: "transparent"
}]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
ticks: {
stepSize: 1
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="90"></canvas>