vue.jschart.jsnuxt.jschartjs-2.6.0vue-chartjs

Vue-Charts label numbers to the side of a bar chart

I am using a Nuxt application with vue-charts. I have a barchart that I trying to see if there is a way to callback the numbers next to the chart. Some what like this

enter image description here

My barchart options look like this now.

barLostDollarChartOptions: {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
      display: false,
    },
    title: {
      display: true,
      text: 'Daily NP Opportunity Costs'
    },
    scales: {
      yAxes: [{
        //Sets the Max value after re-rendering chart
        beforeFit: function (scale){
          let maxValue = 0
          if (scale.chart.config && scale.chart.config.data && scale.chart.config.data.datasets) {
            scale.chart.config.data.datasets.forEach(dataset => {
              if (dataset && dataset.data) {
                dataset.data.forEach(value => {
                  if (value > maxValue) {
                    maxValue = value
                  }
                })
              }
            })
          }
          // After, set max option !!!
          scale.options.ticks.max = maxValue
        },
        // afterFit: function (scale){
        //   console.log('yAxes',scale)
        //   let arr = Object.values(scale.chart.config.data.datasets[0].data);
        //   let min = Math.min(...arr);
        //   let max = Math.max(...arr);
        //   maxValueArray.push(max)
        //   // console.log( `Min value: ${min}, max value: ${max}` );
        //
        // }
      }
      ],
      xAxes: [{
        ticks:{
          callback: function(value, index, values) {
            if(parseInt(value) >= 1000){
              // console.log(value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","))
              return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            } else {
              return '$' + value;
            }
          },
        },
      }]
    }
      },

But I am trying to see if there is a way that I can call back the number and render it next to the bar? any ideas?

Solution

  • You can use the datalabels plugin for this:

    Chart.plugins.register(ChartDataLabels);

var options = {
  type: 'horizontalBar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'orange'
    }]
  },
  options: {
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'end',
        formatter: (val) => ('$' + val)
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
    <body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/1.0.0/chartjs-plugin-datalabels.js"></script>
</body>