I am creating a stacked bar chart using Chart.js. However, I cannot find in the documentation how to change some things.

1. How to add a label on the Y axis.
2. How to shorten the label on the X axis so it displays only the first 10 letters.
3. How to reverse the order in which the values are shown in the tooltip.

Are these thigs are possible to implement?

I have marked what I want to change here.

Here are what my chart options look like now:

        var ctx = $("#newchart");

        var barGraph = new Chart(ctx, {
            type: 'bar',
            data: chartdata,
            options: {
                barValueSpacing: 20,
                tooltips: {
                    enable: true,
                    mode: 'label',
                    callbacks: {
                        label: function(tooltipItem, data){
                            var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
                            return datasetLabel + ': ' + Number(tooltipItem.yLabel) + ' Users';
                        }
                    }
                },
                responsive: true,
                segmentShowStroke: true,
                scales: {
                    xAxes: [{
                        display: false,
                        stacked: true,
                        ticks:{
                            stepSize : 10,
                        },
                        gridLines: {
                            lineWidth: 0,
                            color: "#9E9E9E"
                        }
                    }],
                    yAxes: [{
                        stacked: true,
                        ticks: {
                            min: 0,
                            stepSize: 10,
                        },
                        gridLines: {
                            lineWidth: 0,
                            color: "#9E9E9E"
                        }
                    }]
                }
            }
        });

I am creating a stacked bar chart using Chart.js. However, I cannot find in the documentation how to change some things.

1. How to add a label on the Y axis.
2. How to shorten the label on the X axis so it displays only the first 10 letters.
3. How to reverse the order in which the values are shown in the tooltip.

Are these thigs are possible to implement?

I have marked what I want to change here.

Here are what my chart options look like now:

        var ctx = $("#newchart");

        var barGraph = new Chart(ctx, {
            type: 'bar',
            data: chartdata,
            options: {
                barValueSpacing: 20,
                tooltips: {
                    enable: true,
                    mode: 'label',
                    callbacks: {
                        label: function(tooltipItem, data){
                            var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
                            return datasetLabel + ': ' + Number(tooltipItem.yLabel) + ' Users';
                        }
                    }
                },
                responsive: true,
                segmentShowStroke: true,
                scales: {
                    xAxes: [{
                        display: false,
                        stacked: true,
                        ticks:{
                            stepSize : 10,
                        },
                        gridLines: {
                            lineWidth: 0,
                            color: "#9E9E9E"
                        }
                    }],
                    yAxes: [{
                        stacked: true,
                        ticks: {
                            min: 0,
                            stepSize: 10,
                        },
                        gridLines: {
                            lineWidth: 0,
                            color: "#9E9E9E"
                        }
                    }]
                }
            }
        });

• javascript
• jquery
• chart.js
• chart.js2

1 Answer 1

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
  },

},