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

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

npm install @swimlane/ngx-charts --save

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

import { NgxChartsModule } from '@swimlane/ngx-charts';

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

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

<ngx-charts-bar-vertical
    [view]="[700, 400]"
    [scheme]="colorScheme"
    [results]="single"
    [gradient]="gradient"
    [xAxis]="showXAxis"
    [yAxis]="showYAxis"
    [legend]="showLegend"
    [showXAxisLabel]="showXAxisLabel"
    [showYAxisLabel]="showYAxisLabel"
    [xAxisLabel]="xAxisLabel"
    [yAxisLabel]="yAxisLabel"
    (select)="onSelect($event)">
</ngx-charts-bar-vertical>

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 {
    single = [
        { name: 'Germany', value: 8940000 },
        { name: 'USA', value: 5000000 },
        { name: 'France', value: 7200000 },
    ];

    view: any[] = [700, 400];

    // options
    showXAxis = true;
    showYAxis = true;
    gradient = false;
    showLegend = true;
    showXAxisLabel = true;
    xAxisLabel = 'Country';
    showYAxisLabel = true;
    yAxisLabel = 'Population';

    colorScheme = {
        domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
    };

    onSelect(event) {
        console.log(event);
    }
}

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