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.

The arguments passed to the handling function provides access to the element whose state (click, hover) has been changed.

Trace Events:
@(Html.DevExpress()
    .BootstrapChart("clicksAndHoverChart")
    .ClientSideEvents(events => events
        .ArgumentAxisClick("onArgumentAxisClick")
        .LegendClick("onLegendClick")
        .PointClick("onPointClick")
        .PointHoverChanged("onPointHoverChanged")
        .SeriesClick("onSeriesClick")
        .SeriesHoverChanged("onSeriesHoverChanged"))
    .ArgumentAxis(axis => axis
        .ValueMarginsEnabled(false)
        .DiscreteAxisDivisionMode(DiscreteAxisDivisionMode.CrossLabels)
        .GridVisible(true)
        .TickInterval(1))
    .SettingsCommonSeries(settings => settings
        .ArgumentField("year"))
    .SeriesCollection(series => {
        series.AddSplineSeries()
            .ValueField("smp")
            .Name("SMP");
        series.AddSplineSeries()
            .ValueField("mmp")
            .Name("MMP");
            ...
    })
    .Bind("jsondata/architecture.json"))
function onArgumentAxisClick(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'ArgumentAxisClick');
}
function onLegendClick(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'LegendClick');
}
function onPointClick(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'PointClick');
}
function onPointHoverChanged(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'PointHoverChanged');
}
function onSeriesClick(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'SeriesClick');
}
function onSeriesHoverChanged(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'SeriesHoverChanged');
}

Selection

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

The arguments passed to the handling function provides access to the element whose selection has been changed.

Trace Events:
@(Html.DevExpress()
    .BootstrapChart("selectionChart")
    .ClientSideEvents(events => events
        .PointClick("onPointClickSel")
        .PointSelectionChanged("onPointSelectionChanged")
        .SeriesClick("onSeriesClickSel")
        .SeriesSelectionChanged("onSeriesSelectionChanged"))
    ...
    .Bind("jsondata/architecture.json"))
function onPointClickSel(s, e) {
    var clickedPoint = e.target;
    clickedPoint.isSelected() ? clickedPoint.clearSelection() : clickedPoint.select();
}
function onPointSelectionChanged(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'PointSelectionChanged')
}
function onSeriesClickSel(s, e) {
    var clickedSeries = e.target;
    clickedSeries.isSelected() ? clickedSeries.clearSelection() : clickedSeries.select();
}
function onSeriesSelectionChanged(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'SeriesSelectionChanged');
}

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:
@(Html.DevExpress()
    .BootstrapChart("tooltipsChart")
    .SettingsToolTip(settings=> settings
        .Enabled(true))
    .ClientSideEvents(events => events
        .TooltipHidden("onTooltipHidden")
        .TooltipShown("onTooltipShown"))
    ...
    .Bind("jsondata/architecture.json"))
function onTooltipHidden(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'TooltipHidden');
}
function onTooltipShown(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'TooltipShown');
}

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 can access the information about the occurred incident via the Target field of the object passed to the callback function as a parameter. This information includes the following.

Trace Events:
<form asp-controller="Chart" asp-action="ChartControlStatePartial" data-ajax="true" data-ajax-method="POST" data-ajax-update="#formContent">
    <div id="formContent">
       @(Html.Partial("ClientSideEvents/ChartControlStatePartial"))
    </div>
</form>
@(Html.DevExpress()
    .BootstrapPolarChart("chartControlStateChart")
    .UseSpiderWeb(true)
    .ClientSideEvents(events => events
        .Done("onDone")
        .Disposing("onDisposing")
        .IncidentOccurred("onIncidentOccurred"))
    .SettingsCommonSeries(settings => settings
        .ArgumentField("country"))
    .SeriesCollection(series => {
    series.AddLineSeries()
        .ValueField("apples")
        .Name("Apples");
        ...
    })
    .Bind("jsondata/fruit.json"))
using DevExpress.AspNetCore.DemoModels;
using Microsoft.AspNetCore.Mvc;
namespace DevExpress.AspNetCore.Demos {
    public partial class ChartController : Controller {
        public IActionResult ChartControlState() {
            return PartialView("ClientSideEvents/ChartControlState");
        }
        public IActionResult ChartControlStatePartial() {
            return PartialView("ClientSideEvents/ChartControlStatePartial");
        }
    }
}
function onDone(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'Done');
}
function onDisposing(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'Disposing');
}
function onIncidentOccurred(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'IncidentOccurred');
}
function refreshChart() {
    $('form').submit();
}
function occurError() {
    chartControlStateChart.GetInstance().option({ argumentAxis: { argumentType: "datetime" } });
}

Exporting

To perform a custom action before Chart data is exported, assign a client-side function to the Exporting event using the ClientSideEvents.Exporting method. 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 to 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:
@(Html.DevExpress()
    .BootstrapChart("exportingChart")
    .SettingsExport(settings => settings
        .Enabled(true)
        .FileName("stock_chart"))
    .ClientSideEvents(events => events
        .Exporting("onExporting")
        .Exported("onExported")
        .FileSaving("onFileSaving"))
    ...
    .Bind("jsondata/stockprice.json"))
function onExporting(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'Exporting');
}
function onExported(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'Exported');
}
function onFileSaving(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'FileSaving');
}

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. Add a handler for the ZoomStart (ZoomEnd) events to perform specific operations when zooming or scrolling begins (ends).

Trace Events:
@(Html.DevExpress()
    .BootstrapChart("chartZoom")
    .ZoomingMode(ChartPointerType.All)
    .ClientSideEvents(events => events
        .ZoomStart("onZoomStart")
        .ZoomEnd("onZoomEnd"))
    ...
    })
    .Bind("jsondata/architecture.json"))
function onZoomStart(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'ZoomStart');
}
function onZoomEnd(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'ZoomEnd');
}
Screen Size
Color Themes
Demo QR Code