hoverStyle hatching

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

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. Hover over a 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: {
            argumentField: 'continent',
            valueField: 'population',
            label: {
                visible: true,
                format: 'largeNumber',
                precision: 2,
                connector: { visible: true }
            },
            hoverStyle: {
                hatching: {
                    direction: 'left',
                    step: 9,
                    opacity: 0.1
                }
            }
        },
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        title: 'Population by Continent',
        palette: ['#8B7355', '#EE9A49', '#808000', '#A2CD5A', '#DEB887', '#87CEFA', '#BDBDBD']
    });
});

direction

Specifies how to apply hatching to highlight the hovered 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.

opacity

Specifies the opacity of hatching lines.

Type: Number
Default Value: 0.75

step

Specifies the distance between two hatching lines in pixels.

Type: Number
Default Value: 10

width

Specifies the width of hatching lines in pixels.

Type: Number
Default Value: 4