Single Selection

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

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

Country:
Selected value:

<dx:BootstrapChart runat="server" TitleText="Economy - Statistics leaders of the European Union export" DataSourceUrl="~/jsondata/export.json"
    PointSelectionMode="Single">
    <ClientSideEvents PointClick="onPointClick" Init="onChartPointAction" PointSelectionChanged="onChartPointAction" />
    <SettingsCommonSeries ArgumentField="country" />
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis TickInterval="2000">
            <Label>
                <Format Type="Currency" Precision="1" />
            </Label>
        </dx:BootstrapChartValueAxis>
    </ValueAxisCollection>
    <SeriesCollection>
        <dx:BootstrapChartBarSeries ValueField="year2013" Name="2013" />
        <dx:BootstrapChartBarSeries ValueField="year2014" Name="2014" />
        ...
    </SeriesCollection>
    <SettingsLegend VerticalAlignment="Bottom" HorizontalAlignment="Center" />
    <SettingsToolTip Enabled="true">
        <Format Type="Currency" Precision="1" />
    </SettingsToolTip>
</dx:BootstrapChart>

Multiple Selection

To allow multiple item selection, set the Chart control’s PointSelectionMode (for points) or SeriesSelectionMode (for series) property to Multiple.

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

Total series selected:

<dx:BootstrapChart runat="server" TitleText="Internet Explorer Statistics" DataSourceUrl="~/jsondata/ie.json"
    SeriesSelectionMode="Multiple">
    <ClientSideEvents SeriesClick="onSeriesClick" Done="onChartSeriesAction" SeriesSelectionChanged="onChartSeriesAction" />
    <ArgumentAxis Type="Discrete" ValueMarginsEnabled="false" />
    <SettingsCommonSeries ArgumentField="year" />
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis TickInterval="0.04">
            <Label>
                <Format Type="Percent" Precision="1" />
            </Label>
        </dx:BootstrapChartValueAxis>
    </ValueAxisCollection>
    <SeriesCollection>
        <dx:BootstrapChartStackedAreaSeries ValueField="IE7" Name="Internet Explorer 7" />
        <dx:BootstrapChartStackedAreaSeries ValueField="IE8" Name="Internet Explorer 8" />
        ...
    </SeriesCollection>
    <SettingsLegend VerticalAlignment="Bottom" HorizontalAlignment="Center" />
</dx:BootstrapChart>
Screen Size
Color Themes
Demo QR Code