Chartjs-Bar chart with two sets of labels in Quickchart

by

0👍

✅

Beside datalabels.labels.percent, you could also define datalabels.labels.value, both with specific formatter and positioning. No need to define a second dataset, simply define amountRemaining inside the existing dataset and reference it in the corresponding formatter.

This could look as follows…

{
  type: 'bar',
  data: {
    labels: ['Food', 'Gas', 'Other'],
    datasets: [{
      label: 'Category',
      data: [.5, .7, .8],
      amountRemaining: [300, 420, 480]
    }]
  },
  options: {
    plugins: {
      datalabels: {
        color: 'black',
        labels: {
          percent: {
            formatter: v => Math.round(v * 100) + '%',
            anchor: 'end',
            align: 'end',
            font: {
              weight: 'bold',
              size: 26,
            }
          },
          value: {
            formatter: (v, ctx) => ctx.chart.data.datasets[0].amountRemaining[ctx.dataIndex] + '$',
            font: {
              weight: 'bold',
              size: 26,
            }
          }
        }
      }
    },
    scales: {
      yAxes: [{
        type: 'linear',
        ticks: {
          beginAtZero: true,
          suggestedMin: 0,
          suggestedMax: 1,
        }
      }]
    }
  }
}

Leave a comment