Single Selection

The Chart control supports selection of points and series with a mouse click. To allow selecting a single item at a time, call the Chart control’s PointSelectionMode (for points) or SeriesSelectionMode (for series) method with the Single parameter.

This demo illustrates the use of the PointSelectionMode method and the client-side PointClick event to implement single item selection in the Chart.

Country:
Selected value:

@(Html.DevExpress()
    .BootstrapChart("chartSingleSelection")
    .TitleText("Economy - Statistics leaders of the European Union export")
    .PointSelectionMode(ChartElementSelectionMode.Single)
    .SettingsCommonSeries(settings => settings
        .ArgumentField("country"))
    .SeriesCollection(series => {
        series.AddBarSeries()
            .ValueField("year2013")
            .Name("2013");
        series.AddBarSeries()
            .ValueField("year2014")
            .Name("2014");
        ...
    })
    .ValueAxisCollection(axis => axis
        .AddValueAxis()
            .TickInterval(2000)
            .Label(label => label
                .Format(format => format
                    .Type(DevExpress.AspNetCore.Bootstrap.FormatType.Currency)
                    .Precision(1))))
    .SettingsLegend(settings => settings
        .VerticalAlignment(VerticalAlign.Bottom)
        .HorizontalAlignment(HorizontalAlign.Center))
    .SettingsToolTip(settings => settings
        .Enabled(true)
        .Format(format => format.Type(DevExpress.AspNetCore.Bootstrap.FormatType.Currency)))
    .ClientSideEvents(events => events
        .Init("onChartPointAction")
        .PointClick("onPointClick")
        .PointSelectionChanged("onChartPointAction"))
    .Bind("jsondata/export.json"))
function onPointClick(s, e) {
    e.target.select();
}
function onChartPointAction(s, e) {
    var country = e.target && e.target.originalArgument;
    var value = e.target && Globalize.formatCurrency(e.target.originalValue, "USD");
    $("#lblCountry").html(country ? country : "not selected");
    $("#lblSelectedValue").html(value ? value : "");
}

Multiple Selection

To allow multiple item selection, call the Chart control’s PointSelectionMode (for points) or SeriesSelectionMode (for series) method with the Multiple parameter.

This demo illustrates the use of the SeriesSelectionMode method and the client-side SeriesClick event to implement multiple item selection in the Chart.

Total series selected:
@(Html.DevExpress()
    .BootstrapChart("multipleSelection")
    .TitleText("Internet Explorer Statistics")
    .SeriesSelectionMode(ChartElementSelectionMode.Multiple)
    .ClientSideEvents(events => events
        .SeriesClick("onSeriesClick")
        .Done("onChartSeriesAction")
        .SeriesSelectionChanged("onChartSeriesAction"))
    .ArgumentAxis(axis => axis
        .Type(AxisScaleType.Discrete)
        .ValueMarginsEnabled(false))
    .SettingsCommonSeries(settings => settings
        .ArgumentField("year"))
    .SeriesCollection(series => {
        series.AddBarSeries()
            .ValueField("IE7")
            .Name("Internet Explorer 7");
        series.AddBarSeries()
            .ValueField("IE8")
            .Name("Internet Explorer 8");
        ...
    })
    .ValueAxisCollection(axis => axis
        .AddValueAxis()
            .TickInterval(0.04m)
            .Label(label => label
                .Format(format => format
                    .Type(DevExpress.AspNetCore.Bootstrap.FormatType.Percent)
                    .Precision(1))))
    .SettingsLegend(settings => settings
        .VerticalAlignment(VerticalAlign.Bottom)
        .HorizontalAlignment(HorizontalAlign.Center))
    .Bind("jsondata/ie.json"))
function onSeriesClick(s, e) {
    var series = e.target;
    if(series.isSelected())
        series.clearSelection();
    else
        series.select();
}
function onChartSeriesAction(s, e) {
    var count = e.component
        .getAllSeries()
        .filter(function(series) { return series.isSelected(); })
        .length;
    $("#lblTotalSeries").html(count);
}
Screen Size
Color Themes
Demo QR Code