Chartjs-plugin-datalabels: Apply datalabels to specific datasets

[jedskie]

Hi, thanks for this awesome plugin in chartjs. I've read the docs but can't seems to find it even in the samples. I have this mixed chart with bar graphs and line graph, what I want is to add the datalabels in specific datasets and not to the whole chart. Can you give me an example as I have no idea on what to do. BTW, thanks!

[simonbrunel]

That should be possible by disabling labels for all datasets via the plugin options at the chart level using the display option, then enable labels per dataset at the dataset level (dataset.datalabels.*):

new Chart('id', {
  data: {
    datasets: [{
      // no datalabels for this dataset
    }, {
        datalabels: {
          // display labels for this specific dataset
          display: true
        }
    }
  },
  options: {
    plugins: {
      datalabels: {
         // hide datalabels for all datasets
         display: false
      }
    }
  }
})

You can also globally disable labels for all charts using:

// Globally disable datalabels
Chart.defaults.global.plugins.datalabels.display = false

[jedskie]

Thanks for the super quick reply. Your solution works like a charm! Thanks for this great plugins, maybe you can include this in your live samples. Here is my js script for others reference. Thanks again!

barChartData = {
    labels : [chartlabels],
    datasets : [
    {
        type : 'line',
        yAxisID : 'A',
        fill: false,
        label : ' Increase Rate',
        backgroundColor : "#CCC",
        borderColor : "#CCC",
        data : [data],
        datalabels : {
            align   : 'end',
            anchor : 'end',
            display: true,
            backgroundColor: function(context) {
                return context.dataset.backgroundColor;
            },
            borderRadius: 4,
            color: '#001f3f',
            font: {
                weight: 'bold'
            }
        }
    },
    {
        label : "Delivered",
        backgroundColor : "#AAA",
        borderColor : "#AAA",
        data : [data]
    }]
};

mybar = new Chart(ctx, {
       type: 'bar',
       data: barChartData,
       options: {
            plugins: {
        datalabels: {
            display: false
        }
         },
     }
});

[simonbrunel]

Great idea, I will update the documentation and certainly add a new sample.

[simonbrunel]

It's also possible to disable labels for a specific dataset by setting datalabels.display: false at the dataset level (@StarAzure) (fiddle)

datasets: [{
  datalabels: {
    display: false
  }
}]

[avjgit]

You can hide datalabels for, for example, line charts only (and show for bar and other types):

plugins: {
    datalabels: {
        display: your_chart_type_setting_variable != 'line'
    }
}

[richill]

how do you show text content within datalabels?