Angular Chart - Getting Started

jQuery

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

Angular

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

Vue

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

React

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

The DevExtreme Chart is an interactive UI component that visualizes data using multiple series types: lines, bars, bubbles, candlesticks, and more.

This tutorial explains how to add a Chart to a page and configure component core settings.

Each section in this tutorial covers a single configuration step. You can find the complete source code in the following GitHub repository:

View on GitHub

Create a Chart

jQuery

Add DevExtreme to your jQuery application and use the following code snippet to create a Chart:

index.js

index.html

$(function() {
    $("#chart").dxChart({
        // Configuration goes here
    });
});

<html>
    <head>
        <!-- ... -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/25.1.4/css/dx.light.css">
        <link rel="stylesheet" href="index.css">

        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/25.1.4/js/dx.all.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body class="dx-viewport">
        <div id="chart"></div>
    </body>
</html>

Angular

Add DevExtreme to your Angular application and use the following code snippet to create a Chart:

app.component.html

app.component.ts

app.module.ts

<dx-chart id="chart"
    <!-- Configuration goes here -->
>
</dx-chart>

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxChartModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxChartModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

Add DevExtreme to your Vue application and use the following code snippet to create a Chart:

App.vue

<template>
    <DxChart id="chart">
        <!-- Configuration goes here -->
    </DxChart>
</template>

<script setup lang="ts">
import 'devextreme/dist/css/dx.light.css';
import DxChart from 'devextreme-vue/chart';
</script>

React

Add DevExtreme to your React application and use the following code snippet to create a Chart:

App.tsx

import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import Chart from 'devextreme-react/chart';

function App() {
    return (
        <Chart id="chart">
            {/* Configuration goes here */}
        </Chart>
    );
}

export default App;

Display Chart Data

To bind a DevExtreme Chart to data, specify the dataSource property. Ensure that the data source contains items with at least two fields: an argument and a value. The Chart looks for fields named arg and val. If field names are different, assign these names to series.argumentField and series.valueField properties:

jQuery

index.js

$(() => {
    $('#chart').dxChart({
        dataSource: chartData,
        series: [{
            argumentField: 'month',
            valueField: 'targetSpend',
        }],
    });
});

const chartData = [
    { month: 'January', targetSpend: 12000 },
    { month: 'February', targetSpend: 15500 },
    { month: 'March', targetSpend: 13500 },
    { month: 'April', targetSpend: 16000 },
    { month: 'May', targetSpend: 17000 },
    { month: 'June', targetSpend: 20000 },
    { month: 'July', targetSpend: 14500 },
    { month: 'August', targetSpend: 21000 },
    { month: 'September', targetSpend: 19000 },
    { month: 'October', targetSpend: 22000 },
    { month: 'November', targetSpend: 16000 },
    { month: 'December', targetSpend: 25000 },
];

Angular

app.component.html

app.component.ts

<dx-chart [dataSource]="chartData" >
    <dxi-series
        argumentField="month"
        valueField="targetSpend"
    ></dxi-series>
</dx-chart>

export class AppComponent {
    chartData = [
        { month: 'January', targetSpend: 12000 },
        { month: 'February', targetSpend: 15500 },
        { month: 'March', targetSpend: 13500 },
        { month: 'April', targetSpend: 16000 },
        { month: 'May', targetSpend: 17000 },
        { month: 'June', targetSpend: 20000 },
        { month: 'July', targetSpend: 14500 },
        { month: 'August', targetSpend: 21000 },
        { month: 'September', targetSpend: 19000 },
        { month: 'October', targetSpend: 22000 },
        { month: 'November', targetSpend: 16000 },
        { month: 'December', targetSpend: 25000 },
    ];
}

Vue

App.vue

<script setup lang="ts">

const chartData = [
    { month: 'January', targetSpend: 12000 },
    { month: 'February', targetSpend: 15500 },
    { month: 'March', targetSpend: 13500 },
    { month: 'April', targetSpend: 16000 },
    { month: 'May', targetSpend: 17000 },
    { month: 'June', targetSpend: 20000 },
    { month: 'July', targetSpend: 14500 },
    { month: 'August', targetSpend: 21000 },
    { month: 'September', targetSpend: 19000 },
    { month: 'October', targetSpend: 22000 },
    { month: 'November', targetSpend: 16000 },
    { month: 'December', targetSpend: 25000 },
];

