Chart.js - How can i add a legend?

Question

I have the following code to generate a Bar chart with chart.js . Now i want a Legend for each bar.

1 = CP, 2= AA,...

How can i do that ?

$(document).ready(function() {
  initData();
});

function initData() {
  loadChartVorselektion();
}

function loadChartVorselektion() {
  var randomScalingFactor = function() {
    return Math.round(Math.random() * 70)
  };

  var orders = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];

  var barChartData = {
    labels: orders,

    datasets: [{
      label: "Order",
      fillColor: "rgba(0, 62, 76,0.8)",
      highlightFill: "rgba(151,187,205,0.75)",
      data: [6, randomScalingFactor(), randomScalingFactor(),
        randomScalingFactor(), randomScalingFactor(),
        randomScalingFactor(), randomScalingFactor(),
        randomScalingFactor(), 5, 6
      ]
    }]

  }

  window.onload = function() {
    var ctx = document.getElementById("canvas").getContext("2d");

    Chart.types.Bar.extend({
      name: "BarAlt",
      initialize: function(data) {
        Chart.types.Bar.prototype.initialize.apply(this, arguments);
      },
      draw: function() {
        Chart.types.Bar.prototype.draw.apply(this, arguments);
        this.chart.ctx.beginPath();
        this.chart.ctx.beginPath();
        this.chart.ctx.moveTo(25, 50);
        this.chart.ctx.lineTo(1000, 50);
      }
    });

    var chart = new Chart(ctx).BarAlt(barChartData, {

      responsive: true,
      animation: true,
      barValueSpacing: 5,
      barDatasetSpacing: 1,
      tooltipFillColor: "rgba(0,0,0,0.8)",
      // multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
      tooltipTemplate: function(valuesObject) {
        console.log(valuesObject);

        var label = valuesObject.label
        var objLen = label.length;
        var string = label.substring(0, objLen);

        console.log(string);
        return "Dummy: " + string;
      },

    });
  }
}

What i get is this:

As you can see, only the bar and the numbers under each bar is shown. So what must i do, that i get a legend?

Answer 1

I am not sure what you mean by 'legend for each bar' but I'm guessing what you want to do is replace the numbers with text.

You can have an object that holds key value pairs so that effectively each number corresponds to a word.

Then you have to specify a custom label with logic that parses the number to its word.

You can do that using scales and ticks in ChartJS

This is your key value pair object:

var xLabels = {
    1 : 'HELLO',
    2 : 'THERE',
    3 : 'MY',
    4 : 'FRIEND'
}

And this is what the options will have to look like:

 options: {
   scales: {
     xAxes: [{
       ticks: {
         callback: function (value, index, values) {
           return xLabels[value];
         }
       }
     }]
   }
 }

Here is a fiddle example:

https://jsfiddle.net/7dxp2qzo/