Bar and line graphs together

web
mobile

Topic: Bar and line graphs together

itay pro asked 4 months ago

Hi,

How can I create a canvas with both bars and line graphs on the same chart ?

https://mdbootstrap.com/docs/angular/advanced/charts/


Arkadiusz Idzikowski staff answered 4 months ago

Here is an example:

HTML:

<div style="display: block">
  <canvas mdbChart
      [chartType]="chartType"
      [datasets]="chartDatasets"
      [labels]="chartLabels"
      [options]="chartOptions"
      [legend]="true">
  </canvas>
</div>

TS:

  public chartType = 'bar';

  public chartDatasets: Array<any> = [
    { data: [1, 1, 3, 1, 2, 1], label: 'Line chart', type: 'line' },
    { data: [3, 1, 1, 2, 0, 1], label: 'Bar chart', type: 'bar'}
  ];

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

  public chartOptions: any = {
    responsive: true
  };

itay pro commented 4 months ago

Excellent, thanks !


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 8.8.2
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: Yes
Tags