[Chartjs]-How to show thousand in k format for bar values in chart.js

by

2👍

✅

You need to pass a function in formatter option inside datalabels plugin configuration:

 datalabels: {
        anchor: "end",
        align: "left",
        formatter: function(context) {
          return context / 1000 + "k";
        },
        font: {
          color: "black"
        }
      }

You can check the solution in this demo: https://stackblitz.com/edit/angular-chart-js-thousand?file=src/app/app.component.ts

1👍

For styling only the labels you want something like this:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: "# of Votes",
      data: [12000, 1900, 3000, 5000, 2201, 3492]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

setTimeout(function() {
  myChart.options.scales = {
    xAxes: [],
    yAxes: [{
      gridLines: {
        display: false
      },
      type: 'logarithmic',
      position: 'left',
      ticks: {
        min: 0, //minimum tick
        max: 100000, //maximum tick
        callback: function(value, index, values) {
          return Number((value / 1000).toString()) + 'K'; //pass tick values as a string into Number function
        }
      },
      afterBuildTicks: function(chartObj) { //Build ticks labelling as per your need
        chartObj.ticks = [];
        chartObj.ticks.push(0);
        chartObj.ticks.push(10);
        chartObj.ticks.push(100);
        chartObj.ticks.push(1000);
        chartObj.ticks.push(10000);
        chartObj.ticks.push(100000);
      },
      scaleLabel: {
        display: false
      }
    }]
  };
  myChart.update();
}, 1000);
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://npmcdn.com/chart.js@latest/dist/Chart.bundle.js"></script>

<div class="myChartDiv">
  <canvas id="myChart" width="600" height="400"></canvas>
</div>

In case you want to change the format of the value shown when hovering the chart and displaying the value inside the tooltip, you need to use the tooltip callbacks.

For example:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
      {
        label: "# of Votes",
        data: [12000, 1900, 3000, 5000, 2201, 3492]
      }
    ]
  },
  options: {
    tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    return (tooltipItem.yLabel/1000)+'K';
                }
            }
        },
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true
          }
        }
      ]
    }
  }
});

setTimeout(function() {
  myChart.options.scales = {
    xAxes: [],
    yAxes: [ {
      gridLines: {
          display: false
        },
        type: 'logarithmic',
        position: 'left',
        ticks: {
          min: 0, //minimum tick
          max: 100000, //maximum tick
          callback: function (value, index, values) {
            return Number((value/1000).toString())+'K'; //pass tick values as a string into Number function
          }
        },
        afterBuildTicks: function (chartObj) { //Build ticks labelling as per your need
          chartObj.ticks = [];
          chartObj.ticks.push(0);
          chartObj.ticks.push(10);
          chartObj.ticks.push(100);
          chartObj.ticks.push(1000);
          chartObj.ticks.push(10000);
          chartObj.ticks.push(100000);
        },
        scaleLabel: {
          display: false
        }
    }
    ]
  };
  myChart.update();
}, 1000);
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://npmcdn.com/chart.js@latest/dist/Chart.bundle.js"></script>

    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"></canvas>
    </div>

Last example involves the plugin you use in your question.

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      datalabels: {
        color: '#000'
      },
      label: "# of Votes",
      data: [12000, 1900, 3000, 5000, 2201, 3492]
    }]
  },
  options: {
    plugins: {
      datalabels: {
        color: '#000',
        formatter: function(value, context) {
          return context.chart.data.labels[context.dataIndex] + ': ' + Math.round(value / 1000) + 'K';
        }
      }
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          return (tooltipItem.yLabel / 1000) + 'K';
        }
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

setTimeout(function() {
  myChart.options.scales = {
    xAxes: [],
    yAxes: [{
      gridLines: {
        display: false
      },
      type: 'logarithmic',
      position: 'left',
      ticks: {
        min: 0, //minimum tick
        max: 100000, //maximum tick
        callback: function(value, index, values) {
          return Number((value / 1000).toString()) + 'K'; //pass tick values as a string into Number function
        }
      },
      afterBuildTicks: function(chartObj) { //Build ticks labelling as per your need
        chartObj.ticks = [];
        chartObj.ticks.push(0);
        chartObj.ticks.push(10);
        chartObj.ticks.push(100);
        chartObj.ticks.push(1000);
        chartObj.ticks.push(10000);
        chartObj.ticks.push(100000);
      },
      scaleLabel: {
        display: false
      }
    }]
  };
  myChart.update();
}, 1000);
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://npmcdn.com/chart.js@latest/dist/Chart.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

<div class="myChartDiv">
  <canvas id="myChart" width="600" height="400"></canvas>
</div>

0👍

I have found the solution (just now). In config option its will have animation and call back with function onComplete. Here you can draw the label with any format you want. Please see this picture for code

Leave a comment