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

To get started, you need to install the ng-apexcharts package using npm:

npm install apexcharts ng-apexcharts --save

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

import { NgApexchartsModule } from 'ng-apexcharts';

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

The following HTML code demonstrates how to create a basic ng-apexchart:

<apx-chart
    [series]="chartOptions.series"
    [chart]="chartOptions.chart"
    [xaxis]="chartOptions.xaxis"
    [title]="chartOptions.title"
></apx-chart>

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

import { Component } from '@angular/core';
import { ChartOptions } from 'ng-apexcharts';

@Component({
    selector: 'app-my-chart',
    templateUrl: './my-chart.component.html',
})
export class MyChartComponent {
    chartOptions: ChartOptions = {
        series: [
            {
                name: 'basic',
                data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
            },
        ],
        chart: {
            height: 350,
            type: 'line',
        },
        title: {
            text: 'My First ApexChart',
        },
        xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
        },
    };
}

For more information on using ng-apexcharts, please refer to the official documentation: