Just like the bar chart, you need to load the Chart.js JavaScript library, place a <canvas> object somewhere in the <body> of your page, and create a new chart referring to the ID of the canvas, and an object with the chart data. The chart object should specify line as the chart type. The following code is the minimum you need to create a line chart with the global defaults provided by Chart.js:
<html>
<head>
<script src=".../Chart.min.js"></script>
</head>
<body>
<canvas id="my-line-chart" width="400" height="200"></canvas>
<script>
const values =
[1.17,1.35,1.3,1.09,0.93,0.76,0.83,0.98,0.87,0.89,0.93,0.81];
const labels =
["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
const dataObj = {
labels: labels,
datasets: [{ data: values }]
}
const chartObj = {
type: "line",
data: dataObj
};
new Chart("my-line-chart", chartObj);
</script>
</body></html>
This data contains average global temperatures for 2016, obtained from NASA. The result is shown as follows. As you can see, the default line chart has a gray line and a gray fill. You can change these defaults using the options or dataset configurations. The full code is in LineArea/line-1.html:
Simple line chart with default Chart.js properties showing average global temperatures in 2016 (code: LineArea/line-1.html)