Chart Series Types

Topics in this section describe the series types that come with the dxChart widget. Each topic gives an overview of a series type purpose, and details ways to enable and tune it to your needs.

Area

The "area" series type is useful when you need to emphasize a change in values. With this series type, data is displayed by a straight line that joins points, and the shaded area between this line and the argument axis. This line is a border and is invisible by default.

AreaSeriesType ChartJS

To use the "area" series type, set the 'area' to the type property of the series configuration object.

JavaScript
var chartOptions = {
    series: {
        type: 'area'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the series default appearance, set the options of the series configuration object. For instance, you can change the following.

  • Area Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property. This color will be used for the series' border. The color of the series area will be the same, but a specified opacity will be applied.
  • Border Options
    Make a border visible by setting the visible property of the series' border object. When the border is visible, you can change its width and color, using the width, color and dashStyle properties of the series' border object. In addition, you can change the border settings when the series is hovered or selected. To do this, set the properties of the border object within the series' hoverStyle or selectionStyle configuration object.
  • Point Options
    Make points visible by setting the visible property of the series' point object. For details on other point options, refer to the Series Points topic.
  • Point Label Options
    Make point labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the area type are explained in the AreaSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { company: 'ExxonMobil', 2004: 277.02, 2005: 362.53},
    { company: 'General Electric', 2004: 328.54, 2005: 348.45},
    { company: 'Microsoft', 2004: 297.02, 2005: 279.02},
    { company: 'Citigroup', 2004: 255.3, 2005: 230.93},
    { company: 'Royal Dutch Shell plc', 2004: 173.54, 2005: 203.52},
    { company: 'Procter &amp; Gamble', 2004: 131.89, 2005: 197.12}
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'company',
            type: 'area'
        },
        series: [
            { valueField: '2004', name: '2004' },
            { valueField: '2005', name: '2005' }
        ],
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        },
        title: {
            text: 'Corporations with Highest Market Value'
        }
    });
});
#chartContainer {
  width: 100%; 
  height: 100%;
}

Bar

In the "bar" series type, data is displayed as sets of rectangular bars with lengths proportional to the values that they represent. Often, "bar" series are used to compare values in different discrete categories such as months, countries, age, etc. When there are several bar series, bars for each argument are displayed side-by-side. If you need to show bars for each series stacked on each other, use the "stackedBar" series type (see Stacked Bar).

BarSeriesType ChartJS

To use the "bar" series type, set 'bar' to the type property of the series configuration object.

JavaScript
var chartOptions = {
    series: {
        type: 'bar'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the series default appearance, set the options of the series configuration object. For instance, you can change the following.

  • Bar Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property.
  • Bar Border Options
    Make a border visible by setting the visible property of the series' border object. When the border is visible, you can change its width, style and color using the width, dashStyle and color properties of the series' border object. In addition, you can change the border settings when the series is hovered or selected. To do this, set the properties of the border object within the series' hoverStyle or selectionStyle configuration object.
  • Corner Radius
    Set a corner radius for bars using the series' cornerRadius property. This is helpful if you need rounded corners in bars.
  • Bar Label Options
    Make bar labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the bar type are explained in the BarSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { state: 'Illinois', year1998: 423.721, year2001: 476.851, year2004: 528.904 },
    { state: 'Indiana', year1998: 178.719, year2001: 195.769, year2004: 227.271 },
    { state: 'Michigan', year1998: 308.845, year2001: 335.793, year2004: 372.576 },
    { state: 'Ohio', year1998: 348.555, year2001: 374.771, year2004: 418.258 },
    { state: 'Wisconsin', year1998: 160.274, year2001: 182.373, year2004: 211.727 },
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'state',
            type: 'bar',
            label: {
                visible: true,
                format: "fixedPoint",
                precision: 2
            }
        },
        series: [
            { valueField: 'year2004', name: '2004' },
            { valueField: 'year2001', name: '2001' },
            { valueField: 'year1998', name: '1998' }
        ],
        title: {
            text: 'Great Lakes Gross State Product'
        },
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });
});

Bubble

When you use the bubble series type, the series points are displayed as bubbles of different sizes. This series type is especially useful when you visualize a data set with four dimensions: the first two dimensions are indicated by coordinates on the axes, the third - by a color, and the fourth - by the size of the bubble.

BubbleSeriesType ChartJS

To use the bubble series type, set 'bubble' to the type option of the series configuration object.

JavaScript
var chartOptions = {
    series: {
        type: 'bubble'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

NOTE: In addition to the argument and value fields, you should set the data source field that provides a size for bubbles. For this purpose, use the sizeField option.

To change the series default appearance, set the options of the series configuration object. For instance, you can change the following.

  • Bubble Color
    A color from the chart palette is used by default. Set a custom color using the series' color option. In addition, you can change the color of a bubble when it is hovered or selected using the color option of the hoverStyle or selectionStyle object, respectively.

  • Bubble Opacity
    Specify the opacity of a bubble using the opacity option.

  • Bubble Label Options
    Make bubble labels visible by setting the visible option of the series' label object to true. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the bubble type are explained in the BubbleSeries Reference section. Set the required series options within the series object of the chart configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { tag: 'Avatar (2009)', budget2000: 237000000, gross2000: 2782245172, relation2000: 11.739 },
    { tag: 'Titanic (1997)', budget1990: 200000000, gross1990: 2186772302, relation1990: 10.934 },
    { tag: 'The Avengers (2012)', budget2010: 220000000, gross2010: 1518594910, relation2010: 6.903 },
    { tag: 'Harry Potter and the Deathly Hallows Part 2 (2011)', budget2010: 125000000, gross2010: 1341511219, relation2010: 10.732 },
    { tag: 'Iron Man 3 (2013)', budget2010: 200000000, gross2010: 1215439994, relation2010: 6.077 },
    { tag: 'Transformers: Dark of the Moon (2011)', budget2010: 195000000, gross2010: 1123794079, relation2010: 5.763 },
    { tag: 'The Lord of the Rings: The Return of the King (2003)', budget2000: 94000000, gross2000: 1119929521, relation2000: 11.914 },
    { tag: 'Skyfall (2012)', budget2010: 200000000, gross2010: 1108561013, relation2010: 5.543 },
    { tag: 'The Dark Knight Rises (2012)', budget2010: 250000000, gross2010: 1084439099, relation2010: 4.338 },
    { tag: "Pirates of the Caribbean: Dead Man's Chest (2006)", budget2000: 225000000, gross2000: 1066179725, relation2000: 4.739 },
    { tag: 'Toy Story 3 (2010)', budget2010: 200000000, gross2010: 1063171911, relation2010: 5.316 },
    { tag: 'Pirates of the Caribbean: On Stranger Tides (2011)', budget2010: 250000000, gross2010: 1045713802, relation2010: 4.183 },
    { tag: 'Jurassic Park (1993)', budget1990: 63000000, gross1990: 1029153882, relation1990: 16.336 },
    { tag: 'Star Wars: Episode I - The Phantom Menace (1999)', budget1990: 115000000, gross1990: 1027044677, relation1990: 8.931 },
    { tag: 'Alice in Wonderland (2010)', budget2010: 200000000, gross2010: 1025467110, relation2010: 5.127 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'bubble'
        },
        argumentAxis: {
            title: 'Worldwide Gross',
            label: {
                format: 'largeNumber',
                precision: 1
            }
        },
        valueAxis: {
            title: 'Movie Budget',
            label: { format: 'largeNumber' }
        },
        series: [
            { argumentField: 'gross1990', valueField: 'budget1990', sizeField: 'relation1990', name: '1990 - 1999' },
            { argumentField: 'gross2000', valueField: 'budget2000', sizeField: 'relation2000', name: '2000 - 2009' },
            { argumentField: 'gross2010', valueField: 'budget2010', sizeField: 'relation2010', name: '2010 - now' }
        ],
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        tooltip: {
            enabled: true,
            customizeTooltip: function () {
                return {
                    text: this.point.tag
                };
            }
        },
        title: "15 Highest-Grossing Movies of All Time"
    });
});

