[Chartjs]-Charts.js – Display data label only for the last value

by

3👍

This can be done with the DataLabels Plugin.

Add the JS file to your HTML:

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>

Note: be sure to add it below the Chart.js script include.

Enable the datalabels plugin and add a custom labels formatter to the options configuration object:

plugins: {
    datalabels: {
        formatter: function(value, context) {
            if (context.dataIndex === context.dataset.data.length - 1)
            {
                return value.y;
            }
            return "";
        }
    },
}

0👍

Using DataLabels Plugin, as pointed out by @chuck in one of the comments. display is the way to go.

plugins: {
    datalabels: {
        display: function(value, context) {
            return context.dataIndex === context.dataset.data.length - 1;
        }
    },
}

-1👍

To show only that last points, you could just unset the unneeded data (json array).

To do so, (dont know what kind of data source you got) loop throught the array and use

unset($my_var["key_of_value_to_delete"]);

Normal array:

delete array[0];

Best thing to do would be: Only retrieve the data you really need. Send your Server-Request in the way, you only get the results you really need.
Keywords:

Queries and filtering

Leave a comment