Clicks and Hover

The following events allow you to respond to mouse clicks on various elements of the Сhart.

You can handle mouse hover events for points and series of the Сhart.

When implementing a handling function, use the object passed to it as its parameter. Among the fields of this object, you can find the element whose state (click, hover) has been changed.

Trace Events:
<dx:BootstrapChart ID="ClicksAndHoverChart" runat="server" DataSourceUrl="~/jsondata/architecture.json">
    <ClientSideEvents
        ArgumentAxisClick="onArgumentAxisClick"
        LegendClick="onLegendClick"
        PointClick="onPointClick"
        PointHoverChanged="onPointHoverChanged"
        SeriesClick="onSeriesClick"
        SeriesHoverChanged="onSeriesHoverChanged" />
    <ArgumentAxis ValueMarginsEnabled="false" DiscreteAxisDivisionMode="CrossLabels" GridVisible="true" TickInterval="1" />
    <SettingsCommonSeries ArgumentField="year" />
    <SeriesCollection>
        <dx:BootstrapChartSplineSeries ValueField="smp" Name="SMP" />
        <dx:BootstrapChartSplineSeries ValueField="mmp" Name="MMP" />
        ...
    </SeriesCollection>
</dx:BootstrapChart>

Selection

The Chart supports selection of points and series with a mouse click, to which you can respond using the following events.

When implementing a handling function, use the object passed to it as its parameter. Among the fields of this object, you can find the element whose selection has been changed.

Trace Events:
<dx:BootstrapChart ID="SelectionChart" runat="server" DataSourceUrl="~/jsondata/architecture.json">
    <ClientSideEvents
        PointClick="onPointClickSel"
        PointSelectionChanged="onPointSelectionChanged"
        SeriesClick="onSeriesClickSel"
        SeriesSelectionChanged="onSeriesSelectionChanged" />
    ...
</dx:BootstrapChart>

Tooltips

A point's tooltip appears when a user moves the mouse cursor over the point. When a tooltip appears, you can perform specific actions by handling the TooltipShown event. Additionally, when a tooltip is hidden, you can perform specific actions by handling the TooltipHidden event. The event parameter object provides access to the series point whose tooltip has been shown/hidden.

Trace Events:
<dx:BootstrapChart ID="TooltipsChart" runat="server" DataSourceUrl="~/jsondata/architecture.json">
    <SettingsToolTip Enabled="true" />
    <ClientSideEvents
        TooltipHidden="onTooltipHidden"
        TooltipShown="onTooltipShown" />
    ...
</dx:BootstrapChart>

Chart Control State

This demo illustrates the usage of client-side events provided by the Chart control.

Handle the Disposing event to perform a custom action when the widget is being removed.

The Done event fires when the Series and Point chart elements are ready to be accessed.

When an error or warning appears, the widget notifies you by passing a message to the browser console. This message contains the ID of the incident, a brief description, and a link to the Errors and Warnings document where further information about this incident can be found. However, you can handle errors and warnings the way you require. To do this, implement a client-side function performing the required actions and assign it to the IncidentOccurred event. Within this function, you have access to the information about an occurred incident. This information can be accessed from the Target field of the object passed to the callback function as a parameter. This information includes the following.

  • id - Contains the ID of an incident. The full list of IDs can be found in the Errors and Warnings document.
  • type - Contains the type of an incident. This field equals 'error' for errors or 'warning' for warnings.
  • args - Contains the argument of an incident's message. The content of this field varies greatly, depending on the incident. For example, it may contain the name of a data source field that has not been specified correctly, or the name of an option that has not been set properly.
  • text - Contains text passed to the browser console. This text includes the content of the args field if there is any.
  • widget - Contains the name of a widget that produced the error or warning.
  • version - Contains the currently used version of the ChartJS library.

Trace Events:
<dx:BootstrapCallbackPanel runat="server" ClientInstanceName="cp">
    <ContentCollection>
        <dx:ContentControl>
            <dx:BootstrapPolarChart ID="ChartControlStateChart" runat="server" ClientInstanceName="polarChart" DataSourceUrl="~/jsondata/fruit.json" UseSpiderWeb="true">
                <ClientSideEvents
                    Done="onDone"
                    Disposing="onDisposing"
                    IncidentOccurred="onIncidentOccurred" />
                <SettingsCommonSeries ArgumentField="country" />
                <SeriesCollection>
                    <dx:BootstrapPolarChartLineSeries ValueField="apples" Name="Apples" />
                    ...
                </SeriesCollection>
            </dx:BootstrapPolarChart>
        </dx:ContentControl>
    </ContentCollection>
</dx:BootstrapCallbackPanel>

Exporting

To perform a custom action before Chart data is exported, assign a client-side function to the Exporting event. For example, you can cancel exporting using the Cancel field of the event parameter object.

Assign a client-side function to the Exported event if you need to perform a custom action after Chart data is exported. For example, this function can notify the user that the exporting has completed.

To perform a custom action before a file with exported data is saved on the user's local storage, assign a client-side function to the FileSaving event. Using the Cancel field of the event parameter object, you can cancel file saving.

Trace Events:
<dx:BootstrapChart ID="ExportingChart" runat="server" TitleText="Stock Price" DataSourceUrl="~/jsondata/stockprice.json">
    <SettingsExport Enabled="true" FileName="stock_chart" />
    <ClientSideEvents
        Exporting="onExporting"
        Exported="onExported"
        FileSaving="onFileSaving" />
    ...
</dx:BootstrapChart>

Zoom

When you deal with a large amount of data, providing an efficient way of navigating this data is essential. The Chart control allows you to enable built-in scrolling and zooming. You can use the mouse wheel or the "pinch" gesture for zooming and the horizontal slide gesture across the chart (using mouse or touch interface) for scrolling. Write a handler for the ZoomStart (ZoomEnd) event to perform specific operations when zooming or scrolling begins (ends).

Trace Events:
<dx:BootstrapChart ID="ChartZoom" runat="server" DataSourceUrl="~/jsondata/architecture.json" ZoomingMode="All">
    <ClientSideEvents
        ZoomStart="onZoomStart"
        ZoomEnd="onZoomEnd" />
    ...
</dx:BootstrapChart>
Screen Size
Color Themes
Demo QR Code