Series Fields

This section describes the fields that can be used in code to manipulate the Series object.

axis

Returns the name of the value axis of the series.

Type: String

To learn more on how to display a chart with several value axes, refer to the Multi-Axis Chart topic.

Show Example:
jQuery

In this example, click a series to display the name of this series' value axis. The axis name is received using the series' axis field.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div style="height:25px;max-width:500px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <span id="selectionSpan" />
</div>
var dataSource = [
    { year: '1850', africa: 111000000, asia: 809000000, europe: 276000000, latinamerica: 38000000, northamerica: 26000000, oceania: 2000000, total: 1262000000 },
    { year: '1900', africa: 133000000, asia: 947000000, europe: 408000000, latinamerica: 74000000, northamerica: 82000000, oceania: 6000000, total: 1650000000 },
    { year: '1950', africa: 229895000, asia: 1403388000, europe: 547287000, latinamerica: 167368000, northamerica: 171614000, oceania: 12675000, total: 2532227000 },
    { year: '2000', africa: 811101000, asia: 3719044000, europe: 726777000, latinamerica: 521419000, northamerica: 313289000, oceania: 31130000, total: 6122770000 },
    { year: '2050', africa: 2191599000, asia: 5142220000, europe: 719257000, latinamerica: 750956000, northamerica: 446862000, oceania: 55223000, total: 9306128000 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'fullstackedbar',
            axis: 'percentAxis'
        },
        series: [
            { valueField: 'oceania' },
            { valueField: 'africa' },
            { valueField: 'asia' },
            { valueField: 'europe' },
            { valueField: 'latinamerica' },
            { valueField: 'northamerica' },
            {
                axis: 'valueAxis',
                type: 'spline',
                valueField: 'total',
                color: 'blue'
            }
        ],
        seriesClick: function (clickedSeries) {
            $('#selectionSpan').html('The axis&#39; name of the clicked series: &#39;' + clickedSeries.axis + '&#39;');
        },
        valueAxis: [{
            name: 'percentAxis'
        }, {
            name: 'valueAxis',
            position: 'right',
            label: {
                format: 'largeNumber'
            }
        }],
        legend: { visible: false }
    });
});

fullState

Provides information about the state of the series object.

Type: Number

Each series within a chart can be in several states. These states are represented by the numbers that are enumerated in the list below:

  • 0
    Series is not hovered and not selected (normal state);
  • 1
    Series is hovered;
  • 2
    Series is selected;
  • 3
    Series is hovered and selected.

To learn more about the handling of series hover and selection, refer to the Series Hover and Series Selection topics.

Show Example:
jQuery

In this example, the series' fullState field is used to implement deselecting of a selected series. The function, which is assigned to the seriesClick option, checks the current state of the clicked series. If the series is selected, the selection will be removed using the clearSelection() method. Otherwise, the series will be selected using the series' select() method.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113 },
    { country: 'India', y014: 340419115, y1564: 626520945, y65: 47063757 },
    { country: 'United States', y014: 58554755, y1564: 182172625, y65: 34835293 },
    { country: 'Indonesia', y014: 68715705, y1564: 146014815, y65: 10053690 },
    { country: 'Brazil', y014: 50278034, y1564: 113391494, y65: 9190842 },
    { country: 'Russia', y014: 26465156, y1564: 101123777, y65: 18412243 }
];
var series = [
    { valueField: 'y014', name: '0-14 years' },
    { valueField: 'y1564', name: '15-64 years' },
    { valueField: 'y65', name: '65 years and older' }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'country'
        },
        series: series,
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        seriesSelectionMode: 'multiple',
        seriesClick: function (clickedSeries) {
            clickedSeries.fullState & 2 ? clickedSeries.clearSelection() : clickedSeries.select();
        }
    });
});

name

Returns the name of the series.

Type: String

Show Example:
jQuery

