hoverStyle 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 = [
    { title: 'Avatar (2009)', budget2000: 237000000, gross2000: 2782245172, relation2000: 11.739 },
    { title: 'Titanic (1997)', budget1990: 200000000, gross1990: 2186772302, relation1990: 10.934 },
    { title: 'The Avengers (2012)', budget2010: 220000000, gross2010: 1518594910, relation2010: 6.903 },
    { title: 'Harry Potter and the Deathly Hallows Part 2 (2011)', budget2010: 125000000, gross2010: 1341511219, relation2010: 10.732 },
    { title: 'Iron Man 3 (2013)', budget2010: 200000000, gross2010: 1215439994, relation2010: 6.077 },
    { title: 'Transformers: Dark of the Moon (2011)', budget2010: 195000000, gross2010: 1123794079, relation2010: 5.763 },
    { title: 'The Lord of the Rings: The Return of the King (2003)', budget2000: 94000000, gross2000: 1119929521, relation2000: 11.914 },
    { title: 'Skyfall (2012)', budget2010: 200000000, gross2010: 1108561013, relation2010: 5.543 },
    { title: 'The Dark Knight Rises (2012)', budget2010: 250000000, gross2010: 1084439099, relation2010: 4.338 },
    { title: "Pirates of the Caribbean: Dead Man's Chest (2006)", budget2000: 225000000, gross2000: 1066179725, relation2000: 4.739 },
    { title: 'Toy Story 3 (2010)', budget2010: 200000000, gross2010: 1063171911, relation2010: 5.316 },
    { title: 'Pirates of the Caribbean: On Stranger Tides (2011)', budget2010: 250000000, gross2010: 1045713802, relation2010: 4.183 },
    { title: 'Jurassic Park (1993)', budget1990: 63000000, gross1990: 1029153882, relation1990: 16.336 },
    { title: 'Star Wars: Episode I - The Phantom Menace (1999)', budget1990: 115000000, gross1990: 1027044677, relation1990: 8.931 },
    { title: 'Alice in Wonderland (2010)', budget2010: 200000000, gross2010: 1025467110, relation2010: 5.127 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'bubble',
            tagField: 'title',
            hoverStyle: {
                border: {
                    visible: true,
                    color: 'rosybrown'
                }
            }
        },
        argumentAxis: {
            title: 'Worldwide Gross',
            label: { format: 'largeNumber', precision: 1 }
        },
        valueAxis: {
            title: 'Movie Budget',
            label: { format: 'largeNumber' }
        },
        palette: 'Vintage',
        series: [
            { argumentField: 'gross1990', valueField: 'budget1990', sizeField: 'relation1990', name: '1990 - 1999' },
            { argumentField: 'gross2000', valueField: 'budget2000', sizeField: 'relation2000', name: '2000 - 2009' },
            { argumentField: 'gross2010', valueField: 'budget2010', sizeField: 'relation2010', name: '2010 - now' }
        ],
        legend: { horizontalAlignment: 'center', verticalAlignment: 'bottom' },
        tooltip: {
            enabled: true,
            customizeText: function () {
                return this.point.tag;
            }
        },
        title: "15 Highest-Grossing Movies of All Time"
    });
});

color

