How to show values on chart bars?

I am trying to show values in the chart using your example and it does not work.

I did steps 1 and 2, so my package.json has"dependencies": { "chart.js": "^2.9.4", "chartjs-plugin-datalabels": "^1.0.0",}

angular.json "scripts": [ "node_modules/chart.js/dist/Chart.js", "node_modules/easy-pie-chart/dist/easypiechart.js", "node_modules/screenfull/dist/screenfull.js", "node_modules/hammerjs/hammer.min.js", "node_modules/chart.js/dist/Chart.js", "node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js" ]

TS: public returnChartOptions: any = { responsive: true, legend:{ display: false }, plugins: { datalabels: { anchor: 'end', align: 'end', font: { size: 20, } } }, hover: { mode: 'nearest', intersec: true, }, };

HTML:


                          <canvas mdbChart height="90"
                              [chartType]="returnChartType"
                              [datasets]="returnChartDatasets"
                              [labels]="returnChartLabels"
                              [colors]="returnChartColors"
                              [options]="returnChartOptions"
                              [legend]="false"
                              (chartHover)="chartHovered($event)"
                              (chartClick)="chartClicked($event)" #chart>
                          </canvas>

However, labels are not showing up. What am I doing wrong?Thank you.

Unfortunately there is no built-in method for that in current version.

I also would appreciate an option to show the values for each line of a chart. Is there a plan to implement this?

Well, when using (bar)charts value labels are shown on x- and y axis but the values of each single bar item is not displayed. That imho would be a nice feature.

Please use chartjs-plugin-datalabels (the plugin requires Chart.js 2.7.0 or later).

1. Install the plugin with npm: npm install --save chartjs-plugin-datalabels

2. Add new import to the script array in angular.json

   "scripts": [
     "node_modules/chart.js/dist/Chart.js",
     "node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js",
   ]
   

Here is an example code:

HTML:

<div style="display: block">
    <canvas mdbChart
        [chartType]="chartType"
        [datasets]="chartDatasets"
        [labels]="chartLabels"
        [colors]="chartColors"
        [options]="chartOptions"
        [legend]="true"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)">
    </canvas>
  </div>

TS:

  public chartType = 'bar';

  public chartDatasets: Array<any> = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset' },
  ];

  public chartLabels: Array<any> = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];

  public chartColors: Array<any> = [
    {
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)',
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)',
      ],
      borderWidth: 2,
    },
  ];

  public chartOptions: any = {
    responsive: true,
    scales: { xAxes: [{}], yAxes: [{}] },
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'end',
        font: {
          size: 20,
        }
      }
    }
  };

  public chartClicked(e: any): void {
    console.log(e);
  }

  public chartHovered(e: any): void {
    console.log(e);
  }