In this example, click a series to display the name of this series. This name is received using the series' name field.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div style="height:40px;max-width:700px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <span id="selectionSpan" />
</div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113 },
    { country: 'India', y014: 340419115, y1564: 626520945, y65: 47063757 },
    { country: 'United States', y014: 58554755, y1564: 182172625, y65: 34835293 },
    { country: 'Indonesia', y014: 68715705, y1564: 146014815, y65: 10053690 },
    { country: 'Brazil', y014: 50278034, y1564: 113391494, y65: 9190842 },
    { country: 'Russia', y014: 26465156, y1564: 101123777, y65: 18412243 }
];

var series = [
    { valueField: 'y014', name: '0-14 years old' },
    { valueField: 'y1564', name: '15-64 years old' },
    { valueField: 'y65', name: '65 years old and older' }
];

$(function () {
    $('#chartContainer').dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'country'
        },
        series: series,
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        seriesClick: function (clickedSeries) {
            $('#selectionSpan').html('The name of the clicked series: &#39;' + clickedSeries.name + '&#39;');
        }
    });
});

pane

Returns the name of the series pane.

Type: String

To learn more on how to display series in different panes, refer to the Multi-Pane Chart topic.

Show Example:
jQuery

In this example, click a series to display the name of this series' pane. This name is received using the series' pane field.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div style="height:40px;max-width:700px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <span id="selectionSpan" />
</div>
var dataSource = [
    { month: 'January', avgT: 9.8, minT: 4.1, maxT: 15.5, prec: 109 },
    { month: 'February', avgT: 11.8, minT: 5.8, maxT: 17.8, prec: 104 },
    { month: 'March', avgT: 13.4, minT: 7.2, maxT: 19.6, prec: 92 },
    { month: 'April', avgT: 15.4, minT: 8.1, maxT: 22.8, prec: 30 },
    { month: 'May', avgT: 18, minT: 10.3, maxT: 25.7, prec: 10 },
    { month: 'June', avgT: 20.6, minT: 12.2, maxT: 29, prec: 2 },
    { month: 'July', avgT: 22.2, minT: 13.2, maxT: 31.3, prec: 2 },
    { month: 'August', avgT: 22.2, minT: 13.2, maxT: 31.1, prec: 1 },
    { month: 'September', avgT: 21.2, minT: 12.4, maxT: 29.9, prec: 8 },
    { month: 'October', avgT: 17.9, minT: 9.7, maxT: 26.1, prec: 24 },
    { month: 'November', avgT: 12.9, minT: 6.2, maxT: 19.6, prec: 64 },
    { month: 'December', avgT: 9.6, minT: 3.4, maxT: 15.7, prec: 76 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'month'
        },
        panes: [
            { name: 'topPane' },
            { name: 'bottomPane' }
        ],
        series: [{
            pane: 'topPane',
            type: 'rangeArea',
            rangeValue1Field: 'minT',
            rangeValue2Field: 'maxT',
            name: 'Monthly Temperature Ranges, °C'
        }, {
            pane: 'topPane',
            valueField: 'avgT',
            name: 'Average Temperature, °C'
        }, {
            type: 'bar',
            valueField: 'prec',
            name: 'prec, mm'
        }
        ],
        valueAxis: [
            { pane: 'bottomPane', grid: { visible: true } },
            { pane: 'topPane', grid: { visible: true } }
        ],
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        },
        seriesClick: function (clickedSeries) {
            $('#selectionSpan').html('The name of the clicked series&#39; pane: &#39;' + clickedSeries.pane + '&#39;');
        }
    });
});

tag

Returns the tag of the series.

Type: String

When defining a series, you can specify auxiliary information for it via the tag option. You can specify auxiliary information for each point as well. To do this, add a tag field to the data source and specify the name of the field via the series tagField option.

Show Example:
jQuery