</script>

<template>
    <div>
        <DxChart :data-source="chartData" >
            <DxSeries
                argument-field="month"
                value-field="targetSpend"
            />
        </DxChart>
    </div>
</template>

React

App.tsx

const chartData = [
    { month: 'January', targetSpend: 12000 },
    { month: 'February', targetSpend: 15500 },
    { month: 'March', targetSpend: 13500 },
    { month: 'April', targetSpend: 16000 },
    { month: 'May', targetSpend: 17000 },
    { month: 'June', targetSpend: 20000 },
    { month: 'July', targetSpend: 14500 },
    { month: 'August', targetSpend: 21000 },
    { month: 'September', targetSpend: 19000 },
    { month: 'October', targetSpend: 22000 },
    { month: 'November', targetSpend: 16000 },
    { month: 'December', targetSpend: 25000 },
];

function App(): JSX.Element {
    return (
        <>
            <Chart dataSource={chartData} >
                <Series
                    argumentField='month'
                    valueField='targetSpend'
                />
            </Chart>
        </>
    );
}

export default App;

Configure Chart Series

To configure how a Chart displays data, specify series object properties. This example implements the following properties: type, name, and color.

jQuery

index.js

$(() => {
    $('#chart').dxChart({
        dataSource: chartData,
        series: [{
            type: 'bar',
            argumentField: 'month',
            valueField: 'targetSpend',
            name: 'Budget',
            color: '#5996ff',
        }],
    });
});

Angular

app.component.html

<dx-chart [dataSource]="chartData" >
    <dxi-series
        type="bar"
        argumentField="month"
        valueField="targetSpend"
        name="Budget"
        color="#5996ff"
    ></dxi-series>
</dx-chart>

Vue

App.vue

<template>
    <div>
        <DxChart :data-source="chartData" >
            <DxSeries
                type="bar"
                argument-field="month"
                value-field="targetSpend"
                name="Budget"
                color="#5996ff"
            />
        </DxChart>
    </div>
</template>

React

App.tsx

function App(): JSX.Element {
    return (
        <>
            <Chart dataSource={chartData} >
                <Series
                    type='bar'
                    argumentField='month'
                    valueField='targetSpend'
                    name='Budget'
                    color='#5996ff'
                />
            </Chart>
        </>
    );
}

export default App;

Specify Multiple Series

jQuery

To configure Chart with multiple series, update your data source with additional value fields and specify additional series objects. This example configures two series to display a spline and a bar chart:

index.js

$(() => {
    $('#chart').dxChart({
        dataSource: chartData,
        series: [{
            type: 'bar',
            argumentField: 'month',
            valueField: 'targetSpend',
            name: 'Budget',
            color: '#5996ff',
        }, {
            type: 'spline',
            argumentField: 'month',
            valueField: 'actualSpend',
            name: 'Amount Spent',
            color: '#cb4bfa',
        }],
    });
});

const chartData = [
    { month: 'January', targetSpend: 12000, actualSpend: 9500 },
    { month: 'February', targetSpend: 15500, actualSpend: 16500 },
    { month: 'March', targetSpend: 13500, actualSpend: 12000 },
    { month: 'April', targetSpend: 16000, actualSpend: 14000 },
    { month: 'May', targetSpend: 17000, actualSpend: 18500 },
    { month: 'June', targetSpend: 20000, actualSpend: 17500 },
    { month: 'July', targetSpend: 14500, actualSpend: 11000 },
    { month: 'August', targetSpend: 21000, actualSpend: 22500 },
    { month: 'September', targetSpend: 19000, actualSpend: 18000 },
    { month: 'October', targetSpend: 22000, actualSpend: 25000 },
    { month: 'November', targetSpend: 16000, actualSpend: 14500 },
    { month: 'December', targetSpend: 25000, actualSpend: 27000 },
];

Angular

To configure Chart with multiple series, update your data source with additional value fields and specify additional <dxi-series> selectors. This example configures two series to display a spline and a bar chart:

app.component.html

app.component.ts

<dx-chart [dataSource]="chartData" >
    <dxi-series
        type="bar"
        argumentField="month"
        valueField="targetSpend"
        name="Budget"
        color="#5996ff"
    ></dxi-series>
    <dxi-series
        type="spline"
        argumentField="month"
        valueField="actualSpend"
        name="Amount Spent"
        color="#cb4bfa"
    ></dxi-series>
