Spline Chart in Angular Charts

Spline

A spline chart is a smooth, curved version of a line chart that connects data points using splines instead of straight lines.

Spline chart showing data trends

Configure a spline series as follows:

Set the series type: Set the series type to Spline.
Register the service: Register SplineSeriesService (and any required axis services) in the module providers array, or in ApplicationConfig.providers for standalone applications. Confirm that ChartModule is imported.
Map the data fields: Bind the data with dataSource, and map fields with xName and yName.

app.component.ts
main.ts
datasource.ts
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, SplineSeriesService } from '@syncfusion/ej2-angular-charts';

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

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, SplineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Spline' xName='x' yName='y' name='London' [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;

    ngOnInit(): void {
        this.chartData = splineData;
        this.marker = { visible: true, width: 10, height: 10 };
        this.primaryXAxis = {
            title: 'Month',
            valueType: 'Category'
        };
        this.title = 'Climate Graph-2012';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let splineData: Object[] = [
    { x: 'Jan', y: -1 },
    { x: 'Feb', y: -1 },
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 },
    { x: 'May', y: 13 },
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 },
    { x: 'Aug', y: 20 },
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 },
    { x: 'Nov', y: 4 },
    { x: 'Dec', y: 0 }
];

Spline type

Use the splineType to define the type of the spline series. The default type is Natural, which creates a smooth curve through the data points.

Spline type	Visual behavior
`Natural`	Smooth curve; passes through each data point. Default.
`Cardinal`	Cardinal spline interpolation; tension can be controlled with `cardinalSplineTension` (typically between `0` and `1`).
`Clamped`	Renders a clamped spline.
`Monotonic`	Less wavy curve that does not overshoot at peaks and troughs; suitable when data does not follow a smooth progression.

app.component.ts
main.ts
datasource.ts
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, SplineSeriesService } from '@syncfusion/ej2-angular-charts';

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

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, SplineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Spline' xName='x' yName='y' splineType='Cardinal' name='London'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;

    ngOnInit(): void {
        this.chartData = splineData;
        this.primaryXAxis = {
            title: 'Month',
            valueType: 'Category'
        };
        this.title = 'Climate Graph-2012';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let splineData: Object[] = [
    { x: 'Jan', y: -1 },
    { x: 'Feb', y: -1 },
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 },
    { x: 'May', y: 13 },
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 },
    { x: 'Aug', y: 20 },
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 },
    { x: 'Nov', y: 4 },
    { x: 'Dec', y: 0 }
];

Series customization

Customize a spline 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
main.ts
datasource.ts
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, SplineSeriesService } from '@syncfusion/ej2-angular-charts';

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

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, SplineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Spline' xName='x' yName='y' name='London' fill='yellow'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;

    ngOnInit(): void {
        this.chartData = splineData;
        this.primaryXAxis = {
            title: 'Month',
            valueType: 'Category'
        };
        this.title = 'Climate Graph-2012';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let splineData: Object[] = [
    { x: 'Jan', y: -1 },
    { x: 'Feb', y: -1 },
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 },
    { x: 'May', y: 13 },
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 },
    { x: 'Aug', y: 20 },
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 },
    { x: 'Nov', y: 4 },
    { x: 'Dec', y: 0 }
];

Gradient color

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

Place the following definition in the application’s index.html file, inside <body> and outside <app-container>.

HTML

<svg width="0" height="0" aria-hidden="true">
    <defs>
        <linearGradient id="gradient">
            <stop offset="0%" style="stop-color:#FF0000;stop-opacity:5" />
            <stop offset="70%" style="stop-color:#00FF00;stop-opacity:5" />
        </linearGradient>
    </defs>
</svg>

Set the series fill value to url(#gradient).

app.component.ts
main.ts
datasource.ts
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, SplineSeriesService } from '@syncfusion/ej2-angular-charts';

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

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, SplineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Spline' xName='x' yName='y' fill='url(#gradient)' name='London'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;

    ngOnInit(): void {
        this.chartData = splineData;
        this.primaryXAxis = {
            title: 'Month',
            valueType: 'Category'
        };
        this.title = 'Climate Graph-2012';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let splineData: Object[] = [
    { x: 'Jan', y: -1 },
    { x: 'Feb', y: -1 },
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 },
    { x: 'May', y: 13 },
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 },
    { x: 'Aug', y: 20 },
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 },
    { x: 'Nov', y: 4 },
    { x: 'Dec', y: 0 }
];

