How can I show chartjs datalabels only last bar?

Question

I need to show the last bar value only. like this image:

I try this code but it shows all values.

var dataX = {
        labels: [['Personne', 'seule'], ['Couple sans', 'enfant'], ['Couple avec', 'enfant(s)'], ['Famille', 'monoparentale'], 'Autres'],
        datasets: [{
            label: 'Data 1',
            data: [33,28,25,8,2.5],
            backgroundColor: '#00BBF1',
            borderWidth: 0
        },
        {
            label: 'Data 2',
            data: [29,30,30,8,2],
            backgroundColor: '#3CC6F4',
            borderWidth: 0
        },
        {
            label: 'Data 3',
            data: [41,22,22,11,3],
            backgroundColor: '#92D9F8',
            borderWidth: 0
        }]
    };

var optionsX = {
        tooltips: {
            enabled: false
        },
        responsive: true,
        maintainAspectRatio: false,
        legend: false,  
        scales: {
            xAxes: [{
                gridLines : {
                    color: "#fff"
                },
            }],
            yAxes: [{
                gridLines : {
                    display : false
                },
                ticks: {    
                    min: 0,
                    max: 50,
                    stepSize: 10,
                    callback: function(value) {
                        return value + "%"
                    },
                }
            }]
        },
        plugins: {
            datalabels: {
                color: '#59595B',
                font: {
                    weight: 'bold',
                    size: 14,
                },
                align: 'end',
                anchor: 'end',
                formatter: function(value, context) {
                    return value +'%';
                }
            }
        },
    };
    
var ctx = document.getElementById('chart-one');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: dataX,
    options: optionsX
});

uminder uminder · Accepted Answer · 2020-09-06T09:53:42

You can change the plugins.datalabels.formatter function as follows:

plugins: {
  ...
  datalabels: {
    formatter: (value, context) => context.datasetIndex == 2 ? value + '%' : ''
  }
}

Please take a look at your amended code below and see how it works.

var dataX = {
  labels: [
    ['Personne', 'seule'],
    ['Couple sans', 'enfant'],
    ['Couple avec', 'enfant(s)'],
    ['Famille', 'monoparentale'], 'Autres'
  ],
  datasets: [{
      label: 'Data 1',
      data: [33, 28, 25, 8, 2.5],
      backgroundColor: '#00BBF1',
      borderWidth: 0
    },
    {
      label: 'Data 2',
      data: [29, 30, 30, 8, 2],
      backgroundColor: '#3CC6F4',
      borderWidth: 0
    },
    {
      label: 'Data 3',
      data: [41, 22, 22, 11, 3],
      backgroundColor: '#92D9F8',
      borderWidth: 0
    }
  ]
};

var optionsX = {
  tooltips: {
    enabled: false
  },
  responsive: true,
  maintainAspectRatio: false,
  legend: false,
  scales: {
    xAxes: [{
      gridLines: {
        color: "#fff"
      },
    }],
    yAxes: [{
      gridLines: {
        display: false
      },
      ticks: {
        min: 0,
        max: 50,
        stepSize: 10,
        callback: function(value) {
          return value + "%"
        },
      }
    }]
  },
  plugins: {
    datalabels: {
      color: '#59595B',
      font: {
        weight: 'bold',
        size: 14,
      },
      align: 'end',
      anchor: 'end',
      formatter: (value, context) => context.datasetIndex == 2 ? value + '%' : ''
    }
  },
};

var ctx = document.getElementById('chart-one');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: dataX,
  options: optionsX
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<canvas id="chart-one"></canvas>

How can I show chartjs datalabels only last bar?

1 Answers