</dx-chart>

export class AppComponent {
    chartData = [
        { month: 'January', targetSpend: 12000, actualSpend: 9500 },
        { month: 'February', targetSpend: 15500, actualSpend: 16500 },
        { month: 'March', targetSpend: 13500, actualSpend: 12000 },
        { month: 'April', targetSpend: 16000, actualSpend: 14000 },
        { month: 'May', targetSpend: 17000, actualSpend: 18500 },
        { month: 'June', targetSpend: 20000, actualSpend: 17500 },
        { month: 'July', targetSpend: 14500, actualSpend: 11000 },
        { month: 'August', targetSpend: 21000, actualSpend: 22500 },
        { month: 'September', targetSpend: 19000, actualSpend: 18000 },
        { month: 'October', targetSpend: 22000, actualSpend: 25000 },
        { month: 'November', targetSpend: 16000, actualSpend: 14500 },
        { month: 'December', targetSpend: 25000, actualSpend: 27000 },
    ];
}

Vue

To configure Chart with multiple series, update your data source with additional value fields and specify additional <DxSeries> selectors. This example configures two series to display a spline and a bar chart:

App.vue

<script setup lang="ts">

const chartData = [
    { month: 'January', targetSpend: 12000, actualSpend: 9500 },
    { month: 'February', targetSpend: 15500, actualSpend: 16500 },
    { month: 'March', targetSpend: 13500, actualSpend: 12000 },
    { month: 'April', targetSpend: 16000, actualSpend: 14000 },
    { month: 'May', targetSpend: 17000, actualSpend: 18500 },
    { month: 'June', targetSpend: 20000, actualSpend: 17500 },
    { month: 'July', targetSpend: 14500, actualSpend: 11000 },
    { month: 'August', targetSpend: 21000, actualSpend: 22500 },
    { month: 'September', targetSpend: 19000, actualSpend: 18000 },
    { month: 'October', targetSpend: 22000, actualSpend: 25000 },
    { month: 'November', targetSpend: 16000, actualSpend: 14500 },
    { month: 'December', targetSpend: 25000, actualSpend: 27000 },
];

</script>

<template>
    <div>
        <DxChart :data-source="chartData" >
            <DxSeries
                type="bar"
                argument-field="month"
                value-field="targetSpend"
                name="Budget"
                color="#5996ff"
            />
            <DxSeries
                type="spline"
                argument-field="month"
                value-field="actualSpend"
                name="Amount Spent"
                color="#cb4bfa"
            />
        </DxChart>
    </div>
</template>

React

To configure Chart with multiple series, update your data source with additional value fields and specify additional <Series> selectors. This example configures two series to display a spline and a bar chart:

App.tsx

const chartData = [
    { month: 'January', targetSpend: 12000, actualSpend: 9500 },
    { month: 'February', targetSpend: 15500, actualSpend: 16500 },
    { month: 'March', targetSpend: 13500, actualSpend: 12000 },
    { month: 'April', targetSpend: 16000, actualSpend: 14000 },
    { month: 'May', targetSpend: 17000, actualSpend: 18500 },
    { month: 'June', targetSpend: 20000, actualSpend: 17500 },
    { month: 'July', targetSpend: 14500, actualSpend: 11000 },
    { month: 'August', targetSpend: 21000, actualSpend: 22500 },
    { month: 'September', targetSpend: 19000, actualSpend: 18000 },
    { month: 'October', targetSpend: 22000, actualSpend: 25000 },
    { month: 'November', targetSpend: 16000, actualSpend: 14500 },
    { month: 'December', targetSpend: 25000, actualSpend: 27000 },
];

function App(): JSX.Element {
    return (
        <>
            <Chart dataSource={chartData} >
                <Series
                    type='bar'
                    argumentField='month'
                    valueField='targetSpend'
                    name='Budget'
                    color='#5996ff'
                />
                <Series
                    type='spline'
                    argumentField='month'
                    valueField='actualSpend'
                    name='Amount Spent'
                    color='#cb4bfa'
                />
            </Chart>
        </>
    );
}

export default App;

Add and Customize Tooltips

To add tooltips to a Chart, assign true to the tooltip.enabled property. Default tooltips display values when users hover over points. To implement custom tooltips, define the customizeTooltip function. This example uses customizeTooltip to display the difference between current and average actualSpend values (calculated in the calculateAverageSpend() method):