Opacity

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

app.component.ts
main.ts
datasource.ts
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, SplineSeriesService } from '@syncfusion/ej2-angular-charts';

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

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, SplineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Spline' xName='x' yName='y' opacity='0.5' name='London'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;

    ngOnInit(): void {
        this.chartData = splineData;
        this.primaryXAxis = {
            title: 'Month',
            valueType: 'Category'
        };
        this.title = 'Climate Graph-2012';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let splineData: Object[] = [
    { x: 'Jan', y: -1 },
    { x: 'Feb', y: -1 },
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 },
    { x: 'May', y: 13 },
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 },
    { x: 'Aug', y: 20 },
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 },
    { x: 'Nov', y: 4 },
    { x: 'Dec', y: 0 }
];

Dash array

Use the dashArray property to define the spline’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
main.ts
datasource.ts
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, SplineSeriesService } from '@syncfusion/ej2-angular-charts';

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

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, SplineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Spline' xName='x' yName='y' dashArray='2,5' name='London'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;

    ngOnInit(): void {
        this.chartData = splineData;
        this.primaryXAxis = {
            title: 'Month',
            valueType: 'Category'
        };
        this.title = 'Climate Graph-2012';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let splineData: Object[] = [
    { x: 'Jan', y: -1 },
    { x: 'Feb', y: -1 },
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 },
    { x: 'May', y: 13 },
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 },
    { x: 'Aug', y: 20 },
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 },
    { x: 'Nov', y: 4 },
    { x: 'Dec', y: 0 }
];

Width

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

app.component.ts
main.ts
datasource.ts
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, SplineSeriesService } from '@syncfusion/ej2-angular-charts';

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

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, SplineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Spline' xName='x' yName='y' width='5' name='London'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;

    ngOnInit(): void {
        this.chartData = splineData;
        this.primaryXAxis = {
            title: 'Month',
            valueType: 'Category'
        };
        this.title = 'Climate Graph-2012';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let splineData: Object[] = [
    { x: 'Jan', y: -1 },
    { x: 'Feb', y: -1 },
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 },
    { x: 'May', y: 13 },
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 },
    { x: 'Aug', y: 20 },
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 },
    { x: 'Nov', y: 4 },
    { x: 'Dec', y: 0 }
];

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 curve through the next available point.
`Zero`	Treat the empty point as `0` and connect it.
`Drop`	Drop the curve segment; subsequent points are still rendered.
`Average`	Replace the empty value with the average of the surrounding points.

app.component.ts
main.ts
datasource.ts
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, SplineSeriesService } from '@syncfusion/ej2-angular-charts';

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

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, SplineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Spline' xName='x' yName='y' [emptyPointSettings]='emptyPointSettings' name='London'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public emptyPointSettings?: Object;

    ngOnInit(): void {
        this.chartData = splineData;
        this.primaryXAxis = {
            title: 'Month',
            valueType: 'Category'
        };
        this.emptyPointSettings = {
            mode: 'Average'
        };
        this.title = 'Climate Graph-2012';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let splineData: Object[] = [
    { x: 'Jan', y: -1 },
    { x: 'Feb', y: -1 },
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: null },
    { x: 'May', y: 13 },
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 },
    { x: 'Aug', y: 20 },
    { x: 'Sep', y: undefined },
    { x: 'Oct', y: 10 },
    { x: 'Nov', y: 4 },
    { x: 'Dec', y: 0 }
];

Empty-point fill

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

app.component.ts
main.ts
datasource.ts
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, SplineSeriesService } from '@syncfusion/ej2-angular-charts';

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

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, SplineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Spline' xName='x' yName='y' [emptyPointSettings]='emptyPointSettings' name='London' [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public emptyPointSettings?: Object;
    public marker?: Object;

    ngOnInit(): void {
        this.chartData = splineData;
        this.marker = { visible: true };
        this.primaryXAxis = {
            title: 'Month',
            valueType: 'Category'
        };
        this.emptyPointSettings = {
            mode: 'Zero',
            fill: '#FF8C00'
        };
        this.title = 'Climate Graph-2012';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let splineData: Object[] = [
    { x: 'Jan', y: -1 },
    { x: 'Feb', y: -1 },
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: null },
    { x: 'May', y: 13 },
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 },
    { x: 'Aug', y: 20 },
    { x: 'Sep', y: undefined },
    { x: 'Oct', y: 10 },
    { x: 'Nov', y: 4 },
    { x: 'Dec', y: 0 }
];

