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

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

npm install echarts --save
npm install ngx-echarts --save

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

import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({
    imports: [
        NgxEchartsModule.forRoot({
            echarts: () => import('echarts')
        }),
        // ...
    ],
    // ...
})

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

<div echarts [options]="chartOption"></div>

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

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

@Component({
    selector: 'app-my-chart',
    templateUrl: './my-chart.component.html',
})
export class MyChartComponent {
    chartOption: EChartsOption = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
            },
        ],
    };
}

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