BubbleSeries selectionStyle

An object defining configuration options for a selected series.

Type: Object

The dxChart widget comes with API members that allow you to select a series in code. To set a custom 'selected' style for all series at once, use the selectionStyle object within the commonSeriesSettings configuration object.

If you have several series of one type, you can set selection 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 selection style option for an individual series, use the selectionStyle 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 selected series is changed using the selectionStyle option.

<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: 'mistyrose'
                },
                color: 'mediumvioletred',
                hatching: {
                    direction: 'right',
                    step: 4,
                    opacity: 0.6
                }
            }
        },
        argumentAxis: {
            title: 'Worldwide Gross',
            label: { format: 'largeNumber', precision: 1 }
        },
        valueAxis: {
            title: 'Movie Budget',
            label: { format: 'largeNumber' }
        },
        pointClick: function (clickedPoint) {
            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"
    });
});

border

An object defining the border options for a selected series.

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' }
        },
        pointClick: function (clickedPoint) {
            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 color for a series when it is selected.

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 selected series is colored in pink.

<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: {
                color: 'pink',
            }
        },
        argumentAxis: {
            title: 'Worldwide Gross',
            label: { format: 'largeNumber', precision: 1 }
        },
        valueAxis: {
            title: 'Movie Budget',
            label: { format: 'largeNumber' }
        },
        pointClick: function (clickedPoint) {
            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"
    });
});

hatching

Specifies the hatching options to be applied when a series is selected.

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.