selectionStyle border

An object defining the border options for a selected series.

Type: Object

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

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

In case you have to set a border selection style option for an individual series, use the selectionStyle | 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 the selected series is colored in paleturquoise and has a 2-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',
            selectionStyle: {
                border: {
                    visible: true,
                    color: 'paleturquoise',
                    width: 2
                }
            }
        },
        argumentAxis: {
            title: 'Worldwide Gross',
            label: { format: 'largeNumber', precision: 1 }
        },
        valueAxis: {
            title: 'Movie Budget',
            label: { format: 'largeNumber' }
        },
        onPointClick: function (info) {
            var clickedPoint = info.target;
            clickedPoint.isSelected() ? clickedPoint.clearSelection() : clickedPoint.select();
        },
        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,
            customizeTooltip: function () {
                return {
                    text: this.point.tag
                };
            }
        },
        title: "15 Highest-Grossing Movies of All Time"
    });
});

color

Sets a border color for a selected series.

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 border of the selected series is colored in dodgerblue.

<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',
            selectionStyle: {
                border: {
                    visible: true,
                    color: 'dodgerblue'
                }
            }
        },
        argumentAxis: {
            title: 'Worldwide Gross',
            label: { format: 'largeNumber', precision: 1 }
        },
        valueAxis: {
            title: 'Movie Budget',
            label: { format: 'largeNumber' }
        },
        onPointClick: function (info) {
            var clickedPoint = info.target;
            clickedPoint.isSelected() ? clickedPoint.clearSelection() : clickedPoint.select();
        },
        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,
            customizeTooltip: function () {
                return {
                    text: this.point.tag
                };
            }
        },
        title: "15 Highest-Grossing Movies of All Time"
    });
});

dashStyle

Specifies a dash style for the borders of point labels.

Type: String
Default Value: 'solid'
Accepted Values: 'solid' | 'longDash' | 'dash' | 'dot'

The following values are available.

  • solid
    Displays a solid, continuous line.
  • longDash
    Displays a border using long dashes.
  • dash
    Displays a border using dashes.
  • dot
    Displays a border using dots.
  • any combination of 'longDash', 'dash' and 'dot'
    Displays a border by repeating the specified combination. For instance, 'dashdotdash'.

visible

Sets border visibility for a selected series.

Type: Boolean
Default Value: false

Show Example:
jQuery

Toggle the check box under the chart to change the visibility of the selected series borders.

<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 Selected 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',
            selectionStyle: {
                border: {
                    visible: true
                }
            }
        },
        animation: { enabled: false },
        argumentAxis: {
            title: 'Worldwide Gross',
            label: { format: 'largeNumber', precision: 1 }
        },
        valueAxis: {
            title: 'Movie Budget',
            label: { format: 'largeNumber' }
        },
        onPointClick: function (info) {
            var clickedPoint = info.target;
            clickedPoint.isSelected() ? clickedPoint.clearSelection() : clickedPoint.select();
        },
        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,
            customizeTooltip: function () {
                return {
                    text: this.point.tag
                };
            }
        },
        title: "15 Highest-Grossing Movies of All Time"
    });

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

width

Sets a border width for a selected series.

Type: Number
Default Value: 3

Show Example:
jQuery

In this example, the width option of the selected series border is set to 5.

<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',
            selectionStyle: {
                border: {
                    visible: true,
                    width: 5
                }
            }
        },
        argumentAxis: {
            title: 'Worldwide Gross',
            label: { format: 'largeNumber', precision: 1 }
        },
        valueAxis: {
            title: 'Movie Budget',
            label: { format: 'largeNumber' }
        },
        onPointClick: function (info) {
            var clickedPoint = info.target;
            clickedPoint.isSelected() ? clickedPoint.clearSelection() : clickedPoint.select();
        },
        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,
            customizeTooltip: function () {
                return {
                    text: this.point.tag
                };
            }
        },
        title: "15 Highest-Grossing Movies of All Time"
    });
});