How to show values on chart bars?

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);
  }