Line Chart in Angular Charts

Line

A line chart displays data points connected by straight lines to show trends over time or continuous values.

Configure a line series as follows:

1. Set the series type: Set the series type to Line.
2. Register the required services: Register LineSeriesService and required axis services, such as CategoryService, in the module providers array. Confirm that ChartModule is imported.
3. Map the data fields: Bind the data with dataSource, and map fields with xName and yName.

app.component.ts

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, LineSeriesService } from '@syncfusion/ej2-angular-charts';

import { Component, OnInit } from '@angular/core';
import { lineData } from './datasource';

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, LineSeriesService],
    standalone: true,
    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='month' yName='sales'></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,
            valueType: 'Category'
        };
        this.primaryYAxis = {
            title: 'Sales'
        };
        this.title = 'Monthly Sales Comparison';
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

datasource.ts

export let lineData: Object[] = [
     { month: 'Jan', sales: 35 },
     { month: 'Feb', sales: 28 },
     { month: 'Mar', sales: 34 },
     { month: 'Apr', sales: 32 },
     { month: 'May', sales: 40 },
     { month: 'Jun', sales: 32 },
     { month: 'Jul', sales: 35 },
     { month: 'Aug', sales: 55 },
     { month: 'Sep', sales: 38 },
     { month: 'Oct', sales: 30 },
     { month: 'Nov', sales: 25 },
     { month: 'Dec', sales: 32 }
 ];

Series customization

Customize a line series using the following properties.

Solid color

Use the fill property to set a single solid stroke color. Accepted values are CSS color names (for example, blue), hexadecimal strings (for example, #1A75FF), and rgba(...) strings.

app.component.ts

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, LineSeriesService } from '@syncfusion/ej2-angular-charts';

