DevExtreme Vue - Selection

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.

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) {
        let point = e.target;
        if (point.isSelected()) {
            point.clearSelection();
        } else {
            point.select();
        }
    };
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

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

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        onPointClick: function (e) {
            var series = e.target.series;
            if (series.isSelected()) {
                series.clearSelection();
            } else {
                series.select();
            }
        }
    });
});
Angular
HTML
TypeScript
<dx-chart
    (onPointClick)="onPointClick($event)">
</dx-chart>
import { DxChartModule } from 'devextreme-angular';
// ...
export class AppComponent {
    onPointClick (e) {
        let series = e.target.series;
        if (series.isSelected()) {
            series.clearSelection();
        } else {
            series.select();
        }
    };
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

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) chart: DxChartComponent;
    clearSelection() {
        this.chart.instance.clearSelection();
    }
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
See Also

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.%seriesType%.point.selectionStyle
    The selection style for all points belonging to a series of a specific type (line, area, etc.).

  • commonSeriesSettings.point.selectionStyle
    The selection style for all series points in the Chart.

Note that individual settings override type-specific settings which, in turn, override common settings.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        series: {
            point: {
                selectionStyle: {
                    // high priority
                }
            }
        },
        commonSeriesSettings: {
            area: {
                point: {
                    selectionStyle: {
                        // middle priority
                    }
                }
            },
            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-area>
            <dxo-point>
                <dxo-selection-style>
                    <!-- middle priority -->
                </dxo-selection-style>
            </dxo-point>
        </dxo-area>
    </dxo-common-series-settings>
</dx-chart>
import { DxChartModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

To choose which elements should be highlighted when a user selects a point, specify the selectionMode option. Just like selectionStyle, this option can be specified for all points belonging to an individual series, or for all points belonging to a series of a specific type, 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
    ],
    // ...
})

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 option.

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
    ],
    // ...
})

View Demo

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 widget, assign it to the onPointSelectionChanged option when you configure the widget. 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) {
        let 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
    ],
    // ...
})

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);
See Also