Series Fields

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

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.

You can also use the isHovered() and isSelected() series methods to check whether a series is hovered or 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 the unselecting of a selected series. The function, which is assigned to the onPointClick 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="pieChartContainer" style="height:400px; max-width:600px; margin: 0 auto"></div>
var dataSource = [
    { continent: 'Africa', population: 1022234000 },
    { continent: 'Antarctica', population: 4490 },
    { continent: 'Asia', population: 4164252000 },
    { continent: 'Australia', population: 29127000 },
    { continent: 'Europe', population: 738199000 },
    { continent: 'North America', population: 542056000 },
    { continent: 'South America', population: 392555000 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population'
        },
        title: 'Population by Continent',
        onPointClick: function (info) {
            var clickedPoint = info.target;
            clickedPoint.isSelected() ? clickedPoint.series.clearSelection() : clickedPoint.series.select();
        }
    });
});

name

Returns the name of the series.

Type: String

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.

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 the pie series to display the type of this series. This type is received using the series' type field.

<div id="pieChartContainer" style="height:400px; max-width:600px; margin: 0 auto"></div>
<div style="height:20px;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 = [
    { continent: 'Africa', population: 1022234000 },
    { continent: 'Antarctica', population: 4490 },
    { continent: 'Asia', population: 4164252000 },
    { continent: 'Australia', population: 29127000 },
    { continent: 'Europe', population: 738199000 },
    { continent: 'North America', population: 542056000 },
    { continent: 'South America', population: 392555000 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            type: 'doughnut',
            argumentField: 'continent',
            valueField: 'population'
        },
        title: 'Population by Continent',
        onPointClick: function (info) {
            var clickedPoint = info.target;
            $('#selectionSpan').html('<b>Series Type:</b> ' + clickedPoint.series.type);
        }
    });
});