How to Create Annotation On Chart.js Using the Additional Library

In many cases, sometimes we need a Chart view that can explain in full the information needed. You may often use the threshold as a reference in achieving something.

In this post, I will try to use the threshold in a Chart that serves as a tool in presenting information that is easy to understand.

Like the previous post, I still use Chart.js as the Chart library to present data sets visually. Here I use an additional library called Chart Plugins Annotation. You can download it here.

After successfully downloading it, you can insert it into your project as a library. Then we can add a few lines in javascript to determine the threshold value. In this case, I tried to give a threshold value of 70.

$(function() {
    var color = Chart.helpers.color;
    var UserVsMyAppsData = {
        labels: ['29 Sep 2019','30 Sep 2019','01 Oct 2019','02 Oct 2019','03 Oct 2019','04 Oct 2019','05 Oct 2019'],
        datasets: [{
            label: 'Users',
            backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
            borderColor: window.chartColors.red,
            borderWidth: 1,
            data: [53,117,79,56,45,89,61]
        }, {
            label: 'My Users',
            backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
            borderColor: window.chartColors.blue,
            borderWidth: 1,
            data: [43,105,76,50,33,97,52]
        }]
 
    };
 
    var UserVsMyAppsCtx = document.getElementById('UsersVsMyUsers').getContext('2d');
    var UserVsMyApps = new Chart(UserVsMyAppsCtx, {
        type: 'bar',
        data: UserVsMyAppsData,
        options: {
            responsive: true,
            legend: {
                position: 'bottom',
                display: true,
 
            },
            "hover": {
              "animationDuration": 0
            },
             "animation": {
                "duration": 1,
              "onComplete": function() {
                var chartInstance = this.chart,
                  ctx = chartInstance.ctx;
 
                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';
 
                this.data.datasets.forEach(function(dataset, i) {
                  var meta = chartInstance.controller.getDatasetMeta(i);
                  meta.data.forEach(function(bar, index) {
                    var data = dataset.data[index];
                    ctx.fillText(data, bar._model.x, bar._model.y - 5);
                  });
                });
              }
            },
            title: {
                display: false,
                text: ''
            },
            annotation: {
              annotations: [{
                type: 'line',
                mode: 'horizontal',
                scaleID: 'y-axis-0',
                value: 70, // SET THRESHOLD
                borderColor: 'rgb(75, 192, 192)',
                borderWidth: 4,
                label: {
                  enabled: false,
                  content: 'Threshold'
                }
              }]
            }
        }
    });
});

After the line is added, we see in the web browser that the threshold is visible.

Chart with the threshold value

Thank you for reading my post! Happy Coding!