Empty-point border

Use the emptyPointSettings.border property to customize the width and color of a rendered empty point.

app.component.ts
main.ts
datasource.ts
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, SplineSeriesService } from '@syncfusion/ej2-angular-charts';

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

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, SplineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Spline' xName='x' yName='y' [emptyPointSettings]='emptyPointSettings' name='London' [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public emptyPointSettings?: Object;
    public marker?: Object;

    ngOnInit(): void {
        this.chartData = splineData;
        this.primaryXAxis = {
            title: 'Month',
            valueType: 'Category'
        };
        this.marker = { visible: true };
        this.emptyPointSettings = {
            mode: 'Zero',
            fill: '#FF8C00',
            border: { width: 2, color: '#000080' }
        };
        this.title = 'Climate Graph-2012';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let splineData: Object[] = [
    { x: 'Jan', y: -1 },
    { x: 'Feb', y: -1 },
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: null },
    { x: 'May', y: 13 },
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 },
    { x: 'Aug', y: 20 },
    { x: 'Sep', y: undefined },
    { x: 'Oct', y: 10 },
    { x: 'Nov', y: 4 },
    { x: 'Dec', y: 0 }
];

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 and data properties.

<ejs-chart (seriesRender)="onSeriesRender($event)"></ejs-chart>

app.component.ts
main.ts
datasource.ts
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, SplineSeriesService } from '@syncfusion/ej2-angular-charts';
import { ISeriesRenderEventArgs } from '@syncfusion/ej2-charts';

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

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, SplineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" (seriesRender)='seriesRender($event)' [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Spline' xName='x' yName='y' name='London'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;

    ngOnInit(): void {
        this.chartData = splineData;
        this.primaryXAxis = {
            title: 'Month',
            valueType: 'Category'
        };
        this.title = 'Climate Graph-2012';
    }

    public seriesRender(args: ISeriesRenderEventArgs): void {
        args.fill = '#ff6347';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let splineData: Object[] = [
    { x: 'Jan', y: -1 },
    { x: 'Feb', y: -1 },
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 },
    { x: 'May', y: 13 },
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 },
    { x: 'Aug', y: 20 },
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 },
    { x: 'Nov', y: 4 },
    { x: 'Dec', y: 0 }
];

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.

<ejs-chart (pointRender)="onPointRender($event)"></ejs-chart>

app.component.ts
main.ts
datasource.ts
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, SplineSeriesService } from '@syncfusion/ej2-angular-charts';
import { IPointRenderEventArgs } from '@syncfusion/ej2-charts';

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

@Component({
    imports: [
        ChartModule
    ],
    providers: [CategoryService, SplineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" (pointRender)='pointRender($event)' [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Spline' xName='x' yName='y' name='London' [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;

    ngOnInit(): void {
        this.chartData = splineData;
        this.marker = { visible: true };
        this.primaryXAxis = {
            title: 'Month',
            valueType: 'Category'
        };
        this.title = 'Climate Graph-2012';
    }

    public pointRender(args: IPointRenderEventArgs): void {
        args.fill = '#ff6347';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let splineData: Object[] = [
    { x: 'Jan', y: -1 },
    { x: 'Feb', y: -1 },
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 },
    { x: 'May', y: 13 },
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 },
    { x: 'Aug', y: 20 },
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 },
    { x: 'Nov', y: 4 },
    { x: 'Dec', y: 0 }
];

Troubleshooting

The spline curve is not displayed: Confirm that SplineSeriesService is registered, the series type is Spline, and that xName / yName map to fields in the data source.
A gradient is not displayed: Confirm that the SVG gradient ID defined in index.html matches the series fill value (url(#gradient)) exactly.
An empty point is missing: Review emptyPointSettings.mode and verify that the mapped value is null or undefined (not 0 or '').
The width property has no effect: Confirm that you are setting width on the <e-series> directive and not on border.width.

Search docs

Ask Syncfusion AI Assistant