ApexCharts

ApexCharts is a modern charting library that helps developers to create beautiful and interactive visualizations for web pages. This documentation will guide you through the steps to include and use ApexCharts in your Angular project.

Install from NPM

Install the ApexCharts library from the command prompt in the root directory of the project:

yarn add apexcharts --save

How to import ApexCharts package?

import ApexCharts from 'apexcharts';
Creating the Donut Chart Component

To create a donut chart, you will need a dedicated component. Below is an example of how to set up the component and the corresponding TypeScript logic:

HTML Template
<app-domix-charts [series]="donutChart.series" [chartOptions]="donutChart.chartOptions" class="!min-h-full"></app-domix-charts>
TypeScript Logic
// src/app/index.component.ts
import { Component } from '@angular/core';
import { ChartInfo } from './display-chart.model'; // Import the ChartInfo interface
import { DomixChartsComponent } from './domix-charts/domix-charts.component'; // Import your chart component

@Component({
    selector: 'app-index',
    standalone: true,
    imports: [
        DomixChartsComponent,
    ],
    templateUrl: './index.component.html',
})
export class IndexComponent {
    donutChart!: ChartInfo;

    constructor() {
        this.renderChart();
    }

    renderChart(): void {
        this.donutChart = {
            series: [44, 55, 41, 17, 15],
            chartOptions: {
                chart: {
                    height: 90,
                    type: 'donut',
                },
                dataLabels: {
                    enabled: false,
                },
                colors: [
                    'bg-primary-500',
                    'bg-green-500',
                    'bg-yellow-500',
                    'bg-red-500',
                    'bg-purple-500'
                ],
                legend: {
                    show: false,
                    position: 'bottom',
                },
                grid: {
                    padding: {
                        top: -6,
                        right: 0,
                        bottom: -10,
                        left: 0,
                    },
                },
            },
        };
    }
}
Chart Model Definitions

Define your chart's data structure and options in a separate model file:

// src/app/display-chart.model.ts
import { ApexAxisChartSeries } from 'ng-apexcharts';

export type SeriesType = number[] | ApexAxisChartSeries;

export interface CustomApexOptions extends ApexCharts.ApexOptions {
    dataSet: string[];
}

export interface ChartInfo {
    series: SeriesType;
    chartOptions: CustomApexOptions;
}
            
Styling the Chart

You can apply custom styles to the chart and its elements via CSS. Ensure that you include any necessary classes in your component template to match your design requirements.

This setup demonstrates how to integrate ApexCharts into an Angular application and render a donut chart. You can customize the chart further based on your application needs.

Receive the latest updates directly in your inbox!

Be the first to know about new updates and exclusive discounts. No spam, just great offers!

How about

A Custom Project?

With over 7 years of experienced team, we specialize in delivering custom projects for startups, blue-chip companies, and government agencies. We have successfully completed over 250+ projects, providing tailored solutions that meet the unique needs of each client.

Hire Us
Domiex Admin & Dashboards
230+

Total Pages

5+

Layouts

11+

Application

We provide quick support withing one business day to all of our customers.

© Domiex Created & Crafted by SRBThemes.