Candle Stick

The "candlestick" series type is used to show the variation in the price of stock over the course of a day. Each point consists of a rectangle (body), whose bottom and top values correspond to the open and close prices, and a vertical line (shadow, wick or tail), whose bottom and top values correspond to the low and high prices. If the stock closes higher than its opening price, the body is hollow. And if the stock closes lower than its opening price, the body is filled.

CandleStickSeriesType ChartJS

To use the "candlestick" series type, set 'candlestick' to the type property of the series configuration object.

JavaScript
var chartOptions = {
    series: {
        type: 'candlestick'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

You can change the default appearance using series options. For instance, you can change the following.

  • Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property. You can also set the color to be used to fill in the body of points. For this purpose, use the series' innerColor property.
  • Reduction Options
    You can choose the price level (low, high, open or close) for which to enable reduction options, meaning that in case the value of a particular point's price level is lower in comparison to the value in the previous point, the subsequent point is painted in a specific color. To set the price to be compared, use the level property of the series' reduction object. To set a specific color for a subsequent price that is lower than the price in the previous point, use the color property of the series' reduction object.
  • Line Width
    Change the line width using the series' width property. To set a line width when the line is hovered or selected, set the width property of the hoverStyle or selectionStyle object, defined within the series configuration object.
  • Labels
    Make labels visible by setting the visible property of the series' label object. By default, labels show the value of the price that is specified as a reduction level (see above). You can also display other information. For details on label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the candleStick type are explained in the CandleStickSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    {date: new Date(1994,2,1), low: 24.00, high: 25.00, open: 25.00, close: 24.875},
    {date: new Date(1994,2,2), low: 23.625, high: 25.125, open: 24.00, close: 24.875},
    {date: new Date(1994,2,3), low: 26.25, high: 28.25, open: 26.75, close: 27.00},
    {date: new Date(1994,2,4), low: 26.50, high: 27.875, open: 26.875, close: 27.25},
    {date: new Date(1994,2,7), low: 26.375, high: 27.50, open: 27.375, close: 26.75},
    {date: new Date(1994,2,8), low: 25.75,high:  26.875, open: 26.75, close: 26.00},
    {date: new Date(1994,2,9), low: 25.75, high: 26.75, open: 26.125, close: 26.25},
    {date: new Date(1994,2,10), low: 25.75, high: 26.375, open: 26.375, close: 25.875},
    {date: new Date(1994,2,11), low: 24.875, high: 26.125, open: 26.00, close: 25.375},
    {date: new Date(1994,2,14), low: 25.125, high: 26.00, open: 25.625, close: 25.75},
    {date: new Date(1994,2,15), low: 25.875, high: 26.625, open: 26.125, close: 26.375},
    {date: new Date(1994,2,16), low: 26.25, high: 27.375, open: 26.25, close: 27.25},
    {date: new Date(1994,2,17), low: 26.875, high: 27.25, open: 27.125, close: 26.875},
    {date: new Date(1994,2,18), low: 26.375, high: 27.125, open: 27.00, close: 27.125},
    {date: new Date(1994,2,21), low: 26.75, high: 27.875, open: 26.875, close: 27.75},
    {date: new Date(1994,2,22), low: 26.75, high: 28.375, open: 27.50, close: 27.00},
    {date: new Date(1994,2,23), low: 26.875, high: 28.125, open: 27.00, close: 28.00},
    {date: new Date(1994,2,24), low: 26.25, high: 27.875, open: 27.75, close: 27.625},
    {date: new Date(1994,2,25), low: 27.50, high: 28.75, open: 27.75, close: 28.00},
    {date: new Date(1994,2,28), low: 25.75, high: 28.25, open: 28.00, close: 27.25},
    {date: new Date(1994,2,29), low: 26.375, high: 27.50, open: 27.50, close: 26.875},
    {date: new Date(1994,2,30), low: 25.75, high: 27.50, open: 26.375, close: 26.25},
    {date: new Date(1994,2,31), low: 24.75, high: 27.00, open: 26.50, close: 25.25},
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        series: { type: 'candlestick' },
        title: {
            text: 'Stock Prices'
        },
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        },
        tooltip: {
            enabled: true
        },
        argumentAxis: {
            label: {
                format: 'dd/MM'
            }
        }
    });
});

Full-Stacked Area

The "fullStackedArea" series type is used when it is necessary to compare the value percentage of several 'area' series for each argument. In this series type, the areas do not overlap because they are cumulative at each point. The value axis is always continuous and it displays a range from 0 to 100 percent.

FullStackedAreaSeriesType ChartJS

To use the "fullStackedArea" series type, set the type property of the series configuration object to 'fullStackedArea'.

JavaScript
var chartOptions = {
    series: {
        type: 'fullStackedArea'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the default appearance of a series, set the options of the series configuration object. For example, you can change the following:

  • Area Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property. This color will be used for the series border line. The color of the series area will be the same, but a particular opacity will be applied.
  • Border Options
    Make a border visible by setting the visible property of the series' border object. When the border is visible, you can change its width, color and style using the width, color and dashStyle properties of the series' border object. In addition, you can change the border settings when the series is hovered or selected. Set the properties of the border object within the series' hoverStyle or selectionStyle configuration object to do this.
  • Points
    Make points visible by setting the visible property of the series' point object. For details on other point options, refer to the Series Points topic.
  • Point Labels
    Make point labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the fullStackedArea type are explained in the FullStackedAreaSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
        { time: 'January', food: 3970, capital: 15366, auto: 7818, goods: 9064 },
        { time: 'March', food: 3875, capital: 15297, auto: 7518, goods: 9147 },
        { time: 'June', food: 4181, capital: 15957, auto: 7603, goods: 9311 },
        { time: 'August', food: 3826, capital: 15706, auto: 8046, goods: 9342 },
        { time: 'October', food: 3899, capital: 14940, auto: 8233, goods: 9244 },
        { time: 'December', food: 3941, capital: 15664, auto: 8642, goods: 10134 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'fullStackedArea',
            argumentField: 'time'
        },
        series: [
            { valueField: 'food', name: 'Food' },
            { valueField: 'capital', name: 'Capital Goods' },
            { valueField: 'auto', name: 'Automotive Vehicles' },
            { valueField: 'goods', name: 'Customer Goods' }
        ],
        title: {
            text: 'Exports of Good in USA by End-Use Category (2005)'
        },
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        },
        tooltip: {
            enabled: true
        }
    });
});

Full-Stacked Bar

The "fullStackedBar" series type is used when it's necessary to compare the value percentage of several 'bar' series for each argument. With this series type, data is displayed as rectangular bars with lengths proportional to their value percentage. Bars of each subsequent series are stacked on top of the bars of the previous series. The height of the resulting bar is always equal to 100 percent. The value axis is always continuous and displays the range from 0 to 100 percent.

FullStackedBarSeriesType ChartJS

To use the "fullStackedBar" series type, set the 'fullStackedBar' to the type property of the series configuration object.