Sets a border color for a hovered series.

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 border of a hovered series is colored in lightpink.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { title: 'Avatar (2009)', budget2000: 237000000, gross2000: 2782245172, relation2000: 11.739 },
    { title: 'Titanic (1997)', budget1990: 200000000, gross1990: 2186772302, relation1990: 10.934 },
    { title: 'The Avengers (2012)', budget2010: 220000000, gross2010: 1518594910, relation2010: 6.903 },
    { title: 'Harry Potter and the Deathly Hallows Part 2 (2011)', budget2010: 125000000, gross2010: 1341511219, relation2010: 10.732 },
    { title: 'Iron Man 3 (2013)', budget2010: 200000000, gross2010: 1215439994, relation2010: 6.077 },
    { title: 'Transformers: Dark of the Moon (2011)', budget2010: 195000000, gross2010: 1123794079, relation2010: 5.763 },
    { title: 'The Lord of the Rings: The Return of the King (2003)', budget2000: 94000000, gross2000: 1119929521, relation2000: 11.914 },
    { title: 'Skyfall (2012)', budget2010: 200000000, gross2010: 1108561013, relation2010: 5.543 },
    { title: 'The Dark Knight Rises (2012)', budget2010: 250000000, gross2010: 1084439099, relation2010: 4.338 },
    { title: "Pirates of the Caribbean: Dead Man's Chest (2006)", budget2000: 225000000, gross2000: 1066179725, relation2000: 4.739 },
    { title: 'Toy Story 3 (2010)', budget2010: 200000000, gross2010: 1063171911, relation2010: 5.316 },
    { title: 'Pirates of the Caribbean: On Stranger Tides (2011)', budget2010: 250000000, gross2010: 1045713802, relation2010: 4.183 },
    { title: 'Jurassic Park (1993)', budget1990: 63000000, gross1990: 1029153882, relation1990: 16.336 },
    { title: 'Star Wars: Episode I - The Phantom Menace (1999)', budget1990: 115000000, gross1990: 1027044677, relation1990: 8.931 },
    { title: 'Alice in Wonderland (2010)', budget2010: 200000000, gross2010: 1025467110, relation2010: 5.127 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'bubble',
            tagField: 'title',
            hoverStyle: {
                border: {
                    visible: true,
                    color: 'lightpink'
                }
            }
        },
        argumentAxis: {
            title: 'Worldwide Gross',
            label: { format: 'largeNumber', precision: 1 }
        },
        valueAxis: {
            title: 'Movie Budget',
            label: { format: 'largeNumber' }
        },
        palette: 'Harmony Light',
        series: [
            { argumentField: 'gross1990', valueField: 'budget1990', sizeField: 'relation1990', name: '1990 - 1999' },
            { argumentField: 'gross2000', valueField: 'budget2000', sizeField: 'relation2000', name: '2000 - 2009' },
            { argumentField: 'gross2010', valueField: 'budget2010', sizeField: 'relation2010', name: '2010 - now' }
        ],
        legend: { horizontalAlignment: 'center', verticalAlignment: 'bottom' },
        tooltip: {
            enabled: true,
            customizeText: function () {
                return this.point.tag;
            }
        },
        title: "15 Highest-Grossing Movies of All Time"
    });
});

visible

Sets a border visibility for a hovered series.

Type: Boolean
Default Value: false
Accepted Values: true|false

Show Example:
jQuery

Use the check box to change the visibility of the border for a hovered series. Hover over a series to see the effect.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="checkboxContainer" style="height:40px;width:250px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="checkbox" id="showBorderCheckbox" checked> Show Border for a Hovered Series
</div>
var dataSource = [
    { title: 'Avatar (2009)', budget2000: 237000000, gross2000: 2782245172, relation2000: 11.739 },
    { title: 'Titanic (1997)', budget1990: 200000000, gross1990: 2186772302, relation1990: 10.934 },
    { title: 'The Avengers (2012)', budget2010: 220000000, gross2010: 1518594910, relation2010: 6.903 },
    { title: 'Harry Potter and the Deathly Hallows Part 2 (2011)', budget2010: 125000000, gross2010: 1341511219, relation2010: 10.732 },
    { title: 'Iron Man 3 (2013)', budget2010: 200000000, gross2010: 1215439994, relation2010: 6.077 },
    { title: 'Transformers: Dark of the Moon (2011)', budget2010: 195000000, gross2010: 1123794079, relation2010: 5.763 },
    { title: 'The Lord of the Rings: The Return of the King (2003)', budget2000: 94000000, gross2000: 1119929521, relation2000: 11.914 },
    { title: 'Skyfall (2012)', budget2010: 200000000, gross2010: 1108561013, relation2010: 5.543 },
    { title: 'The Dark Knight Rises (2012)', budget2010: 250000000, gross2010: 1084439099, relation2010: 4.338 },
    { title: "Pirates of the Caribbean: Dead Man's Chest (2006)", budget2000: 225000000, gross2000: 1066179725, relation2000: 4.739 },
    { title: 'Toy Story 3 (2010)', budget2010: 200000000, gross2010: 1063171911, relation2010: 5.316 },
    { title: 'Pirates of the Caribbean: On Stranger Tides (2011)', budget2010: 250000000, gross2010: 1045713802, relation2010: 4.183 },
    { title: 'Jurassic Park (1993)', budget1990: 63000000, gross1990: 1029153882, relation1990: 16.336 },
    { title: 'Star Wars: Episode I - The Phantom Menace (1999)', budget1990: 115000000, gross1990: 1027044677, relation1990: 8.931 },
    { title: 'Alice in Wonderland (2010)', budget2010: 200000000, gross2010: 1025467110, relation2010: 5.127 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'bubble',
            tagField: 'title',
            hoverStyle: {
                border: {
                    visible: true,
                    color: 'dodgerblue'
                }
            }
        },
        animation: { enabled: false },
        argumentAxis: {
            title: 'Worldwide Gross',
            label: { format: 'largeNumber', precision: 1 }
        },
        valueAxis: {
            title: 'Movie Budget',
            label: { format: 'largeNumber' }
        },
        palette: 'Ocean',
        series: [
            { argumentField: 'gross1990', valueField: 'budget1990', sizeField: 'relation1990', name: '1990 - 1999' },
            { argumentField: 'gross2000', valueField: 'budget2000', sizeField: 'relation2000', name: '2000 - 2009' },
            { argumentField: 'gross2010', valueField: 'budget2010', sizeField: 'relation2010', name: '2010 - now' }
        ],
        legend: { horizontalAlignment: 'center', verticalAlignment: 'bottom' },
        tooltip: {
            enabled: true,
            customizeText: function () {
                return this.point.tag;
            }
        },
        title: "15 Highest-Grossing Movies of All Time"
    });

    $('#showBorderCheckbox').change(function () {
        var chart = $('#chartContainer').dxChart('instance');
        chart.option({
            commonSeriesSettings: {
                hoverStyle: {
                    border: { visible: this.checked }
                }
            }
        });
    });
});

