7/19/2021 Apex Chart Documentation - Apex responsive bootstrap 4 admin template

Description

A modern charting library to build interactive charts and visualizations with simple API.

NPM

Install apex using npm

apex
npm install apexcharts ng-apexcharts --save

Script

Include js file in angular.json file under scripts[]

path
node_modules/apexcharts/dist/apexcharts.min.js

Charts Module

Add NgApexchartsModule into your ChartsNg2Module class.

charts.module.ts would look like this

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

import { NgApexchartsModule } from 'ng-apexcharts';

import { ApexComponent } from "./apex/apex.component";

@NgModule({

imports: [NgApexchartsModule],

declarations: [ApexComponent],

providers: [ ],

})

export class ChartsNg2Module {

Apex Components

apex.component.ts would look like this

https://pixinvent.com/apex-angular-4-bootstrap-admin-template/angular-documentation/documentation-charts-apex.html 1/4
7/19/2021 Apex Chart Documentation - Apex responsive bootstrap 4 admin template

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

import {

ApexAxisChartSeries,

ApexChart,

ApexXAxis,

ApexYAxis,

ApexGrid,

ApexDataLabels,

ApexStroke,

ApexTitleSubtitle,

ApexTooltip,

ApexLegend,

ApexPlotOptions,

ApexFill,

ApexMarkers,

ApexTheme,

ApexNonAxisChartSeries,

ApexResponsive

} from "ng-apexcharts";

export type ChartOptions = {

series: ApexAxisChartSeries | ApexNonAxisChartSeries;

colors: string[],

chart: ApexChart;

xaxis: ApexXAxis;

yaxis: ApexYAxis | ApexYAxis[],

title: ApexTitleSubtitle;

dataLabels: ApexDataLabels,

stroke: ApexStroke,

grid: ApexGrid,

legend?: ApexLegend,

tooltip?: ApexTooltip,

plotOptions?: ApexPlotOptions,

labels?: string[],

fill: ApexFill,

markers?: ApexMarkers,

theme: ApexTheme,

responsive: ApexResponsive[]

};

var $primary = "#975AFF",

$success = "#40C057",

$info = "#2F8BE6",

$warning = "#F77E17",

$danger = "#F55252",

$label_color_light = "#E6EAEE";

var themeColors = [$primary, $warning, $success, $danger, $info];

@Component({

selector: 'app-apex',

templateUrl: './apex.component.html',

styleUrls: ['./apex.component.scss']

})

export class ApexComponent implements OnInit {

lineChartOptions : Partial;

constructor() {

this.lineChartOptions = {

chart: {

height: 350,

type: 'line',

zoom: {

enabled: false

https://pixinvent.com/apex-angular-4-bootstrap-admin-template/angular-documentation/documentation-charts-apex.html 2/4
7/19/2021 Apex Chart Documentation - Apex responsive bootstrap 4 admin template

},

colors: themeColors,

dataLabels: {

enabled: false

},

stroke: {

curve: 'straight'

},

series: [{

name: "Desktops",

data: [10, 41, 35, 51, 49, 62, 69, 91, 148],

}],

title: {

text: 'Product Trends by Month',

align: 'left'

},

grid: {

row: {

colors: ['#F5F5F5', 'transparent'], // takes an array which will be repeated on columns

opacity: 0.5

},

},

xaxis: {

categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],

},

yaxis: {

tickAmount: 5,

Apex Chart Markup

apex.component.html would look like this

https://pixinvent.com/apex-angular-4-bootstrap-admin-template/angular-documentation/documentation-charts-apex.html 3/4
7/19/2021 Apex Chart Documentation - Apex responsive bootstrap 4 admin template

<apx-chart

Refer following links for usage:

[series]="lineChartOptions.series"

[colors]="lineChartOptions.colors"

[chart]="lineChartOptions.chart"

Type URL
[xaxis]="lineChartOptions.xaxis"

[yaxis]="lineChartOptions.yaxis"

[title]="lineChartOptions.title"

Plugin Github Page https://github.com/apexcharts/ng-apexcharts

[dataLabels]="lineChartOptions.dataLabels"

[stroke]="lineChartOptions.stroke"

Template Page https://pixinvent.com/apex-angular-4-bootstrap-admin-template/demo-1/charts/apex

[grid]="lineChartOptions.grid"

[tooltip]="lineChartOptions.tooltip"

[plotOptions]="lineChartOptions.plotOptions"

[fill]="lineChartOptions.fill"

[legend]="lineChartOptions.legend"

[labels]="lineChartOptions.labels"

Copyright © 2021  PIXINVENT, All rights reserved.

[markers]="lineChartOptions.markers"

https://pixinvent.com/apex-angular-4-bootstrap-admin-template/angular-documentation/documentation-charts-apex.html 4/4