how to put ng2 chart label y axis value put 9000 = 9k

Question

Im using my angular project for ng2 chart, i have some conflict on the bar chart, can i know how to put value like this format 1000= 1k

here the stack blitz code

My code here

<div style="display: block;">
  <canvas baseChart 
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [plugins]="barChartPlugins"
    [legend]="barChartLegend"
    [chartType]="barChartType">
  </canvas>
</div>

.ts

 public barChartOptions: ChartOptions = {
    responsive: true,
  };
  public barChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  public barChartType: ChartType = 'bar';
  public barChartLegend = true;
  public barChartPlugins = [];

  public barChartData: ChartDataSets[] = [
    { data: [6500, 5900, 8000, 8100, 5600, 5500, 4000], label: 'Series A' },
    { data: [2800, 4800, 4000, 1900, 8600, 2700, 9000], label: 'Series B' }
  ];

So do u want the y-axis as 1k 2k.. etc? – Anglesvar Aug 20 '20 at 06:23 — Anglesvar, Aug 20 '20 at 06:23
@AnglesvarCheenu Hi, yes , do you know any solution? – core114 Aug 20 '20 at 07:07 — core114, Aug 20 '20 at 07:07
yes @core114, I've updated your code. Please do check it. – Anglesvar Aug 20 '20 at 07:53 — Anglesvar, Aug 20 '20 at 07:53

score 1 · Accepted Answer · answered Aug 20 '20 at 07:52

The solution is simple, Read the full documentation of chartJS and ng2Charts. I have updated your code and you can find a Live Demo here. The solution is to add barChartOptions with ticks property.

public barChartOptions: ChartOptions = {
    responsive: true,
    scales: { //you're missing this
      yAxes: [{
         scaleLabel: {
            display: true,
            labelString: 'Frequency Rate'
         },
         ticks: { // and this
            callback: function(value, index, values) {
             return value/1000 + 'k';
          }
        }
      }]
   }
  };

Hope it helps!.. Happy Coding!!

Thanks for your valuable time and answer – core114 Aug 20 '20 at 08:12 — core114, Aug 20 '20 at 08:12
This changed in 3.7.0. See 3.x Migration Guide of chartsjs – Jacques Koorts Feb 08 '22 at 19:58 — Jacques Koorts, Feb 08 '22 at 19:58

how to put ng2 chart label y axis value put 9000 = 9k

1 Answers1