import { Component, OnInit } from '@angular/core';
import { lineData } from './datasource';

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, LineSeriesService],
    standalone: true,
    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='month' yName='sales' fill='red'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;

    ngOnInit(): void {
        this.primaryXAxis = {
            valueType: 'Category'
        };
        this.chartData = lineData;
        this.primaryYAxis = {
            title: 'Sales'
        };
        this.title = 'Monthly Sales Comparison';
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

datasource.ts

export let lineData: Object[] = [
    { month: 'Jan', sales: 35 },
    { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 },
    { month: 'Apr', sales: 32 },
    { month: 'May', sales: 40 },
    { month: 'Jun', sales: 32 },
    { month: 'Jul', sales: 35 },
    { month: 'Aug', sales: 55 },
    { month: 'Sep', sales: 38 },
    { month: 'Oct', sales: 30 },
    { month: 'Nov', sales: 25 },
    { month: 'Dec', sales: 32 }
];

Gradient color

The fill property can reference an SVG gradient for a line series. Define the gradient in an SVG <defs> element, and assign it in the url(#gradientId) format.

app.component.ts

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, LineSeriesService } from '@syncfusion/ej2-angular-charts';

import { Component, OnInit } from '@angular/core';
import { lineData } from './datasource';

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, LineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `
      <svg>
        <defs>
            <linearGradient id="gradient">
                <stop offset="0%" style="stop-color:#FF0000;stop-opacity:1" />
                <stop offset="70%" style="stop-color:#00FF00;stop-opacity:1" />
            </linearGradient>
        </defs>
    </svg>
    <ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Line' xName='x' yName='y' [fill]="'url(#gradient)'"></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,
            valueType: 'Category'
        };
        this.primaryYAxis = {
            title: 'Expense'
        };
        this.title = 'Efficiency of oil-fired power production';
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

datasource.ts

export let lineData: Object[] = [
             { x: 2005, y: 28 },
             { x: 2006, y: 25 },
             { x: 2007, y: 26 },
             { x: 2008, y: 27 },
             { x: 2009, y: 32 },
             { x: 2010, y: 35 },
             { x: 2011, y: 30 }
        ];

Opacity

Use the opacity property to control line transparency. Set a value from 0 to 1.

app.component.ts

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, LineSeriesService } from '@syncfusion/ej2-angular-charts';

import { Component, OnInit } from '@angular/core';
import { lineData } from './datasource';

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, LineSeriesService],
    standalone: true,
    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' opacity='0.5'></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,
            valueType: 'Category'
        };
        this.primaryYAxis = {
            title: 'Expense'
        };
        this.title = 'Efficiency of oil-fired power production';
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

datasource.ts

export let lineData: Object[] = [
             { x: 2005, y: 28 },
             { x: 2006, y: 25 },
             { x: 2007, y: 26 },
             { x: 2008, y: 27 },
             { x: 2009, y: 32 },
             { x: 2010, y: 35 },
             { x: 2011, y: 30 }
        ];

Dash array

Use the dashArray property to define the line stroke’s dash pattern. Provide a comma or whitespace-separated list of stroke-gap sizes in pixels, for example "5,5", "2,2,10,2", or "4 4".

app.component.ts

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, LineSeriesService } from '@syncfusion/ej2-angular-charts';

import { Component, OnInit } from '@angular/core';
import { lineData } from './datasource';

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, LineSeriesService],
    standalone: true,
    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' dashArray='5,5'></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,
            valueType: 'Category'
        };
        this.primaryYAxis = {
            title: 'Expense'
        };
        this.title = 'Efficiency of oil-fired power production';
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

datasource.ts

export let lineData: Object[] = [
             { x: 2005, y: 28 },
             { x: 2006, y: 25 },
             { x: 2007, y: 26 },
             { x: 2008, y: 27 },
             { x: 2009, y: 32 },
             { x: 2010, y: 35 },
             { x: 2011, y: 30 }
        ];

Width

Use the width property to set the line stroke width in pixels.

app.component.ts

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, LineSeriesService } from '@syncfusion/ej2-angular-charts';

import { Component, OnInit } from '@angular/core';
import { lineData } from './datasource';

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, LineSeriesService],
    standalone: true,
    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' width='4'></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,
            valueType: 'Category'
        };
        this.primaryYAxis = {
            title: 'Expense'
        };
        this.title = 'Efficiency of oil-fired power production';
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

datasource.ts

export let lineData: Object[] = [
             { x: 2005, y: 28 },
             { x: 2006, y: 25 },
             { x: 2007, y: 26 },
             { x: 2008, y: 27 },
             { x: 2009, y: 32 },
             { x: 2010, y: 35 },
             { x: 2011, y: 30 }
        ];

Multicolored line

Configure a multicolored line series as follows:

1. Set the series type: Set type to MultiColoredLine.
2. Register the service: Register MultiColoredLineSeriesService in the module providers array.
3. Map colors: Set pointColorMapping to the data field that contains each point color. Each row in the data source must include a field whose value is a CSS color string — for example { x: 'Jan', y: 35, color: 'red' }.

app.component.ts

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, MultiColoredLineSeriesService } from '@syncfusion/ej2-angular-charts';

import { Component, OnInit } from '@angular/core';
import { splineData } from './datasource';

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, MultiColoredLineSeriesService],
    standalone: true,
    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;
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;

    ngOnInit(): void {
        this.chartData = splineData;
        this.marker = { visible: true, width: 10, height: 10 };
        this.primaryXAxis = {
            interval: 1,
            valueType: 'Category'
        };
        this.primaryYAxis = {
            title: 'Temperature (°C)'
        };
        this.title = 'Climate Graph-2012';
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

datasource.ts

export let splineData: Object[] = [
    { 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' }
];

Empty points

A data point whose mapped value is null or undefined is empty. Configure its behavior with emptyPointSettings.mode.

Mode

Use mode to control empty-point rendering. The default is Gap.

Mode	Visual behavior
Gap	Leave a gap at the empty position and continue the line through the next available point.
Zero	Treat the empty point as 0 and connect it.
Drop	Drop the line segment; subsequent points are still rendered.
Average	Replace the empty value with the average of the surrounding points.

app.component.ts

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, LineSeriesService } from '@syncfusion/ej2-angular-charts';

import { Component, OnInit } from '@angular/core';
import { lineData } from './datasource';

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, LineSeriesService],
    standalone: true,
    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' [emptyPointSettings]='emptyPointSettings'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public chartData?: Object[];
    public title?: string;
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public emptyPointSettings?: Object;

    ngOnInit(): void {
        this.chartData = lineData;
        this.primaryXAxis = {
            interval: 1,
            valueType: 'Category'
        };
        this.primaryYAxis = {
            title: 'Expense'
        };
        this.title = 'Efficiency of oil-fired power production';
        this.emptyPointSettings = {
            mode: 'Zero'
        };
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

datasource.ts

export let lineData: Object[] = [
             { x: 2005, y: 28 },
             { x: 2006, y: null },
             { x: 2007, y: 26 },
             { x: 2008, y: 27 },
             { x: 2009, y: undefined },
             { x: 2010, y: 35 },
             { x: 2011, y: 30 }
        ];

Empty-point fill

Use the emptyPointSettings.fill property to customize the fill color of empty points in the series.

app.component.ts

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, LineSeriesService } from '@syncfusion/ej2-angular-charts';

import { Component, OnInit } from '@angular/core';
import { lineData } from './datasource';

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, LineSeriesService],
    standalone: true,
    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' [marker]='marker' [emptyPointSettings]='emptyPointSettings'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public chartData?: Object[];
    public title?: string;
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public emptyPointSettings?: Object;
    public marker?: Object;

    ngOnInit(): void {
        this.chartData = lineData;
        this.primaryXAxis = {
            interval: 1,
            valueType: 'Category'
        };
        this.primaryYAxis = {
            title: 'Expense'
        };
        this.marker = {
            visible: true, width: 7, height: 7, isFilled: true
        };
        this.title = 'Efficiency of oil-fired power production';
        this.emptyPointSettings = {
            mode: 'Zero',
            fill: 'red'
        };
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

datasource.ts

export let lineData: Object[] = [
             { x: 2005, y: 28 },
             { x: 2006, y: null },
             { x: 2007, y: 26 },
             { x: 2008, y: 27 },
             { x: 2009, y: undefined },
             { x: 2010, y: 35 },
             { x: 2011, y: 30 }
        ];

Empty-point border

Use the emptyPointSettings.border property to customize the width and color of a rendered empty point. Example: { width: 2, color: '#FF0000' }.

app.component.ts

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, LineSeriesService } from '@syncfusion/ej2-angular-charts';

import { Component, OnInit } from '@angular/core';
import { lineData } from './datasource';

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, LineSeriesService],
    standalone: true,
    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' [marker]='marker' [emptyPointSettings]='emptyPointSettings'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public chartData?: Object[];
    public title?: string;
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public emptyPointSettings?: Object;
    public marker?: Object;

    ngOnInit(): void {
        this.chartData = lineData;
        this.primaryXAxis = {
            interval: 1,
            valueType: 'Category'
        };
        this.primaryYAxis = {
            title: 'Expense'
        };
        this.marker = {
            visible: true, width: 7, height: 7, isFilled: true
        };
        this.title = 'Efficiency of oil-fired power production';
        this.emptyPointSettings = {
            mode: 'Zero',
            fill: 'red',
            border: { color: 'yellow', width: 2 }
        };
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

datasource.ts

export let lineData: Object[] = [
             { x: 2005, y: 28 },
             { x: 2006, y: null },
             { x: 2007, y: 26 },
             { x: 2008, y: 27 },
             { x: 2009, y: undefined },
             { x: 2010, y: 35 },
             { x: 2011, y: 30 }
        ];

Events

Series render

The seriesRender event allows you to customize series properties, such as data, fill, and name, before they are rendered on the chart. The callback receives an ISeriesRenderEventArgs argument that exposes mutable series, fill, and data properties.

app.component.ts

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, LineSeriesService } from '@syncfusion/ej2-angular-charts';
import { ISeriesRenderEventArgs } from '@syncfusion/ej2-charts';

import { Component, OnInit } from '@angular/core';
import { lineData } from './datasource';

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, LineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" (seriesRender)='seriesRender($event)' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Line' xName='month' yName='sales'></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,
            valueType: 'Category'
        };
        this.primaryYAxis = {
            title: 'Expense'
        };
        this.title = 'Efficiency of oil-fired power production';
    }

    public seriesRender(args: ISeriesRenderEventArgs) {
        args.fill = '#ff6347';
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

datasource.ts

export let lineData: Object[] = [
     { month: 'Jan', sales: 35 },
     { month: 'Feb', sales: 28 },
     { month: 'Mar', sales: 34 },
     { month: 'Apr', sales: 32 },
     { month: 'May', sales: 40 },
     { month: 'Jun', sales: 32 },
     { month: 'Jul', sales: 35 },
     { month: 'Aug', sales: 55 },
     { month: 'Sep', sales: 38 },
     { month: 'Oct', sales: 30 },
     { month: 'Nov', sales: 25 },
     { month: 'Dec', sales: 32 }
 ];

Point render

The pointRender event allows you to customize each data point before it is rendered on the chart. The callback receives an IPointRenderEventArgs argument that exposes the current point, series, fill, and border, plus a cancel flag.

app.component.ts

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, LineSeriesService } from '@syncfusion/ej2-angular-charts';
import { IPointRenderEventArgs } from '@syncfusion/ej2-charts';

import { Component, OnInit } from '@angular/core';
import { lineData } from './datasource';

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, LineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" (pointRender)='pointRender($event)' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Line' [marker]='marker' xName='month' yName='sales'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public chartData?: Object[];
    public title?: string;
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public marker?: Object;

    ngOnInit(): void {
        this.chartData = lineData;
        this.primaryXAxis = {
            interval: 1,
            valueType: 'Category'
        };
        this.marker = { visible: true };
        this.primaryYAxis = {
            title: 'Expense'
        };
        this.title = 'Efficiency of oil-fired power production';
    }

    public pointRender(args: IPointRenderEventArgs) {
        if (args.point.index % 2 !== 0) {
            args.fill = '#ff6347';
        } else {
            args.fill = '#009cb8';
        }
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

datasource.ts

export let lineData: Object[] = [
     { month: 'Jan', sales: 35 },
     { month: 'Feb', sales: 28 },
     { month: 'Mar', sales: 34 },
     { month: 'Apr', sales: 32 },
     { month: 'May', sales: 40 },
     { month: 'Jun', sales: 32 },
     { month: 'Jul', sales: 35 },
     { month: 'Aug', sales: 55 },
     { month: 'Sep', sales: 38 },
     { month: 'Oct', sales: 30 },
     { month: 'Nov', sales: 25 },
     { month: 'Dec', sales: 32 }
 ];

Troubleshooting

• The line is not displayed: Confirm that LineSeriesService and required axis services are registered, the series type is Line, and mapped fields exist.
• A multicolored line uses one color: Confirm that MultiColoredLineSeriesService is registered and pointColorMapping matches the color field in the data source.
• An empty point is missing: Review emptyPointSettings.mode and verify that the mapped value is null or undefined.
• A gradient is not displayed: Confirm that the SVG gradient ID in index.html matches the series fill value.

See also

• Data labels
• Tooltip
• Axis customization
• Data binding
• Legend