How Do I Create A Legend For A Bar Chart?

How do I create legends like the following: So far I have the following: I can't figure out how to specify labels for the legend. They don't provide examples either. https://www.

Solution 1:

To show a legend you need to set the label property of a dataset, so the type of output you are expecting can be built by creating a chart from the code as shown below. Fiddle -> https://jsfiddle.net/6nkcx8sq/

vartopClickSourcesChart=newChart('dashboard-click-source-chart', {
    type:'bar',
    data: {
      labels: ["Number of users"],
      datasets: [{
        label:'Facebook',
        data: [10],
        backgroundColor:'#4D90C3',
      },
      {
        label:'Instagram',
        data: [15],
        backgroundColor:'#866DB2',
      },
      {
        label:'Twitter',
        data: [7],
        backgroundColor:'#EA6F98',
      }],
    },
    options: {
        scales: {
            xAxes: [{
                display:false,
            }],
            yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
        },
        legend: {
            position:'right',
            labels: {
                boxWidth:10,
            }
        }
    }
});

Solution 2:

I was able to get it with the following, but it was a pain in the ass for loops due to the backgroundColor having to be inside the dataset.

var topClickSourceChart = new Chart('dashboard-click-source-chart', {
    type: 'bar',
    data: {
      labels: ["Facebook","Google","NONE",],
      datasets: [
          {label: "Facebook", data: [10]},{label: "Google", data: [5]},{label: "NONE", data: [3]},
      ]
    },
    options: {
        scales: {
            xAxes: [{
                display: false,
            }],
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                }
            }]
        },
        legend: {
            position: 'right',
            labels: {
                boxWidth: 10,
            }
        }
    }
});
if (topClickSourceChart.data.datasets.length > 0) topClickSourceChart.data.datasets[0].backgroundColor = '#4D90C3';
if (topClickSourceChart.data.datasets.length > 1) topClickSourceChart.data.datasets[1].backgroundColor = '#866DB2';
if (topClickSourceChart.data.datasets.length > 2) topClickSourceChart.data.datasets[2].backgroundColor = '#EA6F98';
if (topClickSourceChart.data.datasets.length > 3) topClickSourceChart.data.datasets[3].backgroundColor = '#61BDF6';
if (topClickSourceChart.data.datasets.length > 4) topClickSourceChart.data.datasets[4].backgroundColor = '#768BB7';

Here is the JSP/JSTL loop:

data: {
  labels: [<c:forEach items="${clickSources}"var="cs">"${cs.key}",</c:forEach>],
  datasets: [
      <c:forEach items="${clickSources}"var="cs">{label: "${cs.key}", data: [${cs.value}]},</c:forEach>
  ]
},

I still could not find a way to make the top of the bars rounded.