Charts
Google charts Offical link Preview link
you have to install Google Chart
npm i ng2-google-charts
<!-- Html code for display google chart -->
<div class="card">
<div class="card-header pb-0">
<h3>bar-chart2</h3>
</div>
<div class="card-body chart-block">
<div id="bar-chart2">
<google-chart [data]="barChart2"></google-chart>
</div>
</div>
</div>
To use google chart data files
export var barChart2: any = {
chartType: 'BarChart',
dataTable: [
["Element", "Density", {
role: "style"
}],
["Copper", 10, primary_color],
["Silver", 12, secondary_color],
["Gold", 14, "#51bb25"],
["Platinum", 16, "color: #717171"]
],
options: {
title: "Density of Precious Metals, in g/cm^3",
width: '100%',
height: 400,
bar: { groupWidth: "95%" },
legend: { position: "none" },
backgroundColor: 'transparent'
},
};custom google-chart.ts file
import { Component } from "@angular/core";
import { barChart } from "../../../../shared/data/chart/charts/google-chart";
import { Ng2GoogleChartsModule } from "ng2-google-charts";
@Component({
selector: "app-bar-chart2",
imports: [Ng2GoogleChartsModule],
templateUrl: "./bar-chart2.component.html",
styleUrls: ["./bar-chart2.component.scss"],
})
export class BarChart2Component {
public barChart = barChart;
}
Chartjs charts Offical link Preview link
you have to install chartjs charts
npm i ng2-charts
<div class="card">
<div class="card-header">
<h4>Radar Graph</h4>
</div>
<div class="card-body chart-block">
<canvas baseChart id="myRadarGraph" class="chart" [datasets]="radarGraphData" [labels]="radarGraphLabels"
[options]="radarGraphOptions" [legend]="radarGraphLegend" [type]="radarGraphType"></canvas>
</div>
</div>To use chartjs chart data file
// RadarGraph Chart
export var radarGraphOptions: any = {
responsive: true,
maintainAspectRatio: false,
elements: {
line: {
borderWidth: 2,
},
},
};
export var radarGraphLabels: string[] = [
"Ford",
"Chevy",
"Toyota",
"Honda",
"Mazda",
];
export var radarGraphType: ChartType | any = "radar";
export var radarGraphLegend = false;
export var radarGraphData: any[] = [
{
label: "My First dataset",
fill: true,
backgroundColor: "rgba(92, 95, 206, 0.4)",
borderColor: primary,
pointBackgroundColor: primary,
pointBorderColor: primary,
pointHoverBackgroundColor: primary,
pointHoverBorderColor: "rgba(255, 206, 0, 0.4)",
data: [12, 3, 5, 18, 7],
},
];
export var radarGraphColors: Array<any> = [
{
backgroundColor: "rgba(99, 98, 231, 0.2)",
borderColor: "#7366ff",
borderWidth: 2,
},
];
you have use this chartjs chart type script file
import { Component } from "@angular/core";
import { barChart } from "../../../../shared/data/chart/charts/google-chart";
import { Ng2GoogleChartsModule } from "ng2-google-charts";
@Component({
selector: "app-bar-chart2",
imports: [Ng2GoogleChartsModule],
templateUrl: "./bar-chart2.component.html",
styleUrls: ["./bar-chart2.component.scss"],
})
export class BarChart2Component {
public barChart = barChart;
}
Chartist charts Offical link Preview link
you have to install Chartist charts
npm i ng-chartist
<!-- Html code for display apex chart -->
<div class="card">
<div class="card-header">
<h4>Line chart with area</h4>
</div>
<div class="card-body">
<div class="ct-4 flot-chart-container">
<x-chartist [configuration]="chart5"></x-chartist>
</div>
</div>
</div>To use chartist chart data files
var primary_color = localStorage.getItem('primary_color') || '#7A70BA';
var secondary_color = localStorage.getItem('secondary_color') || '#48A3D7';
export var chart5: any = {
type: 'Line',
data: {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
series: [
[5, 9, 7, 8, 5, 3, 5, 4]
]
},
options: {
low: 0,
showArea: true,
height: 250,
colors: [primary_color, secondary_color]
}
};you have use to chartist type script file
import { Component } from '@angular/core';
import { chart5 } from '../../../../shared/data/chart/charts/chartlist';
import { ChartistModule } from 'ng-chartist';
@Component({
selector: 'app-line-chart-with-area',
imports : [ChartistModule],
templateUrl: './line-chart-with-area.component.html',
styleUrls: ['./line-chart-with-area.component.scss']
})
export class LineChartWithAreaComponent {
public chart5 = chart5;
}
Apex charts Offical link Preview link
you have to install Apex charts
npm i ng-apexcharts
<!-- Html code for display apex chart -->
<div class="card">
<div class="card-header">
<h4>Basic Area Chart </h4>
</div>
<div class="card-body">
<div id="basic-apex">
<apx-chart [chart]="basicAreaChart.chart" [dataLabels]="basicAreaChart.dataLabels"
[stroke]="basicAreaChart.stroke" [series]="basicAreaChart.series" [title]="basicAreaChart.title"
[subtitle]="basicAreaChart.subtitle" [labels]="basicAreaChart.labels" [xaxis]="basicAreaChart.xaxis"
[yaxis]="basicAreaChart.yaxis" [legend]="basicAreaChart.legend" [colors]="basicAreaChart.colors">
</apx-chart>
</div>
</div>
</div>
To use apex chart data files
var primary = localStorage.getItem('primary_color') || '#7A70BA';
var secondary = localStorage.getItem('secondary_color') || '#48A3D7';
export let basicAreaChart: ChartOptions | any = {
chart: {
height: 350,
type: "area",
zoom: {
enabled: false,
},
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "straight",
},
series: [
{
name: "STOCK ABC",
data: series.monthDataSeries1.prices,
},
],
title: {
text: "Fundamental Analysis of Stocks",
align: "left",
},
subtitle: {
text: "Price Movements",
align: "left",
},
labels: series.monthDataSeries1.dates,
xaxis: {
type: "datetime",
},
yaxis: {
opposite: true,
},
legend: {
horizontalAlign: "left",
},
colors: [primary],
};you have use the apex charts type script file
import { Component } from '@angular/core';
import { basicAreaChart } from '../../../../shared/data/chart/charts/apex-chart';
import { NgApexchartsModule } from 'ng-apexcharts';
@Component({
selector: 'app-basic-area-chart',
imports:[NgApexchartsModule],
templateUrl: './basic-area-chart.component.html',
styleUrls: ['./basic-area-chart.component.scss']
})
export class BasicAreaChartComponent {
public basicAreaChart = basicAreaChart;
}