How do I show labels along with lines in Chart.js v3?

Question

Below is my code:

<!DOCTYPE html>
<html>
<head>
    <title> Example</title>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.1/chart.min.js"></script>
</head>
<body>
    <canvas id="myChart"></canvas>
    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'Line 1',
                    data: [65, 59, 80, 81, 56, 55, 40],
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 2
                },
                {
                    label: 'Line 2',
                    data: [28, 48, 40, 19, 86, 27, 90],
                    backgroundColor: 'rgba(153, 102, 255, 0.2)',
                    borderColor: 'rgba(153, 102, 255, 1)',
                    borderWidth: 2
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: false
                }
            }
        });
    </script>
</body>
</html>

And it displays the following:

I want to show Line1 and Line2 at the end of each lines.

winner_joiner · Answer 1 · 2023-01-20T08:45:40.857

Update added property clip: false, so that the labels a visible outside the chartArea (link to the documentation)

Out-of-the-box it is not possible as far as I know, but you could use a chart.js plugin like https://www.chartjs.org/chartjs-plugin-annotation/2.0.0/

Here a demo, how I would do this:

(You would have to tweak the position of the labels, check the documentation fr details)

const data = {
    labels: [1,2,3,4,5], 
    datasets: [{
        label: 'line-1',
        borderColor: '#36A2EB',
        backgroundColor: '#36A2EB',
        data: [50, 150, 180, 160, 100],
     },{
        label: 'line-2',
        borderColor: '#FF6384',
        backgroundColor: '#FF6384',
        data: [20, 110, 80, 190, 20],
     }
    ],
};

const config = {
     type: 'line',
    data: data,
    options: {
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'right',
            },
        
            annotation: {
              clip: false, // <-- Adding this property you can draw outside of the chart area
              annotations: {
                // Create them static
                label1: {
                  type: 'label',
                  xValue: 2,
                  yValue: 100,
                  backgroundColor: '#ffffff',
                  color: 'red',
                  content: ['static label'],
                
              }
            }
         }
      }
    }
};

// create them dynamic
data.datasets.forEach((item, index) => {
     config.options.plugins.annotation.annotations[item.label] = {
         type: 'label',
         xValue: data.labels.length-1.5,
         yValue: item.data[item.data.length-1],
         backgroundColor: '#ffffff',
         color: item.borderColor,
         content: [item.label],
         textAlign: 'start'
     }; 
})

new Chart(
    document.getElementById('chart'),
    config
);

<script src="//cdn.jsdelivr.net/npm/chart.js"></script>  
<script src="//cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/2.1.2/chartjs-plugin-annotation.min.js"></script>

<div class="chart" style="height:184px; width:350px;">
    <canvas  id="chart" ></canvas>
</div>

In this Demo I'm also showing how you could create the labels dynamically with the data from the chart, with this forEach loop. It is only a demo and would need some adjustments.

data.datasets.forEach((item, index) => {
   config.options.plugins.annotation.annotations[item.label] = {
     type: 'label',
     xValue: data.labels.length-1.5,
     yValue: item.data[item.data.length-1],
     backgroundColor: '#ffffff',
     color: item.borderColor,
     content: [item.label],
     textAlign: 'start'
   }; 
})

How do I show labels along with lines in Chart.js v3?

1 Answers1

Linked