Chart.js Elements Configuration

Chart.js Elements Configuration provides us with the option to configure four types of elements: arcs, lines, points, and bars. Developers can use the options provided by Elements Configuration to customize these elements to change the appearance and behavior of the charts that meet their requirements.

Syntax:

let ctx = document.getElementById('myChart').getContext('2d');
let myChart = new Chart(ctx, {
    type: 'chartType',
    data: {
        // chart data here
    },
   options: {
    elements: {
       { /* element to configure */ }: {
           // configuration options here
        }
    }
}
});

Point Configuration

Point elements represent individual points in line, radar, or bubble charts, we can customize points in our charts using the options provided below.

These are the following options available to customize a point:

• radius: takes “number” as a value
• pointStyle: takes “string” or “image” as a value
• rotation: takes “number” as a value
• backgroundColor: takes “string” as a value
• borderWidth: takes “number” as a value
• borderColor: takes “string” as a value
• hitRadius: takes “number” as a value
• hoverRadius: takes “number” as a value
• hoverBorderWidth: takes “number” as a value

Line Configuration

Line elements represent the lines connecting data points in a line chart. we can customize lines in our charts using the options provided below.

These are the following options available to customize lines:

• tension: This parameter controls the “curviness” of a line in a line chart.
• backgroundColor: This option sets the background color of the chart element.
• borderWidth: It defines the width of the border around the chart element.
• borderColor: This property sets the color of the border around the chart element.
• borderCapStyle: Specifies the style for the ends of the lines in the chart element.
• borderDash: An array of values that specify the pattern of dashes and gaps used in the border.
• borderDashOffset: This property sets the phase offset (in pixels) for the dash pattern specified by the borderDash property.
• borderJoinStyle: Defines the style for the joins between line segments in the chart element.
• capBezierPoints: If set to true, it ensures that the control points for the Bezier curve at the end of the line chart are positioned on the line.
• cubicInterpolationMode: Specifies the algorithm used to interpolate values for data points in a line chart.
• fill: Determines whether the area under the line chart should be filled with color.
• stepped: If set to true, the line chart uses a stepped interpolation between points.

Bar Configuration

Bar elements represent the bars in a bar chart. we can customize bars in our charts using options provided below.

These are the following options available to customize bar:

• backgroundColor: Similar to the previous explanation, this property sets the background color of the chart element.
• borderWidth: Specifies the width of the border around the chart element, measured in pixels.
• borderColor: Determines the color of the border around the chart element.
• borderSkipped: This property controls which borders should be skipped for the chart element.
• borderRadius: Defines the radius of the rounded corners for the chart element.
• inflateAmount: Specifies the amount by which to inflate the bounding box of the chart element.
• pointStyle: Sets the style of the points in the chart.

Arc Configuration

Arcs are used in polar area, doughnut, and pie charts. we can customize Arcs in our charts using options provided below.

These are the following options available to customize arc:

• angle: This property is typically associated with polar area charts.
• backgroundColor: Similar to the previous explanations, this property sets the background color of the chart element.
• borderAlign: In certain chart types, like bar charts, this property determines whether the borders are aligned to the center of the bars or the edges.
• borderColor: Specifies the color of the border around the chart element.
• borderDash: An array of values that determine the pattern of dashes and gaps used in the border.
• borderDashOffset: Specifies the phase offset (in pixels) for the dash pattern specified by the borderDash property.
• borderJoinStyle: Defines the style for the joins between line segments in the chart element.
• borderWidth: Determines the width of the border around the chart element, measured in pixels.
• circular: For certain types of charts, like radar charts, this property specifies whether the chart should be circular or not. If set to true, the chart is circular; otherwise, it may have a different shape.

Example: In this example, a line chart using Chart.js is created to visualize monthly sales data with custom point styling.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Chart.js Example</title>
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
      </script>

<body>
    <canvas id="myChart" width="400" height="200">
    </canvas>
    <script>

        let ctx =
            document.getElementById('myChart').getContext('2d');

        let myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['January',
                    'February',
                    'March',
                    'April',
                    'May'],
                datasets: [{
                    label: 'Monthly Sales',
                    data: [12, 19, 3, 5, 2],
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 3,
                    pointBackgroundColor: 'rgba(255, 99, 132, 1)',
                    pointBorderColor: 'rgba(255, 99, 132, 1)',
                    pointRadius: 6,
                    pointHoverRadius: 8,
                }]
            },
            options: {
                elements: {
                    point: {
                        pointStyle: 'triangle',
                        rotation: 45,
                    },
                    line: {
                        tension: 0.2,
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        }
        );

    </script>
</body>

</html>

Output:

Example 2: In this example, a customized doughnut chart is created using Chart.js, featuring distinct arcs with a specified angle.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Customized Arc Example</title>
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
      </script>
</head>

<body>
    <canvas id="myChart"
            width="400"
            height="200">
      </canvas>

    <script>
        let ctx = document
                .getElementById('myChart')
                .getContext('2d');

        let myChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ['Red',
                         'Blue',
                         'Yellow'],
                datasets: [{
                    data: [30, 50, 20],
                    backgroundColor: ['rgba(255, 99, 132, 0.7)',
                                      'rgba(54, 162, 235, 0.7)',
                                      'rgba(255, 255, 0, 0.7)'],
                }]
            },
            options: {
                elements: {
                    arc: {
                        angle: Math.PI / 4,
                        backgroundColor: 'rgba(75, 192, 192, 0.5)',
                        borderWidth: 3,
                        borderColor: '#fff',
                        borderAlign: 'inner',
                        borderDash: [5, 5],
                        borderDashOffset: 2,
                    }
                }
            }
        });
    </script>
</body>

</html>

Output: