The selection capability is not provided out of the box, but it can be implemented using the pointClick event. The following code gives an example for the scenario when a click on a point selects it, and a subsequent click on the same point clears the selection. To check whether the point is already selected, its isSelected() method is called.

jQuery

JavaScript

$(function() {
    $("#chartContainer").dxChart({
        // ...
        onPointClick: function (e) {
            var point = e.target;
            if (point.isSelected()) {
                point.clearSelection();
            } else {
                point.select();
            }
        }
    });
});

Angular

HTML

TypeScript

<dx-chart
    (onPointClick)="onPointClick($event)">
</dx-chart>

import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    onPointClick (e) {
        const point = e.target;
        if (point.isSelected()) {
            point.clearSelection();
        } else {
            point.select();
        }
    };
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

Vue

App.vue

<template> 
    <DxChart
        @point-click="onPointClick($event)"
        ...
    >
    </DxChart>
</template>

<script>
import DxChart from 'devextreme-vue/chart';

export default {
    components: {
        DxChart
    },
    methods: {
        onPointClick (e) {
            const point = e.target;
            if (point.isSelected()) {
                point.clearSelection();
            } else {
                point.select();
            }
        }
    }
}
</script>

React

App.js

import React from 'react';
import Chart from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart
                onPointClick={this.onPointClick}
                ...
            >
            </Chart>
        );
    }

    onPointClick (e) {
        const point = e.target;
        if (point.isSelected()) {
            point.clearSelection();
        } else {
            point.select();
        }
    }
}

export default App;

In the previous code example, selection was cleared of a specific point. If you need to clear selection of all points in a series, you can use the deselectPoint(point) method of that series.

jQuery

JavaScript

$(function() {
    $("#chartContainer").dxChart({
        // ...
        onPointClick: function (e) {
            e.target.series.getAllPoints(function(point) {
                series.deselectPoint(point);
            });
        }
    });
});

Angular

HTML

TypeScript

<dx-chart
    (onPointClick)="onPointClick($event)">
</dx-chart>

import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    onPointClick (e) {
        e.target.series.getAllPoints(point => series.deselectPoint(point));
    }
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

Vue

App.vue

<template> 
    <DxChart
        @point-click="onPointClick($event)"
        ...
    >
    </DxChart>
</template>

<script>
import DxChart from 'devextreme-vue/chart';

export default {
    components: {
        DxChart
    },
    methods: {
        onPointClick (e) {
            e.target.series.getAllPoints(point => series.deselectPoint(point));
        }
    }
}
</script>

React

App.js

import React from 'react';
import Chart from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart
                onPointClick={this.onPointClick}
                ...
            >
            </Chart>
        );
    }

    onPointClick (e) {
        e.target.series.getAllPoints(point => series.deselectPoint(point));
    }
}

export default App;

If you need to clear selection of all series in the Chart along with their points, call the clearSelection() method of the Chart instance.

jQuery

JavaScript

$("#chartContainer").dxChart("clearSelection");

Angular

TypeScript

import { ..., ViewChild } from "@angular/core";
import { DxChartModule, DxChartComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent;
    // Prior to Angular 8
    // @ViewChild(DxChartComponent) chart: DxChartComponent;
    clearSelection() {
        this.chart.instance.clearSelection();
    }
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

Vue

App.vue

<template> 
    <DxChart
        ref="chart"
        ... >
    </DxChart>
</template>

<script>
import DxChart from 'devextreme-vue/chart';

export default {
    components: {
        DxChart
    },
    methods: {
        clearSelection () {
            this.$refs.chart.instance.clearSelection();
        }
    }
}
</script>

React

App.js

import React from 'react';
import Chart from 'devextreme-react/chart';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.chartRef = React.createRef();
    }

    render() {
        return (
            <Chart ref={this.chartRef} ... >
            </Chart>
        );
    }

    clearSelection () {
        this.chartRef.current.instance.clearSelection();
    }
}

export default App;

User Interaction

