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.

Display the “Total” Point Value in the Crosshair Panel

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

Default.aspx (C#)

<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;
}" />

Change the Crosshair Label Font Size

The example below shows how to handle CustomDrawCrosshair to change the label’s font size.

Default.aspx

<dxchartsui:WebChartControl ID="WebChartControl1" runat="server" ClientInstanceName="chartControl" CrosshairEnabled="True" Height="368px" Width="607px">
    <CrosshairOptions ShowGroupHeaders="False"/>
    <!--...-->
        <clientsideevents customdrawcrosshair="function(s, e) {
            for (var i = 0; i &lt; e.crosshairElements.length; i++) {        
                e.crosshairElements[i].LabelElement.font.fontSize = 20;
            }   
        }"
        />
</dxchartsui:WebChartControl>