jQuery

index.js

const formatNumber = DevExpress.localization.formatNumber;

$(() => {
    $('#chart').dxChart({
        dataSource: chartData,
        tooltip: {
            enabled: true,
            customizeTooltip,
        },
    });
});

const averageSpend = calculateAverageSpend();

function calculateAverageSpend() {
    const sum = chartData.reduce((accumulator, { actualSpend }) => accumulator + actualSpend, 0);

    return sum / chartData.length;
}

function customizeTooltip(data) {
    if (data.seriesName === 'Budget') {
        return { text: formatNumber(data.value, 'currency') };
    }
    const isValueAboveAverage = data.value > averageSpend;
    if (isValueAboveAverage) {
        return { text: `${formatNumber(data.value, 'currency')}\n${formatNumber(data.value - averageSpend, 'currency')} above average spending.` };
    }

    return { text: `${formatNumber(data.value, 'currency')}\n${formatNumber(averageSpend - data.value, 'currency')} below average spending.` };
}

Angular

app.component.html

app.component.ts

<dx-chart [dataSource]="chartData" >
    <dxo-tooltip
        [enabled]="true"
        [customizeTooltip]="customizeTooltip"
    ></dxo-tooltip>
</dx-chart>

import { formatNumber } from 'devextreme/localization';

export class AppComponent {
    averageSpend = this.calculateAverageSpend();

    calculateAverageSpend(): number {
        const sum = this.chartData.reduce((accumulator, { actualSpend }) => accumulator + actualSpend, 0);

        return sum / this.chartData.length;
    }

    customizeTooltip: (data: { value: number; seriesName: string }) => { text: string } = (data: { value: number; seriesName: string }) => {
        if (data.seriesName === 'Budget') {
            return { text: formatNumber(data.value, 'currency') };
        }
        const isValueAboveAverage = data.value > this.averageSpend;
        if (isValueAboveAverage) {
            return { text: `${formatNumber(data.value, 'currency')}\n${formatNumber(data.value - this.averageSpend, 'currency')} above average spending.` };
        }

        return { text: `${formatNumber(data.value, 'currency')}\n${formatNumber(this.averageSpend - data.value, 'currency')} below average spending.` };
    };
}

Vue

App.vue

<script setup lang="ts">
import { formatNumber } from 'devextreme/localization';

function calculateAverageSpend() {
    const sum = chartData.reduce((accumulator, { actualSpend }) => accumulator + actualSpend, 0);

    return sum / chartData.length;
}

const averageSpend = ref(calculateAverageSpend());

function customizeTooltip(data: { value: number; seriesName: string }) {
    if (data.seriesName === 'Budget') {
        return { text: formatNumber(data.value, 'currency') };
    }
    const isValueAboveAverage = data.value > calculateAverageSpend();
    if (isValueAboveAverage) {
        return { text: `${formatNumber(data.value, 'currency')}\n${formatNumber(data.value - averageSpend.value, 'currency')} above average spending.` };
    }

    return { text: `${formatNumber(data.value, 'currency')}\n${formatNumber(averageSpend.value - data.value, 'currency')} below average spending.` };
}
</script>

<template>
    <div>
        <DxChart :data-source="chartData" >
            <DxTooltip
                :enabled="true"
                :customize-tooltip="customizeTooltip"
            />
        </DxChart>
    </div>
</template>

React

App.tsx

import { formatNumber } from 'devextreme/localization';

function calculateAverageSpend(): number {
    const sum = chartData.reduce((accumulator, { actualSpend }) => accumulator + actualSpend, 0);

    return sum / chartData.length;
}

const averageSpend = calculateAverageSpend();

function customizeTooltip(data: { value: number; seriesName: string }): { text: string } {
    if (data.seriesName === 'Budget') {
        return { text: formatNumber(data.value, 'currency') };
    }
    const isValueAboveAverage = data.value > calculateAverageSpend();
    if (isValueAboveAverage) {
        return { text: `${formatNumber(data.value, 'currency')}\n${formatNumber(data.value - averageSpend, 'currency')} above average spending.` };
    }

    return { text: `${formatNumber(data.value, 'currency')}\n${formatNumber(averageSpend - data.value, 'currency')} below average spending.` };
}