NOTE

Range Bar and Bubble, all bar and financial series do not contain anything besides points. Therefore, configuring points in these series is, in fact, configuring the series itself. For this reason, follow the instructions given in the Series Selection - User Interaction topic when configuring selection for points that belong to the aforementioned series.

When a user selects a series point, it changes its style to the one specified by the following objects.

series.point.selectionStyle
The selection style for all points of an individual series.
commonSeriesSettings.point.selectionStyle
The selection style for all series points in the Chart.

Individual series settings override common settings.

jQuery

JavaScript

$(function() {
    $("#chartContainer").dxChart({
        // ...
        series: {
            point: {
                selectionStyle: {
                    // high priority
                }
            }
        },
        commonSeriesSettings: {
            point: {
                selectionStyle: {
                    // low priority
                }
            }
        }
    });
});

Angular

HTML

TypeScript

<dx-chart ... >
    <dxi-series ... >
        <dxo-point>
            <dxo-selection-style>
                <!-- high priority -->
            </dxo-selection-style>
        </dxo-point>
    </dxi-series>
    <dxo-common-series-settings ... >
        <dxo-point>
            <dxo-selection-style>
                <!-- low priority -->
            </dxo-selection-style>
        </dxo-point>
    </dxo-common-series-settings>
</dx-chart>

import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

Vue

App.vue

<template> 
    <DxChart ... >
        <DxSeries>
            <DxPoint ... >
                <DxSelectionStyle>
                    <!-- high priority -->
                </DxSelectionStyle>
            </DxPoint>
        </DxSeries>
        <DxCommonSeriesSettings ... >
            <DxPoint ... >
                <DxSelectionStyle>
                    <!-- low priority -->
                </DxSelectionStyle>
            </DxPoint>
        </DxCommonSeriesSettings>
    </DxChart>
</template>

<script>
import DxChart, {
    DxCommonSeriesSettings,
    DxSeries,
    DxPoint,
    DxSelectionStyle
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxCommonSeriesSettings,
        DxSeries,
        DxPoint,
        DxSelectionStyle
    }
}
</script>

React

App.js

import React from 'react';
import Chart, {
    CommonSeriesSettings,
    Series,
    Point,
    SelectionStyle
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <Series>
                    <Point ... >
                        <SelectionStyle>
                            {/* high priority */}
                        </SelectionStyle>
                    </Point>
                </Series>
                <CommonSeriesSettings ... >
                    <Point ... >
                        <SelectionStyle>
                            {/* low priority */}
                        </SelectionStyle>
                    </Point>
                </CommonSeriesSettings>
            </Chart>
        );
    }
}

export default App;

To choose which elements should be highlighted when a user selects a point, specify the selectionMode property. Just like selectionStyle, this property can be specified for all points belonging to an individual series or for all series points in the Chart.

jQuery

JavaScript

$(function() {
    $("#chartContainer").dxChart({
        // ...
        commonSeriesSettings: {
            point: {
                selectionMode: 'allArgumentPoints' // or 'onlyPoint' | 'allSeriesPoints' | 'none'
            }
        }
    });
});

Angular

HTML

TypeScript

<dx-chart ... >
    <dxo-common-series-settings ... >
        <dxo-point
            selectionMode="allArgumentPoints"> <!-- or 'onlyPoint' | 'allSeriesPoints' | 'none' -->
        </dxo-point>
    </dxo-common-series-settings>
</dx-chart>

import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

Vue

App.vue

<template> 
    <DxChart ... >
        <DxCommonSeriesSettings ... >
            <DxPoint
                selection-mode="allArgumentPoints"/> <!-- or 'onlyPoint' | 'allSeriesPoints' | 'none' -->
        </DxCommonSeriesSettings>
    </DxChart>
</template>

<script>
import DxChart, {
    DxCommonSeriesSettings,
    DxPoint
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxCommonSeriesSettings,
        DxPoint
    }
}
</script>

React

App.js

