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 use the last crosshair panel element’s LabelElement.footerText property to display the Total value.

View Example

<%@ 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 &lt; 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>
See Also