How to show bar labels in legend in Chart.js 2.1.6?

Question

I'm creating charts using Chart.js and I want to show the labels for the bars in the legend, not the title of the dataset (there is only one), please see the below image as an example:

My current legend just looks like this:

I have looked through the docs but to no avail, I found them very confusing actually.

Here is my current code:

var chart_0 = new Chart($('#cp_chart_0'), {
      type: 'bar'
    , data: {
          labels: ['Blue','Green','Yellow','Red','Purple','Orange']
        , datasets: [{
              label: 'Dataset 1'
            , borderWidth: 0
            , backgroundColor: ['#2C79C5','#7FA830','#7B57C3','#ED4D40','#EC802F','#1DC6D3']
            , data: ['12','2','5','0','9','1']
        }]
      }
});

Thanks!

Answer 1

Easiest way is to provide your data with multiple sets :

  data: {
      labels: ['total votes']
    , datasets: [{
          label: 'Blue'
        , backgroundColor: ['#2C79C5']
        , data: ['12']
    },{
          label: 'Green'
        , backgroundColor: ['#7FA830']
        , data: ['2']
    },
    ...
    ]
  }

But you can generate a custom labels using generateLabels - http://www.chartjs.org/docs/#chart-configuration-legend-configuration

Or even customise the whole legend, including formatting, with legendCallback - http://www.chartjs.org/docs/#chart-configuration-common-chart-configuration

Answer 2

In one of the most recent releases of Chart.js 2.1.x, they added back this functionality. So go get the latest release first. Then insert the code below.

It is located under the options and legend. Here is how you use it:

options: {
    legend: {
        position: 'right'
    }
}