ASPxClientWebChartControl.CustomDrawCrosshair Event
Occurs before crosshair items are drawn when the chart’s contents are being drawn.
Declaration
CustomDrawCrosshair: ASPxClientEvent<ASPxClientWebChartControlCustomDrawCrosshairEventHandler<ASPxClientWebChartControl>>Event Data
The CustomDrawCrosshair event's data class is ASPxClientWebChartControlCustomDrawCrosshairEventArgs. The following properties provide information specific to this event:
| Property | Description |
|---|---|
| crosshairElementGroups | Provides access to the settings of crosshair elements and crosshair group header elements to customize their appearance. |
| crosshairElements | Obsolete. Returns crosshair elements settings to custom draw a crosshair cursor. |
| crosshairGroupHeaderElements | Obsolete. Returns the crosshair group header elements to customize their appearance. |
| crosshairIndicatorLegendElements | Returns the array of indicator elements that the Crosshair Cursor displays in a legend. |
| crosshairLegendElements | Returns the crosshair legend elements to custom draw the Crosshair. |
| cursorCrosshairAxisLabelElements | Returns the crosshair axis label elements to customize their appearance. |
| cursorCrosshairLineElement | Gets crosshair line element settings that are used to custom draw a crosshair cursor. |
| processOnServer | Specifies whether or not to process the event on the server. Inherited from ASPxClientProcessingModeEventArgs. |
Remarks
Use the CustomDrawCrosshair event to create a custom appearance for crosshair items.
Example
This example illustrates how to display the “Total” point value in the crosshair cursor panel.
To accomplish this task, handle the client-side ASPxClientWebChartControl.CustomDrawCrosshair event and include the Total value via the LabelElement.footerText property of the last crosshair panel element.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-display-the-total-point-value-in-the-crosshair-panel-e5099
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="DevExpress.XtraCharts.v13.2.Web, Version=13.2.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.XtraCharts.Web" tagprefix="dxchartsui" %>
<%@ Register assembly="DevExpress.XtraCharts.v13.2, Version=13.2.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.XtraCharts" tagprefix="cc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<dxchartsui:WebChartControl ID="WebChartControl1" runat="server" ClientInstanceName="chartControl" CrosshairEnabled="True" Height="368px" Width="607px">
<diagramserializable>
<cc1:XYDiagram>
<axisx visibleinpanesserializable="-1">
</axisx>
<axisy visibleinpanesserializable="-1">
</axisy>
</cc1:XYDiagram>
</diagramserializable>
<seriesserializable>
<cc1:Series Name="Series 1">
<points>
<cc1:SeriesPoint ArgumentSerializable="A" Values="100">
</cc1:SeriesPoint>
<cc1:SeriesPoint ArgumentSerializable="B" Values="50">
</cc1:SeriesPoint>
</points>
<viewserializable>
<cc1:StackedBarSeriesView>
</cc1:StackedBarSeriesView>
</viewserializable>
</cc1:Series>
<cc1:Series Name="Series 2">
<points>
<cc1:SeriesPoint ArgumentSerializable="A" Values="150">
</cc1:SeriesPoint>
<cc1:SeriesPoint ArgumentSerializable="B" Values="200">
</cc1:SeriesPoint>
</points>
<viewserializable>
<cc1:StackedBarSeriesView>
</cc1:StackedBarSeriesView>
</viewserializable>
</cc1:Series>
</seriesserializable>
<clientsideevents customdrawcrosshair="function(s, e) {
var summary = 0;
for (var i = 0; i < e.crosshairElements.length; i++) {
summary += e.crosshairElements[i].Point.point.values[0];
}
e.crosshairElements[e.crosshairElements.length - 1].LabelElement.footerText = 'Total :' + summary;
}" />
</dxchartsui:WebChartControl>
</div>
</form>
</body>
</html>