DoughnutSeries selectionStyle

An object defining configuration options for the series when it is selected.

Type: Object

The dxPieChart widget comes with API members that allow you to select the series in code. To set a custom 'selected' style for the series, use the selectionStyle object within the series configuration object.

Show Example:
jQuery

In this example, the style of a selected point is changed using the selectionStyle option.

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

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            type: 'doughnut',
            argumentField: 'continent',
            valueField: 'population',
            label: {
                visible: true,
                format: 'largeNumber',
                precision: 2,
                connector: { visible: true }
            },
            selectionStyle: {
                color: 'red',
                hatching: {
                    direction: 'left',
                    step: 9,
                    opacity: 0.1
                }
            }
        },
        pointClick: function (clickedPoint) {
            clickedPoint.fullState & 2 ? clickedPoint.clearSelection() : clickedPoint.select();
        },
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        title: 'Population by Continent',
        palette: ['#8B7355', '#EE9A49', '#808000', '#A2CD5A', '#DEB887', '#87CEFA', '#BDBDBD']
    });
});

border

An object defining the border options for a selected series.

Type: Object

To set custom border settings specific to the 'selected' state for the series, use the properties of the series | selectionStyle | border configuration object.

Show Example:
jQuery

In this example, the border of the selected point is colored in paleturquoise and has a 2-pixel width.

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

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            type: 'doughnut',
            argumentField: 'continent',
            valueField: 'population',
            label: {
                visible: true,
                format: 'largeNumber',
                precision: 2,
                connector: { visible: true }
            },
            selectionStyle: {
                border: {
                    visible: true,
                    color: 'paleturquoise',
                    width: 2
                }
            }
        },
        pointClick: function (clickedPoint) {
            clickedPoint.fullState & 2 ? clickedPoint.clearSelection() : clickedPoint.select();
        },
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        title: 'Population by Continent',
        palette: ['#8B7355', '#EE9A49', '#808000', '#A2CD5A', '#DEB887', '#87CEFA', '#BDBDBD']
    });
});

color

Sets a color for a series when it is selected.

Type: String
Default Value: undefined

This option supports the following colors.

  • hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • predefined/cross-browser color names
  • predefined SVG colors (not supported in Internet Explorer 8)
Show Example:
jQuery

In this example, the selected point is colored in pink.

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

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            type: 'doughnut',
            argumentField: 'continent',
            valueField: 'population',
            label: {
                visible: true,
                format: 'largeNumber',
                precision: 2,
                connector: { visible: true }
            },
            selectionStyle: {
                color: 'pink'
            }
        },
        pointClick: function (clickedPoint) {
            clickedPoint.fullState & 2 ? clickedPoint.clearSelection() : clickedPoint.select();
        },
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        title: 'Population by Continent',
        palette: ['#8B7355', '#EE9A49', '#808000', '#A2CD5A', '#DEB887', '#87CEFA', '#BDBDBD']
    });
});

hatching

Specifies the hatching options to be applied when a point is selected.

Type: Object

Within this object you can specify how to apply hatching using the direction option, the width and opacity of lines with the width and opacity options, and the space between the lines using the step option.

Show Example:
jQuery

In this example, several hatching options are changed. Click any point to see the effect.

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

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            type: 'doughnut',
            argumentField: 'continent',
            valueField: 'population',
            label: {
                visible: true,
                format: 'largeNumber',
                precision: 2,
                connector: { visible: true }
            },
            selectionStyle: {
                hatching: {
                    direction: 'left',
                    step: 9,
                    opacity: 0.1
                }
            }
        },
        pointClick: function (clickedPoint) {
            clickedPoint.fullState & 2 ? clickedPoint.clearSelection() : clickedPoint.select();
        },
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        title: 'Population by Continent',
        palette: ['#8B7355', '#EE9A49', '#808000', '#A2CD5A', '#DEB887', '#87CEFA', '#BDBDBD']
    });
});