JavaScript/jQuery 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;