JavaScript
var chartOptions = {
    series: {
        type: 'fullStackedBar'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the series default appearance, set the options of the series configuration object. For instance, you can change the following.

  • Bar Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property.
  • Bar Border Options
    Make a border visible by setting the visible property of the series' border object. When the border is visible, you can change its width, line style and color, using the width, dashStyle and color properties of the series' border object. In addition, you can change the border settings when the series is hovered or selected. To do this, set the properties of the border object within the series' hoverStyle or selectionStyle configuration object.
  • Corner Radius
    Set a corner radius for bars using the series' cornerRadius property. This is helpful if you need rounded corners in bars.
  • Stack
    Series values can be located in more than one stack for each argument value. Set the appropriate stack for a series using the stack property. This is helpful if you need to divide series between the required number of logical stacks (e.g., 'men' and 'women' stacks).
  • Bar Label Options
    Make bar labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the fullStackedBar type are explained in the FullStackedBarSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { state: 'Germany', young: 6.7, middle: 28.6, older: 5.1 },
    { state: 'Japan', young: 9.6, middle: 43.4, older: 9},
    { state: 'Russia', young: 13.5, middle: 49, older: 5.8 },
    { state: 'USA', young: 30, middle: 90.3, older: 14.5 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'state',
            type: 'fullStackedBar'
        },
        series: [
            { valueField: 'young', name: '0-14' },
            { valueField: 'middle', name: '15-64' },
            { valueField: 'older', name: '65 and older' }
        ],
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        },
        title: {
            text: 'Male Age Structure'
        }
    });
});

Full-Stacked Line

The "fullStackedLine" series type is used when it is necessary to compare the value percentage of several 'line' series for each argument. In this series type, series data is displayed as points joined by a straight line. The lines do not overlap because they are cumulative at each point. The value axis is always continuous, and it displays the range from 0 to 100 percent.

FullStackedLineSeriesType ChartJS

To use this series type, set the type property of the series configuration object to 'fullStackedLine'.

JavaScript
var chartOptions = {
    series: {
        type: 'fullStackedLine'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the default appearance of a series, set the options of the series configuration object. For example, you can change the following:

  • Line Width
    Change the line width using the series' width property. To set the line width when the line is hovered or selected, set the width property of the hoverStyle or selectionStyleobject defined within the series configuration object.
  • Line Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property.
  • Line Dash Style
    Set the line style using the series' dashStyle property. To set a dash style when the line is hovered or selected, set the dashStyle property of the hoverStyle or selectionStyle object defined within the series configuration object.
  • Line Point Options
    Set up the series' point object (see the Series Points topic).
  • Point Label Options
    Make point labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the fullStackedLine type are explained in the FullStackedLineSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { time: 'January', food: 3970, capital: 15366, auto: 7818, goods: 9064 },
    { time: 'March', food: 3875, capital: 15297, auto: 7518, goods: 9147 },
    { time: 'June', food: 4181, capital: 15957, auto: 7603, goods: 9311 },
    { time: 'August', food: 3826, capital: 15706, auto: 8046, goods: 9342 },
    { time: 'October', food: 3899, capital: 14940, auto: 8233, goods: 9244 },
    { time: 'December', food: 3941, capital: 15664, auto: 8642, goods: 10134 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'fullStackedLine',
            argumentField: 'time'
        },
        series: [
            { valueField: 'food', name: 'Food' },
            { valueField: 'capital', name: 'Capital Goods' },
            { valueField: 'auto', name: 'Automotive Vehicles' },
            { valueField: 'goods', name: 'Customer Goods' }
        ],
        title: {
            text: 'Exports of Good in USA by End-Use Category (2005)'
        },
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        },
        tooltip: {
            enabled: true
        }
    });
});

Full-Stacked Spline Area

The "fullStackedSplineArea" series type is used when it is necessary to compare the value percentage of several 'splineArea' series for each argument. In this series type, series data is displayed as points joined using a spline interpolation, and the shaded area between the spline and the argument axis. The joining line is the series' border, and it is not visible by default.

fullStackedSplineAreaSeriesType ChartJS

To use this series type, set the type property of the series configuration object to 'fullStackedSplineArea'.

JavaScript
var chartOptions = {
    series: {
        type: 'fullStackedSplineArea'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the default appearance of a series, set the options of the series configuration object. For example, you can change the following.

  • Line Width
    Change the line width using the series' width property. To set the line width when the line is hovered or selected, set the width property of the hoverStyle or selectionStyle object defined within the series configuration object.
  • Line Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property.
  • Line Dash Style
    Set the line style using the series' dashStyle property. To set a dash style when the line is hovered or selected, set the dashStyle property of the hoverStyle or selectionStyle object defined within the series configuration object.
  • Line Point Options
    Set up the series' point object (see the Series Points topic).
  • Point Label Options
    Make point labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the fullStackedSplineArea type are explained in the fullStackedSplineAreaSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
	{ quarter: '2011 Q1', android: 36.12, ios: 18.31, other: 45.57},
	{ quarter: '2011 Q2', android: 46.86, ios: 18.82, other: 34.31},
	{ quarter: '2011 Q3', android: 57.32, ios: 13.80, other: 28.79},
	{ quarter: '2011 Q4', android: 52.85, ios: 23.00, other: 24.15},
	{ quarter: '2012 Q1', android: 59.03, ios: 23.05, other: 17.93},
	{ quarter: '2012 Q2', android: 68.05, ios: 16.88, other: 15.07},
	{ quarter: '2012 Q3', android: 75.10, ios: 14.85, other: 10.05},
	{ quarter: '2012 Q4', android: 70.15, ios: 20.98, other: 8.87 },
	{ quarter: '2013 Q1', android: 74.98, ios: 17.30, other: 7.73 },
	{ quarter: '2013 Q2', android: 79.27, ios: 13.20, other: 7.53 },
	{ quarter: '2013 Q3', android: 81.04, ios: 12.95, other: 6.01 },
	{ quarter: '2013 Q4', android: 78.07, ios: 17.61, other: 4.32 },
	{ quarter: '2014 Q1', android: 83.06, ios: 15.55, other: 3.8  },
	{ quarter: '2014 Q2', android: 84.73, ios: 11.68, other: 3.59 },
	{ quarter: '2014 Q3', android: 84.37, ios: 11.70, other: 4    }
]

$(function () {
	$("#chartContainer").dxChart({
		dataSource: dataSource,
		commonSeriesSettings: {
			type: 'fullStackedSplineArea',
			argumentField: 'quarter',
			point: { visible: false }
		},
		series: [
            { valueField: 'android', name: 'Android' },
            { valueField: 'ios', name: 'iOS' },
            { valueField: 'other', name: 'Other' }
		],
		title: {
			text: 'IDC: World-Wide Smartphone Shipments'
		},
		legend: {
			verticalAlignment: 'bottom',
			horizontalAlignment: 'center'
		},
		tooltip: {
			enabled: true
		}
	});
});

Full-Stacked Spline

The "fullStackedSpline" series type is used when it is necessary to compare the value percentage of several 'spline' series for each argument. In this series type, series data is displayed as points joined using a spline interpolation. The lines do not overlap because they are cumulative at each point. The value axis is always continuous, and it displays the range from 0 to 100 percent.

fullStackedSplineSeriesType ChartJS

To use this series type, set the type property of the series configuration object to 'fullStackedSpline'.

JavaScript
var chartOptions = {
    series: {
        type: 'fullStackedSpline'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the default appearance of a series, set the options of the series configuration object. For example, you can change the following.

  • Line Width
    Change the line width using the series' width property. To set the line width when the line is hovered or selected, set the width property of the hoverStyle or selectionStyle object defined within the series configuration object.
  • Line Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property.
  • Line Dash Style
    Set the line style using the series' dashStyle property. To set a dash style when the line is hovered or selected, set the dashStyle property of the hoverStyle or selectionStyle object defined within the series configuration object.
  • Line Point Options
    Set up the series' point object (see the Series Points topic).
  • Point Label Options
    Make point labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the fullStackedSpline type are explained in the fullStackedSplineSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
	{ quarter: '2011 Q1', android: 36.12, ios: 18.31, other: 45.57},
	{ quarter: '2011 Q2', android: 46.86, ios: 18.82, other: 34.31},
	{ quarter: '2011 Q3', android: 57.32, ios: 13.80, other: 28.79},
	{ quarter: '2011 Q4', android: 52.85, ios: 23.00, other: 24.15},
	{ quarter: '2012 Q1', android: 59.03, ios: 23.05, other: 17.93},
	{ quarter: '2012 Q2', android: 68.05, ios: 16.88, other: 15.07},
	{ quarter: '2012 Q3', android: 75.10, ios: 14.85, other: 10.05},
	{ quarter: '2012 Q4', android: 70.15, ios: 20.98, other: 8.87 },
	{ quarter: '2013 Q1', android: 74.98, ios: 17.30, other: 7.73 },
	{ quarter: '2013 Q2', android: 79.27, ios: 13.20, other: 7.53 },
	{ quarter: '2013 Q3', android: 81.04, ios: 12.95, other: 6.01 },
	{ quarter: '2013 Q4', android: 78.07, ios: 17.61, other: 4.32 },
	{ quarter: '2014 Q1', android: 83.06, ios: 15.55, other: 3.8  },
	{ quarter: '2014 Q2', android: 84.73, ios: 11.68, other: 3.59 },
	{ quarter: '2014 Q3', android: 84.37, ios: 11.70, other: 4    }
]

$(function () {
	$("#chartContainer").dxChart({
		dataSource: dataSource,
		commonSeriesSettings: {
			type: 'fullStackedSpline',
			argumentField: 'quarter',
			point: { visible: false }
		},
		series: [
            { valueField: 'android', name: 'Android' },
            { valueField: 'ios', name: 'iOS' },
            { valueField: 'other', name: 'Other' }
		],
		title: {
			text: 'IDC: World-Wide Smartphone Shipments'
		},
		legend: {
			verticalAlignment: 'bottom',
			horizontalAlignment: 'center'
		},
		tooltip: {
			enabled: true
		}
	});
});

Line

With the "line" series type, data is displayed as points joined by a straight line. This series type, which is useful when you need to visualize a trend in data over intervals, is used in the dxChart widget by default. However, there may be scenarios when it is appropriate to set this series type explicitly. To do this, set 'line' to the type property of the series configuration object.

LineSeriesType ChartJS

JavaScript
var chartOptions = {
    series: {
        type: 'line'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the series default appearance, set the options of the series configuration object. For instance, you can change the following.

  • Line Width
    Change the line width using the series' width property. To set a line width when the line is hovered or selected, set the width property of the hoverStyle or selectionStyle object defined within the series configuration object.
  • Line Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property.
  • Line Dash Style
    Set the line's style using the series' dashStyle property. To set a dash style when the line is hovered or selected, set the dashStyle property of the hoverStyle or selectionStyle object defined within the series configuration object.
  • Line Point Options
    Set up the series' point object (see the Series Points topic).
  • Point Label Options
    Make point labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the line type are explained in the LineSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 1960, europe: 605, americas: 417, africa: 283 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        tooltip: {
            enabled: true
        },
        title: {
            text: 'Historic, Current and Future Population'
        },
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });
});

Range Area

The "rangeArea" series type is used to display value ranges corresponding to the specified arguments. In this series type, data is displayed as the shaded area between the line that joins the series' start points and the line that joins the series' end points. The line that joins data points is the series' border, which is not visible by default.

RangeAreaSeriesType ChartJS

To use the "rangeArea" series type, set the 'rangeArea' to the type property of the series configuration object.

JavaScript
var chartOptions = {
    series: {
        type: 'rangeArea'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the series default appearance, set the options of the series configuration object. For instance, you can change the following.

  • Area Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property. This color will be used for the series' border. The color of the series area will be the same, but a specified opacity will be applied.
  • Border Options
    Make a border visible by setting the visible property of the series' border object. When the border is visible, you can change its width, color and style using the width, color and dashStyle properties of the series' border object. In addition, you can change the border settings when the series is hovered or selected. To do this, set the properties of the border object within the series' hoverStyle or selectionStyle configuration object.
  • Point Options
    Make points visible by setting the visible property of the series' point object. For details on other point options, refer to the Series Points topic.
  • Point Label Options
    To make labels visible, set the visible property of the series' label object. Labels are shown for both the beginning and end values by default. You can allow other information to be shown. For details on label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the rangeArea type are explained in the RangeAreaSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { month: 'January', min: 2.08, max: 4.28 },
    { month: 'February', min: 2.42, max: 4.03 },
    { month: 'March', min: 2.78, max: 3.98 },
    { month: 'April', min: 2.57, max: 3.94 },
    { month: 'May', min: 2.69, max: 4.18 },
    { month: 'June', min: 2.69, max: 5.02 },
    { month: 'July', min: 2.36, max: 5.6 },
    { month: 'August', min: 1.97, max: 5.37 },
    { month: 'September', min: 2.76, max: 4.94 },
    { month: 'October', min: 3.54, max: 3.66 },
    { month: 'November', min: 1.07, max: 4.31 },
    { month: 'December', min: 0.09, max: 4.08 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        series: [
            {
                rangeValue1Field: 'min',
                rangeValue2Field: 'max',
                type: 'rangeArea',
                argumentField: 'month',
                name: '2007-2008'
            }
        ],
        title: 'Annual Inflation in 2007 and 2008',
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        },
        tooltip: {
            enabled: true
        }
    });
});

Range Bar

The "rangeBar" series type is used to display value ranges corresponding to the specified arguments. With this series type, data is displayed as sets of rectangular bars beginning at the specified start value and ending at the specified end value. When there are several "rangeBar" series, bars for each argument are displayed side-by-side.

RangeBarSeriesType ChartJS

To use the "rangeBar" series type, set the 'rangeBar' to the type property of the series configuration object.

JavaScript
var chartOptions = {
    series: {
        type: 'rangeBar'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the series default appearance, set the options of the series configuration object. For instance, you can change the following.

  • Bar Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property.
  • Bar Border Options
    Make a border visible by setting the visible property of the series' border object. When the border is visible, you can change its width, style and color using the width, dashStyle and color properties of the series' border object. In addition, you can change the border settings when the series is hovered or selected. To do this, set the properties of the border object within the series' hoverStyle or selectionStyle configuration object.
  • Corner Radius
    Set a corner radius for bars using the series' cornerRadius property. This is helpful if you need rounded corners in bars.
  • Bar Label Options
    To make bar labels visible, set the visible property of the series' label object. Bar labels are shown for both the beginning and end values by default. You can allow other information to be shown. For details on label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the rangeBar type are explained in the RangeBarSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { month: 'January', min1: 36, max1: 43.29, min2:  42.12, max2: 49.91 },
    { month: 'February', min1: 40.68, max1: 47.07, min2: 28.33, max2: 51.75 },
    { month: 'March', min1: 45.01, max1: 52.77, min2: 48.96, max2: 56.72},
    { month: 'April', min1: 45.99, max1: 54.14, min2: 49.72, max2: 57.27},
    { month: 'May', min1: 43.73, max1: 49.03, min2: 46.8, max2: 52.07},
    { month: 'June', min1: 49.94, max1: 57.94, min2: 52.54, max2: 60.54},
    { month: 'July', min1: 52.88, max1: 58.98, min2: 54.93, max2: 61.28},
    { month: 'August', min1: 58.81, max1: 67.06, min2: 60.86, max2: 68.94},
    { month: 'September', min1: 61, max1: 66.72, min2: 63, max2: 69.47},
    { month: 'October', min1: 57.86, max1: 63.47, min2: 59.76, max2: 65.47},
    { month: 'November', min1: 54.24, max1: 59.98, min2: 56.14, max2: 61.78},
    { month: 'December', min1: 55.22, max1: 59.22, min2: 57.34, max2: 61.37},
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'rangeBar',
            argumentField: 'month'
        },
        series: [
            { rangeValue1Field: 'min1', rangeValue2Field: 'max1', name: 'ANS West Coast' },
            { rangeValue1Field: 'min2', rangeValue2Field: 'max2', name: 'West Texas Intermediate' }
        ],
        title: {
            text: 'Crude Oil Prices in 2005'
        },
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        },
        tooltip: {
            enabled: true
        }
    });
});

Scatter

With the "scatter" series type, data is displayed as a collection of points. This series type is often used when a variable exists under the control of the tester.

ScatterSeriesType ChartJS

To use the "scatter" series type, set 'scatter' to the type property of the series configuration object.

JavaScript
var chartOptions = {
    series: {
        type: 'scatter'
    }
};

To learn how to specify data for a chart series, including "scatter" series, refer to the Data Binding topic.

You can change the default appearance using series options. For instance, you can change the following.

  • Point Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property.
  • Point Options
    Set up the series' point object (see the Series Points topic).
  • Point Labels
    Make point labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the scatter type are explained in the ScatterSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { temperature: 14.2, sales: 215 },
    { temperature: 16.4, sales: 325 },
    { temperature: 11.9, sales: 185 },
    { temperature: 15.2, sales: 332 },
    { temperature: 18.5, sales: 406 },
    { temperature: 22.1, sales: 522 },
    { temperature: 19.4, sales: 412 },
    { temperature: 25.1, sales: 614 },
    { temperature: 23.4, sales: 544 },
    { temperature: 18.1, sales: 421 },
    { temperature: 22.6, sales: 445 },
    { temperature: 17.2, sales: 408 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'temperature',
            type: 'scatter'
        },
        series: {
            valueField: 'sales',
            argumentField: 'temperature',
            type: 'scatter',
            name: 'Ice Cream Sales'
        },
        tooltip: {
            enabled: true
        },
        title: {
            text: 'Ice Cream Sales vs Temperature'
        },
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });
});

Spline Area

The "splineArea" series type is useful when you need to emphasize a change in values, but smooth the line that connects the points. With this series type, data is displayed as points joined using a spline interpolation, and the shaded area between the spline and the argument axis. The joining line is the series' border, and it is not visible by default.

SplineAreaSeriesType ChartJS

To use the "splineArea" series type, set 'splineArea' to the type property of the series configuration object.

JavaScript
var chartOptions = {
    series: {
        type: 'splineArea'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the series default appearance, set the options of the series configuration object. For instance, you can change the following.

  • Area Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property. This color will be used for the series' border. The color of the series area will be the same, but a specified opacity will be applied.
  • Border Options
    Make a border visible by setting the visible property of the series' border object. When the border is visible, you can change its width, color and style, using the width, color and dashStyle properties of the series' border object. In addition, you can change the border settings when the series is hovered or selected. To do this, set the properties of the border object within the series' hoverStyle or selectionStyle configuration object.
  • Points
    Make points visible by setting the visible property of the series' point object. For details on other point options, refer to the Series Points topic.
  • Point Labels
    Make point labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the splineArea type are explained in the SplineAreaSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1995, revenue: 6.075, grossmargin: 4.729 },
    { year: 1996, revenue: 9.050, grossmargin: 6.905 },
    { year: 1997, revenue: 11.936, grossmargin: 9.766 },
    { year: 1998, revenue: 15.262, grossmargin: 12.802 },
    { year: 1999, revenue: 19.747, grossmargin: 16.933 },
    { year: 2000, revenue: 22.956, grossmargin: 19.954 },
    { year: 2001, revenue: 25.296, grossmargin: 21.841 },
    { year: 2002, revenue: 28.365, grossmargin: 22.666 },
    { year: 2003, revenue: 32.187, grossmargin: 26.128 },
    { year: 2004, revenue: 36.835, grossmargin: 30.239 },
    { year: 2005, revenue: 39.788, grossmargin: 33.757 },
    { year: 2006, revenue: 44.282, grossmargin: 36.632 },
    { year: 2007, revenue: 51.122, grossmargin: 40.429 },
    { year: 2008, revenue: 60.420, grossmargin: 48.822 },
    { year: 2009, revenue: 58.437, grossmargin: 46.282 },
    { year: 2010, revenue: 62.484, grossmargin: 50.089 },
    { year: 2011, revenue: 69.943, grossmargin: 54.366 },
    { year: 2012, revenue: 73.723, grossmargin: 56.193 },
    { year: 2013, revenue: 77.849, grossmargin: 57.6 },
    { year: 2014, revenue: 86.833, grossmargin: 59.755 }
];

$(function () {
	$("#chartContainer").dxChart({
		dataSource: dataSource,
		commonSeriesSettings: {
			type: 'splineArea',
			argumentField: 'year'
		},
		series: [
            { valueField: 'revenue', name: 'Revenue (in millions)' },
            { valueField: 'grossmargin', name: 'Gross margin (in millions)' },
		],
		tooltip: {
			enabled: true
		},
		legend: {
			verticalAlignment: 'bottom',
			horizontalAlignment: 'center',
			itemTextPosition: 'right'
		},
		title: {
			text: 'Microsoft inc. Yearly Income Statements'
		}
	});
});

Spline

With the "spline" series type, data is displayed as points joined using a spline interpolation. This series type is useful when you need to visualize a trend in data over intervals, and prefer smoothing the line that connects the points.

SplineSeriesType ChartJS

To use the "spline" series type, set 'spline' to the type property of the series configuration object.

JavaScript
var chartOptions = {
    series: {
        type: 'spline'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the series default appearance, set the options of the series configuration object. For instance, you can change the following.

  • Line Width
    Change the line width using the series' width property. To set a line width when the line is hovered or selected, set the width property of the hoverStyle or selectionStyle object defined within the series configuration object.
  • Line Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property.
  • Line Dash Style
    Set the line's style using the series' dashStyle property. To set a dash style when the line is hovered or selected, set the dashStyle property of the hoverStyle or selectionStyle object defined within the series configuration object.
  • Line Point Options
    Set up the series' point object (see the Series Points topic).
  • Point Label Options
    Make point labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the spline type are explained in the SplineSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1997, smp: 263, mmp: 226, cnstl: 10, cluster: 1 },
    { year: 1999, smp: 169, mmp: 256, cnstl: 66, cluster: 7 },
    { year: 2001, smp: 57, mmp: 257, cnstl: 143, cluster: 43 },
    { year: 2003, smp: 0, mmp: 163, cnstl: 127, cluster: 210 },
    { year: 2005, smp: 0, mmp: 103, cnstl: 36, cluster: 361 },
    { year: 2007, smp: 0, mmp: 91, cnstl: 3, cluster: 406 },
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'spline',
            argumentField: 'year'
        },
        series: [
            { valueField: 'smp', name: 'SMP' },
            { valueField: 'mmp', name: 'MMP' },
            { valueField: 'cnstl', name: 'cnstl' },
            { valueField: 'cluster', name: 'Cluster' },
        ],
        tooltip: {
            enabled: true
        },
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        },
        title: {
            text: 'Architecture Share Over Time (Count)'
        }
    });
});

Stacked Area

The "stackedArea" series type is used when you have several "area" series and it's necessary to compare how much each series adds to the total aggregate value for specific arguments. With this series type, the areas do not overlap because they are cumulative at each point.

StackedAreaSeriesType ChartJS

To use the "stackedArea" series type, set the 'stackedArea' to the type property of the series configuration object.

JavaScript
var chartOptions = {
    series: {
        type: 'stackedArea'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the series default appearance, set the options of the series configuration object. For instance, you can change the following.

  • Area Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property. This color will be used for the series' border line. The color of the series area will be the same, but a specified opacity will be applied.
  • Border Options
    Make a border visible by setting the visible property of the series' border object. When the border is visible, you can change its width, color and style, using the width, color and dashStyle properties of the series' border object. In addition, you can change the border settings when the series is hovered or selected. To do this, set the properties of the border object within the series' hoverStyle or selectionStyle configuration object.
  • Points
    Make points visible by setting the visible property of the series' point object. For details on other point options, refer to the Series Points topic.
  • Point Labels
    Make point labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the stackedArea type are explained in the StackedAreaSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
        { time: 'January', food: 3970, capital: 15366, auto: 7818, goods: 9064 },
        { time: 'March', food: 3875, capital: 15297, auto: 7518, goods: 9147 },
        { time: 'June', food: 4181, capital: 15957, auto: 7603, goods: 9311 },
        { time: 'August', food: 3826, capital: 15706, auto: 8046, goods: 9342 },
        { time: 'October', food: 3899, capital: 14940, auto: 8233, goods: 9244 },
        { time: 'December', food: 3941, capital: 15664, auto: 8642, goods: 10134 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'stackedArea',
            argumentField: 'time'
        },
        series: [
            { valueField: 'food', name: 'Food' },
            { valueField: 'capital', name: 'Capital Goods' },
            { valueField: 'auto', name: 'Automotive Vehicles' },
            { valueField: 'goods', name: 'Customer Goods' }
        ],
        title: {
            text: 'Exports of Good in USA by End-Use Category (2005)'
        },
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        },
        tooltip: {
            enabled: true
        }
    });
});

Stacked Bar

The "stackedBar" series type is used when there are several series that represent values for discrete categories. With this series type, data is displayed as rectangular bars with lengths proportional to the values that they represent. Bars of each subsequent series are stacked on top of the bars of the previous series. The height of the resulting bar shows the combined result of a category.

StackedBarSeriesType ChartJS

To use the "stackedBar" series type, set the 'stackedBar' to the type property of the series configuration object.

JavaScript
var chartOptions = {
    series: {
        type: 'stackedBar'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the series default appearance, set the options of the series configuration object. For instance, you can change the following.

  • Bar Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property.
  • Bar Border Options
    Make a border visible by setting the visible property of the series' border object. When the border is visible, you can change its width, line style and color, using the width, dashStyle and color properties of the series' border object. In addition, you can change the border settings when the series is hovered or selected. To do this, set the properties of the border object within the series' hoverStyle or selectionStyle configuration object.
  • Corner Radius
    Set a corner radius for bars using the series' cornerRadius property. This is helpful if you need rounded corners in bars.
  • Stack
    Series values can be located in more than one stack for each argument value. Set the appropriate stack for a series using the stack property. This is helpful if you need to divide series between the required number of logical stacks (e.g., 'men' and 'women' stacks).
  • Bar Label Options
    Make bar labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the stackedBar type are explained in the StackedBarSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { state: 'Germany', young: 6.7, middle: 28.6, older: 5.1 },
    { state: 'Japan', young: 9.6, middle: 43.4, older: 9},
    { state: 'Russia', young: 13.5, middle: 49, older: 5.8 },
    { state: 'USA', young: 30, middle: 90.3, older: 14.5 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'state',
            type: 'stackedBar'
        },
        series: [
            { valueField: 'young', name: '0-14' },
            { valueField: 'middle', name: '15-64' },
            { valueField: 'older', name: '65 and older' }
        ],
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        },
        title: {
            text: 'Male Age Structure'
        }
    });
});

Stacked Line

The "stackedLine" series type is used when you have several series and it's necessary to compare how much each series adds to the total aggregate value for specific arguments. With this series type, series data is displayed as points joined with a straight line. The lines do not overlap, because they are cumulative at each point.

StackedLineSeriesType ChartJS

To use this series type, set the 'stackedLine' to the type property of the series configuration object.

JavaScript
var chartOptions = {
    series: {
        type: 'stackedLine'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the series default appearance, set the options of the series configuration object. For instance, you can change the following.

  • Line Width
    Change the line width using the series' width property. To set a line width when the line is hovered or selected, set the width property of the hoverStyle or selectionStyle object defined within the series configuration object.
  • Line Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property.
  • Line Dash Style
    Set the line's style using the series' dashStyle property. To set a dash style when the line is hovered or selected, set the dashStyle property of the hoverStyle or selectionStyle object defined within the series configuration object.
  • Line Point Options
    Set up the series' point object (see Series Points topic).
  • Point Label Options
    Make point labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the stackedLine type are explained in the StackedLineSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { time: 'January', food: 3970, capital: 15366, auto: 7818, goods: 9064 },
    { time: 'March', food: 3875, capital: 15297, auto: 7518, goods: 9147 },
    { time: 'June', food: 4181, capital: 15957, auto: 7603, goods: 9311 },
    { time: 'August', food: 3826, capital: 15706, auto: 8046, goods: 9342 },
    { time: 'October', food: 3899, capital: 14940, auto: 8233, goods: 9244 },
    { time: 'December', food: 3941, capital: 15664, auto: 8642, goods: 10134 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'stackedLine',
            argumentField: 'time'
        },
        series: [
            { valueField: 'food', name: 'Food' },
            { valueField: 'capital', name: 'Capital Goods' },
            { valueField: 'auto', name: 'Automotive Vehicles' },
            { valueField: 'goods', name: 'Customer Goods' }
        ],
        title: {
            text: 'Exports of Good in USA by End-Use Category (2005)'
        },
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        },
        tooltip: {
            enabled: true
        }
    });
});

Stacked Spline Area

The "stackedSplineArea" series type is used when you have several "splineArea" series and it's necessary to compare how much each series adds to the total aggregate value for specific arguments. The areas do not overlap because they are cumulative at each point. With this series type, data is displayed as points joined using a spline interpolation, and the shaded area between the spline and the argument axis. The joining line is the series' border, and it is not visible by default.

StackedAreaSeriesType ChartJS

To use the "stackedSplineArea" series type, set the 'stackedSplineArea' to the type property of the series configuration object.