In this example, сlick a series on the chart to select this series. The information about the corresponding country will be displayed. This information is received using the tag field.

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

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe', tag: 'Europe is the world&#39;s second-smallest continent by surface area, covering about 10,180,000 square kilometres (3,930,000 sq mi) or 2% of the Earth&#39;s surface and about 6.8% of its land area. Of Europe&#39;s approximately 50 countries, Russia is by far the largest by both area and population, taking up 40% of the continent (although the country has territory in both Europe and Asia), while Vatican City is the smallest.' },
            { valueField: 'americas', name: 'Americas', tag: 'The Americas, or America, are lands in the Western Hemisphere that are also known as the New World. Comprising the continents of North America and South America, along with their associated islands, they cover 8.3% of the Earth&#39;s total surface area (28.4% of its land area). The topography is dominated by the American Cordillera, a long chain of mountains that run the length of the west coast. The flatter eastern side of the Americas is dominated by large river basins, such as the Amazon, Mississippi, and La Plata. Extending 14,000 km (8,699 mi) in a north-south orientation, the climate and ecology varies strongly across the Americas, from arctic tundra of Northern Canada, Greenland, and Alaska, to the tropical rain forests in Central America and South America.' },
            { valueField: 'africa', name: 'Africa', tag: 'Africa is the world&#39;s second-largest continent. At about 30.2 million km² (11.7 million sq mi) including adjacent islands, it covers six percent of the Earth&#39;s total surface area and 20.4 percent of the total land area. With 1.0 billion people (as of 2009, see table), it accounts for about 15% of the world&#39;s human population. The continent is surrounded by the Mediterranean Sea to the north, both the Suez Canal and the Red Sea along the Sinai Peninsula to the northeast, the Indian Ocean to the southeast, and the Atlantic Ocean to the west. The continent includes Madagascar and various archipelagoes. It has 54 fully recognized sovereign states ("countries"), 9 territories and two de facto independent states with limited or no recognition.' }
        ],
        seriesClick: function (clickedSeries) {
            clickedSeries.select();
        },
        seriesSelected: function (selectedSeries) {
            $('#selectionSpan').html(selectedSeries.tag);
        }
    });
});

type

Returns the type of the series.

Type: String

To learn about different series types, refer to the Series help section.

Show Example:
jQuery

In this example, click a series to display the type of this series. This type is received using the series' type field.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div style="height:25px;max-width:500px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <span id="selectionSpan" />
</div>
var dataSource = [
    { year: '1850', africa: 111000000, asia: 809000000, europe: 276000000, latinamerica: 38000000, northamerica: 26000000, oceania: 2000000, total: 1262000000 },
    { year: '1900', africa: 133000000, asia: 947000000, europe: 408000000, latinamerica: 74000000, northamerica: 82000000, oceania: 6000000, total: 1650000000 },
    { year: '1950', africa: 229895000, asia: 1403388000, europe: 547287000, latinamerica: 167368000, northamerica: 171614000, oceania: 12675000, total: 2532227000 },
    { year: '2000', africa: 811101000, asia: 3719044000, europe: 726777000, latinamerica: 521419000, northamerica: 313289000, oceania: 31130000, total: 6122770000 },
    { year: '2050', africa: 2191599000, asia: 5142220000, europe: 719257000, latinamerica: 750956000, northamerica: 446862000, oceania: 55223000, total: 9306128000 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'fullstackedbar',
            axis: 'percentAxis'
        },
        series: [
            { valueField: 'oceania' },
            { valueField: 'africa' },
            { valueField: 'asia' },
            { valueField: 'europe' },
            { valueField: 'latinamerica' },
            { valueField: 'northamerica' },
            {
                axis: 'valueAxis',
                type: 'spline',
                valueField: 'total',
                color: 'blue'
            }
        ],
        seriesClick: function (clickedSeries) {
            $('#selectionSpan').html('The clicked series type: &#39;' + clickedSeries.type + '&#39;');
        },
        valueAxis: [{
            name: 'percentAxis'
        }, {
            name: 'valueAxis',
            position: 'right',
            label: {
                format: 'largeNumber'
            }
        }],
        legend: { visible: false }
    });
});