[Chartjs]-How can I show chartjs datalabels only last bar?

by

1👍

✅

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>

Leave a comment