JavaScript
var chartOptions = {
    series: {
        type: 'stackedSplineArea'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the series default appearance, set the options of the series configuration object. For instance, you can change the following.

  • Area Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property. This color will be used for the series' border line. The color of the series area will be the same, but a specified opacity will be applied.
  • Border Options
    Make a border visible by setting the visible property of the series' border object. When the border is visible, you can change its width, color and style, using the width, color and dashStyle properties of the series' border object. In addition, you can change the border settings when the series is hovered or selected. To do this, set the properties of the border object within the series' hoverStyle or selectionStyle configuration object.
  • Points
    Make points visible by setting the visible property of the series' point object. For details on other point options, refer to the Series Points topic.
  • Point Labels
    Make point labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the stackedSplineArea type are explained in the StackedAreaSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
        { time: 'January', food: 3970, capital: 15366, auto: 7818, goods: 9064 },
        { time: 'March', food: 3875, capital: 15297, auto: 7518, goods: 9147 },
        { time: 'June', food: 4181, capital: 15957, auto: 7603, goods: 9311 },
        { time: 'August', food: 3826, capital: 15706, auto: 8046, goods: 9342 },
        { time: 'October', food: 3899, capital: 14940, auto: 8233, goods: 9244 },
        { time: 'December', food: 3941, capital: 15664, auto: 8642, goods: 10134 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'stackedSplineArea',
            argumentField: 'time'
        },
        series: [
            { valueField: 'food', name: 'Food' },
            { valueField: 'capital', name: 'Capital Goods' },
            { valueField: 'auto', name: 'Automotive Vehicles' },
            { valueField: 'goods', name: 'Customer Goods' }
        ],
        title: {
            text: 'Exports of Good in USA by End-Use Category (2005)'
        },
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        },
        tooltip: {
            enabled: true
        }
    });
});

Stacked Spline

The "stackedSpline" series type is used when you have several series and it's necessary to compare how much each series adds to the total aggregate value for specific arguments. With this series type, series data is displayed as points joined using a spline interpolation. The lines do not overlap, because they are cumulative at each point.

stackedSplineSeriesType ChartJS

To use this series type, set the 'stackedSpline' to the type property of the series configuration object.

JavaScript
var chartOptions = {
    series: {
        type: 'stackedSpline'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the series default appearance, set the options of the series configuration object. For instance, you can change the following.

  • Line Width
    Change the line width using the series' width property. To set a line width when the line is hovered or selected, set the width property of the hoverStyle or selectionStyle object defined within the series configuration object.
  • Line Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property.
  • Line Dash Style
    Set the line's style using the series' dashStyle property. To set a dash style when the line is hovered or selected, set the dashStyle property of the hoverStyle or selectionStyle object defined within the series configuration object.
  • Line Point Options
    Set up the series' point object (see Series Points topic).
  • Point Label Options
    Make point labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for StackedSpline type series are explained in the stackedSplineSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { time: 'January', food: 3970, capital: 15366, auto: 7818, goods: 9064 },
    { time: 'March', food: 3875, capital: 15297, auto: 7518, goods: 9147 },
    { time: 'June', food: 4181, capital: 15957, auto: 7603, goods: 9311 },
    { time: 'August', food: 3826, capital: 15706, auto: 8046, goods: 9342 },
    { time: 'October', food: 3899, capital: 14940, auto: 8233, goods: 9244 },
    { time: 'December', food: 3941, capital: 15664, auto: 8642, goods: 10134 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'stackedSpline',
            argumentField: 'time',
            point: { visible: false }
        },
        series: [
            { valueField: 'food', name: 'Food' },
            { valueField: 'capital', name: 'Capital Goods' },
            { valueField: 'auto', name: 'Automotive Vehicles' },
            { valueField: 'goods', name: 'Customer Goods' }
        ],
        title: {
            text: 'Exports of Good in USA by End-Use Category (2005)'
        },
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        },
        tooltip: {
            enabled: true
        }
    });
});

Step Area

The "stepArea" series type has all the features and characteristics of the "area" series type, but the line that joins points in the shortest way in the "area" series is replaced by the vertical and horizontal lines in the "stepArea" series. These lines form so-called "steps".

StepAreaSeriesType ChartJS

To use the "stepArea" series type, set the 'stepArea' to the type property of the series configuration object.

JavaScript
var chartOptions = {
    series: {
        type: 'stepArea'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the series default appearance, set the options of the series configuration object. For instance, you can change the following.

  • Area Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property. This color will be used for the series' border. The color of the series area will be the same, but a specified opacity will be applied.
  • Border Options
    Make a border visible by setting the visible property of the series' border object. When the border is visible, you can change its width and color, using the width, color and dashStyle properties of the series' border object. In addition, you can change the border settings when the series is hovered or selected. To do this, set the properties of the border object within the series' hoverStyle or selectionStyle configuration object.
  • Point Options
    Make points visible by setting the visible property of the series' point object. For details on other point options, refer to the Series Points topic.
  • Point Label Options
    Make point labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the stepArea type are explained in the StepAreaSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
  { year: 1896, gold: 2, silver: 0, bronze: 0 },
  { year: 1900, gold: 2, silver: 0, bronze: 3 },
  { year: 1904, gold: 0, silver: 0, bronze: 0 },
  { year: 1908, gold: 1, silver: 2, bronze: 2 },
  { year: 1912, gold: 2, silver: 2, bronze: 3 },
  { year: 1916, gold: 0, silver: 0, bronze: 0 },
  { year: 1920, gold: 0, silver: 2, bronze: 1 },
  { year: 1924, gold: 3, silver: 1, bronze: 2 },
  { year: 1928, gold: 1, silver: 2, bronze: 1 },
  { year: 1932, gold: 3, silver: 1, bronze: 1 },
  { year: 1936, gold: 0, silver: 0, bronze: 1 },
  { year: 1940, gold: 0, silver: 0, bronze: 0 },
  { year: 1944, gold: 0, silver: 0, bronze: 0 },
  { year: 1948, gold: 2, silver: 6, bronze: 5 },
  { year: 1952, gold: 6, silver: 2, bronze: 3 },
  { year: 1956, gold: 13, silver: 8, bronze: 14 },
  { year: 1960, gold: 8, silver: 8, bronze: 6 },
  { year: 1964, gold: 6, silver: 2, bronze: 10 },
  { year: 1968, gold: 5, silver: 7, bronze: 5 },
  { year: 1972, gold: 8, silver: 7, bronze: 2 },
  { year: 1976, gold: 0, silver: 1, bronze: 4 },
  { year: 1980, gold: 2, silver: 2, bronze: 5 },
  { year: 1984, gold: 4, silver: 8, bronze: 12 },
  { year: 1988, gold: 3, silver: 6, bronze: 5 },
  { year: 1992, gold: 7, silver: 9, bronze: 11 },
  { year: 1996, gold: 9, silver: 9, bronze: 23 },
  { year: 2000, gold: 16, silver: 25, bronze: 17 },
  { year: 2004, gold: 17, silver: 16, bronze: 16 },
  { year: 2008, gold: 14, silver: 15, bronze: 17 }];

$(function () {
    $("#chartContainer").dxChart({
        title: 'Australia Olympic Medals',
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'stepArea',
            argumentField: 'year',
            steparea: {
                border: {
                    visible: false
                }
            }
        },
        series: [
            { valueField: 'bronze', name: 'Bronze Medals', color: 'orangered' },
            { valueField: 'silver', name: 'Silver Medals', color: 'silver' },
            { valueField: 'gold', name: 'Gold Medals', color: 'gold' }
        ],
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });
});

Step Line

The "stepLine" series type has all the features and characteristics of the "line" series type, but the line that joins points in the shortest way in the "line" series is replaced by the vertical and horizontal lines in the "stepLine" series. These lines form so-called "steps".

