MediDash uses ng2-charts to display data in a clear and organized manner. This guide will walk you through the process of creating a basic ng2-chart, including the necessary HTML structure and component-side code.

To get started, you need to install the ng2-charts package using npm:

npm install ng2-charts --save
npm install chart.js --save

Now, you need to import the ChartsModule into your application module's imports:

import { ChartsModule } from 'ng2-charts';

@NgModule({
    imports: [
        ChartsModule,
        // ...
    ],
    // ...
})

The following HTML code demonstrates how to create a basic ng2-chart:

<canvas baseChart
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [legend]="barChartLegend"
    [chartType]="barChartType">
</canvas>

The following code demonstrates how to create the chart options in your component file:

import { Component } from '@angular/core';

@Component({
    selector: 'app-my-chart',
    templateUrl: './my-chart.component.html',
})
export class MyChartComponent {
    public barChartOptions: any = {
        scaleShowVerticalLines: false,
        responsive: true,
    };
    public barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
    public barChartType = 'bar';
    public barChartLegend = true;

    public barChartData: any[] = [
        { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
        { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
    ];
}

For more information on using ng2-charts, please refer to the official documentation: