chartjs-plugin-trendline
Version:
Trendline for Chart.js
61 lines (56 loc) • 2.24 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>BarChart Example</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.js"></script>
<script src="../dist/chartjs-plugin-trendline.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function (event) {
// Bar chart
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
data: [500, 1555, 650, 1555, 2505],
trendlineLinear: {
label: {
color: "#000",
text: "Trendline label",
display: true,
percentage: true,
offset: 10
},
colorMin: "rgba(255,105,180, .8)",
lineStyle: "dotted",
width: 2
}
},
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}
}
});
});
</script>
</head>
<body>
<h1>Bar Chart</h1>
<div style="width: 800px;">
<canvas id="bar-chart"></canvas>
</div>
<p>Using example code from <a href="http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/"
target="_blank">tobiasahlin.com.</a></p>
</body>
</html>