[Chartjs]-Chart.js Y axis label, reverse tooltip order, shorten X axis labels

by

22👍

✅

1. Adding a Y-axis label

in the yAxes object give it a scaleLabel object that takes in labelString (example fiddle)

yAxes: [{
    scaleLabel: {
      labelString: 'Value'
    }
 }]

2. Shortening xAxis category labels

For this, you can pass a userCallback function to the xAxis ticks object that can return your desired output. The function will take in the original label in its first parameter so you can just return a substring at your desired length, example fiddle

 xAxes: [{
    ticks: {
      userCallback: function(label, index, labels) {
        if(typeof label === "string")
        {
         return label.substring(0,1)
        }
        return label;

      },
    }
  }],

3. reverse tooltip order

The tooltips object accepts a function called itemSort that can be passed to Array.prototype.sort.

So you could so something like below, but you may also need to compare the objects index as well as the datasetIndex to get your desired result. (example fiddle)

tooltips: {
  mode: 'label',
  itemSort: function(a, b) {
    return b.datasetIndex - a.datasetIndex
  },

},

Leave a comment