API
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.
- 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.
- 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.
- 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;
See Also
User Interaction
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.
- 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.
- 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;
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.
- 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;
See Also
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.
- 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;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.