selectionStyle 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:

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 () {
        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
        onPointClick: function (info) {
            var clickedPoint =;
            clickedPoint.isSelected() ? clickedPoint.clearSelection() :;
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        title: 'Population by Continent',
        palette: ['#8B7355', '#EE9A49', '#808000', '#A2CD5A', '#DEB887', '#87CEFA', '#BDBDBD']


Specifies how to apply hatching to highlight the selected point.

Type: String
Default Value: 'right'
Accepted Values: 'none' | 'right' | 'left'

The following values are available.

  • none
    Do not apply hatching.
  • right
    Apply an upward diagonal hatching style from left to right.
  • left
    Apply a downward diagonal hatching style from left to right.


Specifies the opacity of hatching lines.

Type: Number
Default Value: 0.5


Specifies the distance between two hatching lines in pixels.

Type: Number
Default Value: 10


Specifies the width of hatching lines in pixels.

Type: Number
Default Value: 4