Topic: How to show values on chart bars?

Asaf Getahon free asked 5 years ago


i want to display bar chart with the values on top of each bar. I'm using angulr 6 version. tnx,


ammi pro answered 3 years ago


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>

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


Arkadiusz Idzikowski staff answered 5 years ago


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

Schermbecker free answered 5 years ago


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.


Arkadiusz Idzikowski staff commented 5 years ago

Thank you for the details. I added this feature to our nice-to-have list and we will consider implementing it in the future.


Schermbecker free commented 5 years ago

Sweet, thank you!


Schermbecker free answered 5 years ago


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


Arkadiusz Idzikowski staff commented 5 years ago

Could you provide more information about this feature?


Arkadiusz Idzikowski staff answered 5 years ago


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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.3.0
  • Device: pc
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No
Tags