BarSeries hoverStyle

An object defining configuration options for a hovered series.

Type: Object

To set a custom 'hover' style for all series at once, use the hoverStyle object within the commonSeriesSettings configuration object.

If you have several series of one type, you can set hover style options to the values specific to this type using the corresponding object (area, line or another) within the commonSeriesSettings configuration object. The values that are set within series-type-specific configuration objects override the corresponding common values.

In case you have to set a hover style option for an individual series, use the hoverStyle object within the series object of the series array. The values that are set individually override corresponding common values.

Show Example:
jQuery

In this example, the style of a hovered series is changed.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1990, istanbul: 7620000, moscow: 8967332, london: 6887280, sp: 5035200, ankara: 2583963 },
    { year: 2000, istanbul: 10923000, moscow: 10382754, london: 8173941, sp: 4694000, ankara: 3703362 },
    { year: 2012, istanbul: 13854740, moscow: 11689048, london: 8308369, sp: 5028000, ankara: 4965542 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'bar',
            hoverStyle: {
                border: {
                    visible: true,
                    color: 'mistyrose'
                },
                color: 'midnightblue',
                hatching: 'right'
            }
        },
        series: [
            { valueField: 'istanbul', name: 'Istanbul, Turkey' },
            { valueField: 'moscow', name: 'Moscow, Russia' },
            { valueField: 'london', name: 'London, UK' },
            { valueField: 'sp', name: 'Saint Petersburg, Russia' },
            { valueField: 'ankara', name: 'Ankara, Turkey' }
        ],
        palette: 'Soft Pastel',
        title: 'Largest Cities in Europe',
        argumentAxis: { type: 'discrete' },
        valueAxis: {
            label: { format: 'largeNumber' },
            title: {
                text: 'Population within borders',
                font: { weight: 100 }
            }
        },
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        }
    });
});

border

An object defining the border options for a hovered series.

To set custom border settings specific to the 'hovered' state for all series at once, use the properties of the commonSeriesSettings | hoverStyle | border configuration object.

To set custom border settings specific to the 'hovered' state for all series of a single type at once, use the properties of the corresponding object within commonSeriesSettings (e.g. area | hoverStyle | border). The values that are set within this object override the corresponding common values that are set within the root commonSeriesSettings | hoverStyle | border object.

In case you have to set a hover style option for a border in an individual series, use the hoverStyle | border object within the series object of the series array. The values that are set individually override corresponding common values.

Show Example:
jQuery

In this example, the border of a hovered series is colored in rosybrown.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1990, istanbul: 7620000, moscow: 8967332, london: 6887280, sp: 5035200, ankara: 2583963 },
    { year: 2000, istanbul: 10923000, moscow: 10382754, london: 8173941, sp: 4694000, ankara: 3703362 },
    { year: 2012, istanbul: 13854740, moscow: 11689048, london: 8308369, sp: 5028000, ankara: 4965542 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'bar',
            hoverStyle: {
                border: {
                    visible: true,
                    color: 'rosybrown'
                }
            }
        },
        series: [
            { valueField: 'istanbul', name: 'Istanbul, Turkey' },
            { valueField: 'moscow', name: 'Moscow, Russia' },
            { valueField: 'london', name: 'London, UK' },
            { valueField: 'sp', name: 'Saint Petersburg, Russia' },
            { valueField: 'ankara', name: 'Ankara, Turkey' }
        ],
        palette: 'Soft Pastel',
        title: 'Largest Cities in Europe',
        argumentAxis: { type: 'discrete' },
        valueAxis: {
            label: { format: 'largeNumber' },
            title: {
                text: 'Population within borders',
                font: { weight: 100 }
            }
        },
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        }
    });
});

color

Sets a color for a series when it is hovered over.

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 the following example, a hovered series is colored in limegreen.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1990, istanbul: 7620000, moscow: 8967332, london: 6887280, sp: 5035200, ankara: 2583963 },
    { year: 2000, istanbul: 10923000, moscow: 10382754, london: 8173941, sp: 4694000, ankara: 3703362 },
    { year: 2012, istanbul: 13854740, moscow: 11689048, london: 8308369, sp: 5028000, ankara: 4965542 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'bar',
            hoverStyle: {
                color: 'limegreen'
            }
        },
        series: [
            { valueField: 'istanbul', name: 'Istanbul, Turkey' },
            { valueField: 'moscow', name: 'Moscow, Russia' },
            { valueField: 'london', name: 'London, UK' },
            { valueField: 'sp', name: 'Saint Petersburg, Russia' },
            { valueField: 'ankara', name: 'Ankara, Turkey' }
        ],
        palette: 'Soft Pastel',
        title: 'Largest Cities in Europe',
        argumentAxis: { type: 'discrete' },
        valueAxis: {
            label: { format: 'largeNumber' },
            title: {
                text: 'Population within borders',
                font: { weight: 100 }
            }
        },
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        }
    });
});

hatching

Specifies how to apply hatching to highlight the hovered series.

Type: String
Default Value: 'none'
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.
Show Example:
jQuery

In this example, you can change the hatching style for a hovered series. Use the drop-down menu below to choose the required type of hatching. Then, hover over a series to see the effect.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="selectContainer" style="height:40px;width:300px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Hatching:
    <select id="dropdownListSelector">
        <option value="none">none</option>
        <option value="right">right</option>
        <option value="left">left</option>
    </select>
</div>
var dataSource = [
    { year: 1990, istanbul: 7620000, moscow: 8967332, london: 6887280, sp: 5035200, ankara: 2583963 },
    { year: 2000, istanbul: 10923000, moscow: 10382754, london: 8173941, sp: 4694000, ankara: 3703362 },
    { year: 2012, istanbul: 13854740, moscow: 11689048, london: 8308369, sp: 5028000, ankara: 4965542 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'bar',
            hoverStyle: {
                hatching: 'none'
            }
        },
        series: [
            { valueField: 'istanbul', name: 'Istanbul, Turkey' },
            { valueField: 'moscow', name: 'Moscow, Russia' },
            { valueField: 'london', name: 'London, UK' },
            { valueField: 'sp', name: 'Saint Petersburg, Russia' },
            { valueField: 'ankara', name: 'Ankara, Turkey' }
        ],
        palette: 'Soft Pastel',
        title: 'Largest Cities in Europe',
        argumentAxis: { type: 'discrete' },
        valueAxis: {
            label: { format: 'largeNumber' },
            title: {
                text: 'Population within borders',
                font: { weight: 100 }
            }
        },
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        }
    });

    $('#dropdownListSelector').change(function () {
        var chart = $('#chartContainer').dxChart('instance');
        chart.option({
            commonSeriesSettings: {
                hoverStyle: { hatching: this.value }
            }
        });
    });
});