Chart.js Line Chart

Chart.js line chart is a visual representation of data points connected by straight lines, depicting trends or patterns in a dataset over time or categories.

Syntax:

 let myBarChart = new Chart(ctx, { 
 type: 'line', 
 data: data, 
 options: options 
});

Dataset Properties

• borderCapStyle - Cap style of the line
• backgroundColor - it is used to fill the line.
• borderColor - it colors the lines.
• borderDash - Length and spacing of dashes
• borderJoinStyle - Line joint style
• fill - How to fill the area under the line
• showLine - If false, the line is not drawn for this dataset.
• spanGaps - If true, lines will be drawn between points with no or null data.
• options - it configures the whole chart like
• Scales - represents the units used on the graph.

Point Styling

• pointBackgroundColor - The fill color for points.
• pointBorderColor - The border color for points.
• pointBorderWidth - The width of the point border in pixels.
• pointHitRadius - The pixel size of the non-displayed point that reacts to mouse events.
• pointRadius - The radius of the point shape. If set to 0, the point is not rendered.
• pointRotation - The rotation of the point in degrees.
• pointStyle - Style of the point

Interactions

• pointHoverBackgroundColor - Point background color when hovered.
• pointHoverBorderColor - Point border color when hovered.
• pointHoverBorderWidth - Border width of point when hovered.
• pointHoverRadius - The radius of the point when hovered.

CDN link

https://cdn.jsdelivr.net/npm/chart.js

Example 1: In this example, code shows a simple line chart with different colors.

Output:

Example 2: In this example, code shows a line chart with styles in different form of lines style and with different colors.

Output: