Line Chart in Angular Chart component
31 Jan 20249 minutes to read
Line
To render a line series, use series type
as Line
and inject LineSeriesService
into the @NgModule.providers
.
import { Component, OnInit } from '@angular/core';
import { lineData } from './datasource';
@Component({
selector: 'app-container',
template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis'
[title]='title'>
<e-series-collection>
<e-series [dataSource]='chartData' type='Line' xName='x' yName='y'></e-series>
</e-series-collection>
</ejs-chart>`
})
export class AppComponent implements OnInit {
public chartData?: Object[];
public title?: string;
public primaryXAxis?: Object;
public primaryYAxis?: Object;
ngOnInit(): void {
this.chartData = lineData;
this.primaryXAxis = {
interval: 1
};
this.primaryYAxis =
{
title: 'Expense',
},
this.title = 'Efficiency of oil-fired power production';
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, LineSeriesService, StepLineSeriesService, SplineSeriesService, StackingLineSeriesService, DateTimeService,
SplineAreaSeriesService, MultiColoredLineSeriesService, ParetoSeriesService, ColumnSeriesService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ CategoryService, LineSeriesService, StepLineSeriesService, SplineSeriesService, StackingLineSeriesService, DateTimeService,
SplineAreaSeriesService, MultiColoredLineSeriesService, ParetoSeriesService, ColumnSeriesService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Multicolored Line
To render a multicolored line series, use the series type as MultiColoredLine
, and inject the MultiColoredLineSeriesService
into the @NgModule.providers
.
Here, the individual colors to the data can be mapped by using pointColorMapping
.
import { Component, OnInit } from '@angular/core';
import { splineData } from './datasource';
@Component({
selector: 'app-container',
template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title'>
<e-series-collection>
<e-series [dataSource]='chartData' type='MultiColoredLine' xName='x' yName='y' name='London' width=2 [marker]='marker'
pointColorMapping= 'color'></e-series>
</e-series-collection>
</ejs-chart>`
})
export class AppComponent implements OnInit {
public chartData?: Object[];
public title?: string;
public marker?: Object;
primaryXAxis: any;
primaryYAxis: any;
ngOnInit(): void {
this.chartData = [{ x: 2005, y: 28 , color: 'red'}, { x: 2006, y: 25, color:'green'},
{ x: 2007, y: 26, color: '#ff0097' }, { x: 2008, y: 27, color: 'crimson' },
{ x: 2009, y: 32, color: 'blue' }, { x: 2010, y: 35 ,color: 'darkorange'}];
this.marker = { visible: true, width: 10, height: 10 };
this.title = 'Climate Graph-2012';
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, LineSeriesService, StepLineSeriesService, SplineSeriesService, StackingLineSeriesService, DateTimeService,
SplineAreaSeriesService, MultiColoredLineSeriesService, ParetoSeriesService, ColumnSeriesService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ CategoryService, LineSeriesService, StepLineSeriesService, SplineSeriesService, StackingLineSeriesService, DateTimeService,
SplineAreaSeriesService, MultiColoredLineSeriesService, ParetoSeriesService, ColumnSeriesService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Series customization
The following properties can be used to customize the line
series.
- fill – Specifies the color of the series.
- opacity – Specifies the opacity of fill.
- dashArray – Specifies the dashes for series.
- width – Specifies the width for series.
import { Component, OnInit } from '@angular/core';
import { lineData } from './datasource';
@Component({
selector: 'app-container',
template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title'>
<e-series-collection>
<e-series [dataSource]='chartData' type='Line' xName='x' yName='y' name='India' fill='green' width=3 dashArray='5,5' [marker]='marker'></e-series>
</e-series-collection>
</ejs-chart>`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: Object[];
public title?: string;
public marker?: Object;
public primaryYAxis?: Object;
ngOnInit(): void {
this.chartData = lineData;
this.marker = { visible: true };
this.title = 'Efficiency of oil-fired power production';
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, LineSeriesService, StepLineSeriesService, SplineSeriesService, StackingLineSeriesService, DateTimeService,
SplineAreaSeriesService, MultiColoredLineSeriesService, ParetoSeriesService, ColumnSeriesService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ CategoryService, LineSeriesService, StepLineSeriesService, SplineSeriesService, StackingLineSeriesService, DateTimeService,
SplineAreaSeriesService, MultiColoredLineSeriesService, ParetoSeriesService, ColumnSeriesService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);