function App(): JSX.Element {
    return (
        <>
            <Chart dataSource={chartData} >
                <Tooltip
                    enabled={true}
                    customizeTooltip={customizeTooltip}
                />
            </Chart>
        </>
    );
}

export default App;

Specify a Custom Gradient Background

You can customize the appearance of Chart elements. To configure a background gradient, set commonPaneSettings.backgroundColor to a ChartsColor object. In this object, assign the registerGradient return value to fillId:

jQuery

index.js

const registerGradient = DevExpress.common.charts.registerGradient;

$(() => {
    $('#chart').dxChart({
        dataSource: chartData,
        commonPaneSettings: {
            backgroundColor: {
                base: '#ffffff',
                fillId: registerGradient('linear', {
                    colors: [{
                        offset: '20%',
                        color: '#dee4ff',
                    }, {
                        offset: '90%',
                        color: '#ffdeff',
                    }],
                }),
            },
        },
    });
});

Angular

app.component.html

app.component.ts

<dx-chart [dataSource]="chartData" >
    <dxo-common-pane-settings>
        <dxo-background-color
            base="#ffffff"
            [fillId]="chartGradient"
        ></dxo-background-color>
    </dxo-common-pane-settings>
</dx-chart>

import { registerGradient } from 'devextreme-angular/common/charts';

export class AppComponent {
    chartGradient = registerGradient('linear', {
        colors: [{
            offset: '20%',
            color: '#dee4ff',
        }, {
            offset: '90%',
            color: '#ffdeff',
        }],
    });
}

Vue

App.vue

<script setup lang="ts">
import { registerGradient } from 'devextreme-vue/common/charts';

const chartGradient = registerGradient('linear', {
    colors: [{
        offset: '20%',
        color: '#dee4ff',
    }, {
        offset: '90%',
        color: '#ffdeff',
    }],
});
</script>

<template>
    <div>
        <DxChart :data-source="chartData" >
            <DxCommonPaneSettings>
                <DxBackgroundColor
                    base="#ffffff"
                    :fill-id="chartGradient"
                />
            </DxCommonPaneSettings>
        </DxChart>
    </div>
</template>

React

App.tsx

import { registerGradient } from 'devextreme-react/common/charts';

const chartGradient = registerGradient('linear', {
    colors: [{
        offset: '20%',
        color: '#dee4ff',
    }, {
        offset: '90%',
        color: '#ffdeff',
    }],
});

function App(): JSX.Element {
    return (
        <>
            <Chart dataSource={chartData} >
                <CommonPaneSettings>
                    <BackgroundColor
                        base='#ffffff'
                        fillId={chartGradient}
                    >
                    </BackgroundColor>
                </CommonPaneSettings>
            </Chart>
        </>
    );
}

export default App;

Add a Constant Line

DevExtreme Chart can display horizontal or vertical constant lines as points of reference. The following example uses the valueAxis.constantLines property to display a horizontal constant line that indicates the yearly spending average (averageSpend):

jQuery

index.js

const registerGradient = DevExpress.common.charts.registerGradient;

$(() => {
    $('#chart').dxChart({
        dataSource: chartData,
        valueAxis: [{
            constantLines: [{
                value: averageSpend,
                color: '#0000c7',
                label: {
                    text: 'Yearly Spend Average',
                },
            }],
        }],
    });
});

Angular

app.component.html

<dx-chart [dataSource]="chartData">
    <dxi-value-axis>
        <dxi-constant-line [value]="averageSpend">
            <dxo-label text="Yearly Spend Average"></dxo-label>
        </dxi-constant-line>
    </dxi-value-axis>
</dx-chart>

Vue

App.vue

<template>
    <div>
        <DxChart :data-source="chartData" >
            <DxValueAxis>
                <DxConstantLine
                    :value="averageSpend"
                    color="#0000c7"
                >
                    <DxLabel
                        text="Yearly Spend Average"
                    />
                </DxConstantLine>
            </DxValueAxis>
        </DxChart>
    </div>
</template>

React

App.tsx

function App(): JSX.Element {
    return (
        <>
            <Chart dataSource={chartData} >
                <ValueAxis>
                    <ConstantLine
                        value={averageSpend}
                        color='#0000c7'
                    >
                        <Label text='Yearly Spend Average' />
                    </ConstantLine>
                </ValueAxis>
            </Chart>
        </>
    );
}

export default App;

Was this topic helpful?

Thank you!

Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!