width

Sets a border width for a hovered series.

Show Example:
jQuery

In this example, the border of a hovered series is colored in rosybrown and has a 4-pixel width.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { title: 'Avatar (2009)', budget2000: 237000000, gross2000: 2782245172, relation2000: 11.739 },
    { title: 'Titanic (1997)', budget1990: 200000000, gross1990: 2186772302, relation1990: 10.934 },
    { title: 'The Avengers (2012)', budget2010: 220000000, gross2010: 1518594910, relation2010: 6.903 },
    { title: 'Harry Potter and the Deathly Hallows Part 2 (2011)', budget2010: 125000000, gross2010: 1341511219, relation2010: 10.732 },
    { title: 'Iron Man 3 (2013)', budget2010: 200000000, gross2010: 1215439994, relation2010: 6.077 },
    { title: 'Transformers: Dark of the Moon (2011)', budget2010: 195000000, gross2010: 1123794079, relation2010: 5.763 },
    { title: 'The Lord of the Rings: The Return of the King (2003)', budget2000: 94000000, gross2000: 1119929521, relation2000: 11.914 },
    { title: 'Skyfall (2012)', budget2010: 200000000, gross2010: 1108561013, relation2010: 5.543 },
    { title: 'The Dark Knight Rises (2012)', budget2010: 250000000, gross2010: 1084439099, relation2010: 4.338 },
    { title: "Pirates of the Caribbean: Dead Man's Chest (2006)", budget2000: 225000000, gross2000: 1066179725, relation2000: 4.739 },
    { title: 'Toy Story 3 (2010)', budget2010: 200000000, gross2010: 1063171911, relation2010: 5.316 },
    { title: 'Pirates of the Caribbean: On Stranger Tides (2011)', budget2010: 250000000, gross2010: 1045713802, relation2010: 4.183 },
    { title: 'Jurassic Park (1993)', budget1990: 63000000, gross1990: 1029153882, relation1990: 16.336 },
    { title: 'Star Wars: Episode I - The Phantom Menace (1999)', budget1990: 115000000, gross1990: 1027044677, relation1990: 8.931 },
    { title: 'Alice in Wonderland (2010)', budget2010: 200000000, gross2010: 1025467110, relation2010: 5.127 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'bubble',
            tagField: 'title',
            hoverStyle: {
                border: {
                    visible: true,
                    color: 'rosybrown',
                    width: 4
                }
            }
        },
        argumentAxis: {
            title: 'Worldwide Gross',
            label: { format: 'largeNumber', precision: 1 }
        },
        valueAxis: {
            title: 'Movie Budget',
            label: { format: 'largeNumber' }
        },
        palette: 'Violet',
        series: [
            { argumentField: 'gross1990', valueField: 'budget1990', sizeField: 'relation1990', name: '1990 - 1999' },
            { argumentField: 'gross2000', valueField: 'budget2000', sizeField: 'relation2000', name: '2000 - 2009' },
            { argumentField: 'gross2010', valueField: 'budget2010', sizeField: 'relation2010', name: '2010 - now' }
        ],
        legend: { horizontalAlignment: 'center', verticalAlignment: 'bottom' },
        tooltip: {
            enabled: true,
            customizeText: function () {
                return this.point.tag;
            }
        },
        title: "15 Highest-Grossing Movies of All Time"
    });
});