StepLineSeriesType ChartJS

To use the "stepLine" series type, set the 'stepLine' to the type property of the series configuration object.

JavaScript
var chartOptions = {
    series: {
        type: 'stepLine'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the series default appearance, set the options of the series configuration object. For instance, you can change the following.

  • Line Width
    Change the line width using the series' width property. To set a line width when the line is hovered or selected, set the width property of the hoverStyle or selectionStyle object defined within the series configuration object.
  • Line Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property.
  • Line Dash Style
    Set the line's style using the series' dashStyle property. To set a dash style when the line is hovered or selected, set the dashStyle property of the hoverStyle or selectionStyle object defined within the series configuration object.
  • Line Point Options
    Set up the series' point object (see the Series Points topic).
  • Point Label Options
    Make point labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the stepLine type are explained in the StepLineSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
  { year: 1896, gold: 2, silver: 0, bronze: 0 },
  { year: 1900, gold: 2, silver: 0, bronze: 3 },
  { year: 1904, gold: 0, silver: 0, bronze: 0 },
  { year: 1908, gold: 1, silver: 2, bronze: 2 },
  { year: 1912, gold: 2, silver: 2, bronze: 3 },
  { year: 1916, gold: 0, silver: 0, bronze: 0 },
  { year: 1920, gold: 0, silver: 2, bronze: 1 },
  { year: 1924, gold: 3, silver: 1, bronze: 2 },
  { year: 1928, gold: 1, silver: 2, bronze: 1 },
  { year: 1932, gold: 3, silver: 1, bronze: 1 },
  { year: 1936, gold: 0, silver: 0, bronze: 1 },
  { year: 1940, gold: 0, silver: 0, bronze: 0 },
  { year: 1944, gold: 0, silver: 0, bronze: 0 },
  { year: 1948, gold: 2, silver: 6, bronze: 5 },
  { year: 1952, gold: 6, silver: 2, bronze: 3 },
  { year: 1956, gold: 13, silver: 8, bronze: 14 },
  { year: 1960, gold: 8, silver: 8, bronze: 6 },
  { year: 1964, gold: 6, silver: 2, bronze: 10 },
  { year: 1968, gold: 5, silver: 7, bronze: 5 },
  { year: 1972, gold: 8, silver: 7, bronze: 2 },
  { year: 1976, gold: 0, silver: 1, bronze: 4 },
  { year: 1980, gold: 2, silver: 2, bronze: 5 },
  { year: 1984, gold: 4, silver: 8, bronze: 12 },
  { year: 1988, gold: 3, silver: 6, bronze: 5 },
  { year: 1992, gold: 7, silver: 9, bronze: 11 },
  { year: 1996, gold: 9, silver: 9, bronze: 23 },
  { year: 2000, gold: 16, silver: 25, bronze: 17 },
  { year: 2004, gold: 17, silver: 16, bronze: 16 },
  { year: 2008, gold: 14, silver: 15, bronze: 17 }];

$(function () {
    $("#chartContainer").dxChart({
        title: 'Australia Olympic Medals',
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'stepLine',
            argumentField: 'year',
            stepline: {
                point: {
                    visible: false
                }
            }
        },
        series: [
            { valueField: 'bronze', name: 'Bronze Medals', color: 'orangered' },
            { valueField: 'silver', name: 'Silver Medals', color: 'silver' },
            { valueField: 'gold', name: 'Gold Medals', color: 'gold' }
        ],
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });
});

Stock

The "stock" series type is used to show a variation in stock prices over the course of a day. The low and high prices are represented by the bottom and top values of a vertical line, which is shown at each point, and the open and close prices are represented by the left and right tick marks, respectively.

StockSeriesType ChartJS

To use the "stock" series type, set 'stock' to the type property of the series configuration object.

JavaScript
var chartOptions = {
    series: {
        type: 'stock'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

You can change the default appearance using series options. For instance, you can change the following.

  • Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property.
  • Reduction Options
    You can choose the price level (low, high, open or close) for which to enable reduction options. This means that if the value of a particular point's price level is lower in comparison to the value in the previous point, the subsequent point is painted in a specific color. To set the price to be compared, use the level property of the series' reduction object. To set a specific color for the subsequent price that is lower than the price in the previous point, use the color property of the series' reduction object.
  • Line Width
    Change the line width using the series' width property. To set a line width when the line is hovered or selected, set the width property of the hoverStyle or selectionStyle object defined within the series configuration object.
  • Labels
    Make labels visible by setting the visible property of the series' label object. By default, labels show the value of the price that is specified as a reduction level (see above). You can also display other information. For details on label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the stock type are explained in the StockSeries Reference section. Set the required series options within the series object of the chart's configuration object.

View Demo

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    {date: new Date(1994,2,1), low: 24.00, high: 25.00, open: 25.00, close: 24.875},
    {date: new Date(1994,2,2), low: 23.625, high: 25.125, open: 24.00, close: 24.875},
    {date: new Date(1994,2,3), low: 26.25, high: 28.25, open: 26.75, close: 27.00},
    {date: new Date(1994,2,4), low: 26.50, high: 27.875, open: 26.875, close: 27.25},
    {date: new Date(1994,2,7), low: 26.375, high: 27.50, open: 27.375, close: 26.75},
    {date: new Date(1994,2,8), low: 25.75,high:  26.875, open: 26.75, close: 26.00},
    {date: new Date(1994,2,9), low: 25.75, high: 26.75, open: 26.125, close: 26.25},
    {date: new Date(1994,2,10), low: 25.75, high: 26.375, open: 26.375, close: 25.875},
    {date: new Date(1994,2,11), low: 24.875, high: 26.125, open: 26.00, close: 25.375},
    {date: new Date(1994,2,14), low: 25.125, high: 26.00, open: 25.625, close: 25.75},
    {date: new Date(1994,2,15), low: 25.875, high: 26.625, open: 26.125, close: 26.375},
    {date: new Date(1994,2,16), low: 26.25, high: 27.375, open: 26.25, close: 27.25},
    {date: new Date(1994,2,17), low: 26.875, high: 27.25, open: 27.125, close: 26.875},
    {date: new Date(1994,2,18), low: 26.375, high: 27.125, open: 27.00, close: 27.125},
    {date: new Date(1994,2,21), low: 26.75, high: 27.875, open: 26.875, close: 27.75},
    {date: new Date(1994,2,22), low: 26.75, high: 28.375, open: 27.50, close: 27.00},
    {date: new Date(1994,2,23), low: 26.875, high: 28.125, open: 27.00, close: 28.00},
    {date: new Date(1994,2,24), low: 26.25, high: 27.875, open: 27.75, close: 27.625},
    {date: new Date(1994,2,25), low: 27.50, high: 28.75, open: 27.75, close: 28.00},
    {date: new Date(1994,2,28), low: 25.75, high: 28.25, open: 28.00, close: 27.25},
    {date: new Date(1994,2,29), low: 26.375, high: 27.50, open: 27.50, close: 26.875},
    {date: new Date(1994,2,30), low: 25.75, high: 27.50, open: 26.375, close: 26.25},
    {date: new Date(1994,2,31), low: 24.75, high: 27.00, open: 26.50, close: 25.25},
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        series: { type: 'stock' },
        title: {
            text: 'Stock Prices'
        },
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        },
        tooltip: {
            enabled: true
        },
        argumentAxis: {
            label: {
                format: 'dd/MM'
            }
        }
    });
});