import React from 'react';
import Chart, {
    CommonSeriesSettings,
    Point
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <CommonSeriesSettings ... >
                    <Point
                        selectionMode="allArgumentPoints" /> {/* or 'onlyPoint' | 'allSeriesPoints' | 'none' */}
                </CommonSeriesSettings>
            </Chart>
        );
    }
}

export default App;

View Demo

By default, only a single point can be in the selected state at a time. If you need to allow multiple points to be in this state, assign "multiple" to the pointSelectionMode property.

jQuery

JavaScript

$(function() {
    $("#chartContainer").dxChart({
        // ...
        pointSelectionMode: 'multiple' // or 'single'
    });
});

Angular

HTML

TypeScript

<dx-chart 
    pointSelectionMode="multiple"> <!-- or 'single' -->
</dx-chart>

import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

Vue

App.vue

<template> 
    <DxChart ...
        point-selection-mode="multiple"> <!-- or 'single' -->
    </DxChart>
</template>

<script>
import DxChart from 'devextreme-vue/chart';

export default {
    components: {
        DxChart
    }
}
</script>

React

App.js

import React from 'react';
import Chart from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ...
                pointSelectionMode="multiple"> {/* or 'single' */}
            </Chart>
        );
    }
}

export default App;

View Demo

Events

When a user selects a series point, the Chart fires the pointSelectionChanged event that you can handle with a function. If the handling function is not going to be changed during the lifetime of the UI component, assign it to the onPointSelectionChanged property when you configure the UI component. To check whether a point was selected or the selection was cleared, call the isSelected() method of the point.

jQuery

JavaScript

$(function() {
    $("#chartContainer").dxChart({
        // ...
        onPointSelectionChanged: function (e) {
            var point = e.target;
            if (point.isSelected()) {
                // Commands to execute when the point is selected
            } else {
                // Commands to execute when the selection is cleared
            }
        }
    });
});

Angular

HTML

JavaScript

<dx-chart
    (onPointSelectionChanged)="onPointSelectionChanged($event)">
</dx-chart>

import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    onPointSelectionChanged (e) {
        const point = e.target;
        if (point.isSelected()) {
            // Commands to execute when the point is selected
        } else {
            // Commands to execute when the selection is cleared
        }
    };
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

Vue

App.vue

<template> 
    <DxChart
        @point-selection-changed="onPointSelectionChanged($event)"
        ...
    >
    </DxChart>
</template>

<script>
import DxChart from 'devextreme-vue/chart';

export default {
    components: {
        DxChart
    },
    methods: {
        onPointSelectionChanged (e) {
            const point = e.target;
            if (point.isSelected()) {
                // Commands to execute when the point is selected
            } else {
                // Commands to execute when the selection is cleared
            }
        }
    }
}
</script>

React

App.js

import React from 'react';
import Chart from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart
                onPointSelectionChanged={this.onPointSelectionChanged}
                ...
            >
            </Chart>
        );
    }

    onPointSelectionChanged (e) {
        const point = e.target;
        if (point.isSelected()) {
            // Commands to execute when the point is selected
        } else {
            // Commands to execute when the selection is cleared
        }
    }
}

export default App;

If you are going to change the event handler at runtime, or if you need to attach several handlers to the pointSelectionChanged event, subscribe to this event using the on(eventName, eventHandler) method. This approach is more typical of jQuery.

JavaScript

var pointSelectionChangedHandler1 = function (e) {
    var point = e.target;
    // First handler of the "pointSelectionChanged" event
};

var pointSelectionChangedHandler2 = function (e) {
    var point = e.target;
    // Second handler of the "pointSelectionChanged" event
};

$("#chartContainer").dxChart("instance")
    .on("pointSelectionChanged", pointSelectionChangedHandler1)
    .on("pointSelectionChanged", pointSelectionChangedHandler2);

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

JavaScript/jQuery Chart - Selection

API

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

See Also

User Interaction

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

See Also

Events

jQuery

Angular

Vue

React

See Also