Check Out the Chart.js Course: Chart.js, The Missing Manual Course
Categories
Uncategorized

How to add data label only to the last data point of a line chart | Chart.js

Let’s explore how to add data label only to the last data point in Chart js 3. To do this we will need the use of the chartjs-plugin-datalabels or also known as the chartjs data labels plugin.

In Chartjs, chart.js or chart js you can do many things but for this we will use a plugin as this will extend the functionality of chart.js.

The video shows how

The video shows a nice breakdown of how to achieve this.

How to add data label only to the last data point of a line chart | Chart.js

With the use of the Chartjs Datalabels Plugin you can easily add datalabels. However, now we want to make sure we need to filter out all the other datalabels except the one that we want to display.

Video Summary:

To achieve this we must do a few steps.

  1. Create the chart js structure
  2. Register the [chartjs-plugin-datalabels] or the Data labels plugin in our chart object.
  3. Filter out with a callback the right dataset and data index or data point that matches with the data label.

Leave a Reply

Your email address will not be published. Required fields are marked *

en_USEnglish