<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Chart JS Line Chart </
title
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
div
>
<
h1
style
=
"color:green;"
>
GeeksforGeeks
</
h1
>
<
h3
>Chart JS Line Chart </
h3
>
<
div
>
<
canvas
id
=
"lineChartID"
></
canvas
>
</
div
>
</
div
>
<
script
>
const skipped = (ctx, value) => ctx.p0.skip
|| ctx.p1.skip ? value : undefined;
const down = (ctx, value) => ctx.p0.parsed.y >
ctx.p1.parsed.y ? value : undefined;
// Setting generic options
const genericOptions = {
fill: false,
interaction: {
intersect: false
},
radius: 0,
};
// Setting options in a line chart
new Chart($("#lineChartID"), {
type: 'line',
data: {
labels: [
'January', 'February', 'March',
'April', 'May', 'June', 'July'
],
datasets: [{
label: 'My Dataset',
data: [65, 71, 62, NaN, 34, 55, 47
],// End data
borderColor: 'green',
segment: {
borderColor: ctx => skipped(ctx,
'rgb(0,0,0,0.2)') ||
down(ctx, 'rgb(192,75,75)'),
borderDash: ctx => skipped(ctx, [6, 6]),
},
spanGaps: true
}]// End datasets
},// End data
options: genericOptions
});
</
script
>
</
body
>
</
html
>