chartjs-plugin-trendline
Version:
Trendline for Chart.js
111 lines (107 loc) • 4.39 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>LineChart Example with Labeled Trendlines</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.js"></script>
<script src="./../src/chartjs-plugin-trendline.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function (event) {
new Chart(document.getElementById('line-chart'), {
type: 'line',
data: {
labels: [
1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950,
1999, 2050,
],
datasets: [
{
data: [
86, 114, 106, 106, 107, 111, 133, 221, 783,
2478,
],
label: 'Africa',
borderColor: '#3e95cd',
fill: false,
trendlineLinear: {
colorMin: '#3e95cd',
width: 1,
lineStyle: 'solid',
},
},
{
data: [
282, 350, 411, 502, 635, 809, 947, 1402,
3700, 5267,
],
label: 'Asia',
borderColor: '#8e5ea2',
fill: false,
trendlineLinear: {
colorMin: 'red',
colorMax: 'green',
lineStyle: 'dashed',
width: 1,
label: {
font: {
size: 12,
},
color: 'red',
text: 'Asia',
displayValue: false,
offset: 10,
},
legend: {
color: 'red',
text: 'Asian trendline',
display: true,
lineDash: [8, 3],
},
},
},
{
data: [
168, 170, 178, 190, 203, 276, 408, 547, 675,
734,
],
label: 'Europe',
borderColor: '#3cba9f',
fill: false,
},
{
data: [
40, 20, 10, 16, 24, 38, 74, 167, 508, 784,
],
label: 'Latin America',
borderColor: '#e8c3b9',
fill: false,
},
{
data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
label: 'North America',
borderColor: '#c45850',
fill: false,
},
],
},
options: {
plugins: {
title: {
display: true,
text: 'World population per region (in millions)',
},
},
},
});
});
</script>
</head>
<body>
<h1>Line Chart with Labeled Trendlines</h1>
<div style="width: 800px">
<canvas id="line-chart"></canvas>
</div>
</body>
</html>