By Customizing Legend label Configuration

Approach 1: By Customizing Legend Title Configuration

Approach 3: By Customizing Legend on-click actions

In Chart.js, the legend label configuration refers to the settings that control the appearance and behavior of individual labels within the legend. Each label typically corresponds to a dataset in the chart. You can customize legend dataset labels within your dataset in this manner.

Syntax:

    const ctx = document.getElementById('myChart');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [{
          label: 'Legend Label 1',  
          data: [10, 30, 20, 50, 40, 60],
          borderWidth: 3,   // Border of label block
          backgroundColor: 'lightgreen',  // Background color of label block
          borderColor: 'green',
        },
        // Other datasets..
        ]
      },
      options: {
        plugins: {
          legend: {
            display: true, 
            position: 'bottom', 
            labels: {
                font: {  // Customize legend label font
                    size: 14,
                    weight: 'italic',
                    padding: 10
                }
            }
          } 
        }
      }
    });

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background-color: rgb(239, 237, 237);
        }
    </style>
    <title>Chart</title>
</head>
 
<body>
    <div>
        <canvas id="myChart"></canvas>
    </div>
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const ctx = document.getElementById('myChart');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['January', 'February', 'March',
                    'April', 'May', 'June'],
                datasets: [{
                    label: 'Legend Label 1',
                    data: [10, 30, 20, 50, 40, 60],
                    borderWidth: 3,
                    backgroundColor: 'lightgreen',
                    borderColor: 'green',
                },
                {
                    label: 'Legend Label 2',
                    data: [45, 15, 60, 30, 75, 90],
                    borderWidth: 3,
                    backgroundColor: 'lightblue',
                    borderColor: 'blue',
                }]
            },
            options: {
                plugins: {
                    legend: {
                        display: true,
                        position: 'bottom',
                        labels: {
                            font: {
                                size: 14,
                                weight: 'italic',
                                padding: 10
                            }
                        }
                    }
                }
            }
        });
    </script>
</body>
 
</html>

Output:

How to Customize the Legend in Chart.js ?

In this article, we will learn how to customize the legend of a chart using the Chart JS CDN library. The chart legend displays data about the datasets that are appearing on the chart. This legend is customizable as per the users’ requirements to enhance the look and feel of the chart in conjunction with the chart layout.

CDN Link:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

These are the following ways to customize the Legend:

Table of Content

By Customizing Legend Title Configuration
By Customizing Legend label Configuration
By Customizing Legend on-click actions

Tags:

#Chart.js #Geeks Premier League 2023 #Geeks Premier League #JavaScript #Web Technologies