How to: Format Values in a Crosshair Cursor via a Label's Patterns

Aug 01, 2019
3 minutes to read

This example demonstrates how to change a text displayed in crosshair labels using crosshair format patterns.

To accomplish this, it is necessary to specify a string which will represent the pattern displayed within a crosshair label using the CrosshairAxisLabelOptions.Pattern, SeriesBase.CrosshairLabelPattern, and CrosshairOptions.GroupHeaderPattern properties.

In addition, standard and custom format specifiers are used together with the placeholders to format numeric and date/time values (e.g., “{A:F0}” ). To learn more, see the Format Specifiers topic.

To learn more on crosshair cursors, see the Tooltip and Crosshair Cursor topic.

View Example

Form1.cs
Form1.vb

csharp

using System;
using System.Windows.Forms;
using DevExpress.XtraCharts;

namespace FormatCrosshairLabels
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            this.Load += new System.EventHandler(this.Form1_Load);
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            // Create an empty chart.
            ChartControl chartControl1 = new ChartControl();

            // Create a first line series and add points to it.
            Series series1 = new Series("Europe", ViewType.Line);
            series1.Points.Add(new SeriesPoint(1950, 546));
            series1.Points.Add(new SeriesPoint(1960, 605));
            series1.Points.Add(new SeriesPoint(1970, 656));
            series1.Points.Add(new SeriesPoint(1980, 694));
            series1.Points.Add(new SeriesPoint(1990, 721));
            series1.Points.Add(new SeriesPoint(2000, 730));
            series1.Points.Add(new SeriesPoint(2010, 728));

            // Create a second line series and add points to it.
            Series series2 = new Series("Americas", ViewType.Line);
            series2.Points.Add(new SeriesPoint(1950, 332));
            series2.Points.Add(new SeriesPoint(1960, 417));
            series2.Points.Add(new SeriesPoint(1970, 513));
            series2.Points.Add(new SeriesPoint(1980, 614));
            series2.Points.Add(new SeriesPoint(1990, 721));
            series2.Points.Add(new SeriesPoint(2000, 836));
            series2.Points.Add(new SeriesPoint(2010, 935));

            // Add the series to the chart.
            chartControl1.Series.Add(series1);
            chartControl1.Series.Add(series2);

            // Hide the legend (if necessary).
            chartControl1.Legend.Visible = false;

            //Show crosshair axis lines and crosshair axis labels to see format values of crosshair labels 
            chartControl1.CrosshairOptions.ShowArgumentLabels = true;
            chartControl1.CrosshairOptions.ShowValueLabels = true;
            chartControl1.CrosshairOptions.ShowValueLine = true;
            chartControl1.CrosshairOptions.ShowArgumentLine = true;

            // Specify the crosshair label pattern for both series.
            series1.CrosshairLabelPattern = "{S} population: {V}";
            series2.CrosshairLabelPattern = "{S} population: {V}";

            // Specify the crosshair group header pattern.
            chartControl1.CrosshairOptions.GroupHeaderPattern = "Year: {A}";

            // Cast the chart's diagram to the XYDiagram type, to access its axes.
            XYDiagram diagram = (XYDiagram)chartControl1.Diagram;

            // Specify the crosshair axis labels pattern for X-axis.
            diagram.AxisX.CrosshairAxisLabelOptions.Pattern = "Year: {A:F0}";

            // Add the chart to the form.
            chartControl1.Dock = DockStyle.Fill;
            this.Controls.Add(chartControl1);
        }

    }
}

Imports System
Imports System.Windows.Forms
Imports DevExpress.XtraCharts

Namespace FormatCrosshairLabels
    Partial Public Class Form1
        Inherits Form

        Public Sub New()
            AddHandler Load, AddressOf Form1_Load
        End Sub

        Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
            ' Create an empty chart.
            Dim chartControl1 As New ChartControl()

            ' Create a first line series and add points to it.
            Dim series1 As New Series("Europe", ViewType.Line)
            series1.Points.Add(New SeriesPoint(1950, 546))
            series1.Points.Add(New SeriesPoint(1960, 605))
            series1.Points.Add(New SeriesPoint(1970, 656))
            series1.Points.Add(New SeriesPoint(1980, 694))
            series1.Points.Add(New SeriesPoint(1990, 721))
            series1.Points.Add(New SeriesPoint(2000, 730))
            series1.Points.Add(New SeriesPoint(2010, 728))

            ' Create a second line series and add points to it.
            Dim series2 As New Series("Americas", ViewType.Line)
            series2.Points.Add(New SeriesPoint(1950, 332))
            series2.Points.Add(New SeriesPoint(1960, 417))
            series2.Points.Add(New SeriesPoint(1970, 513))
            series2.Points.Add(New SeriesPoint(1980, 614))
            series2.Points.Add(New SeriesPoint(1990, 721))
            series2.Points.Add(New SeriesPoint(2000, 836))
            series2.Points.Add(New SeriesPoint(2010, 935))

            ' Add the series to the chart.
            chartControl1.Series.Add(series1)
            chartControl1.Series.Add(series2)

            ' Hide the legend (if necessary).
            chartControl1.Legend.Visible = False

            'Show crosshair axis lines and crosshair axis labels to see format values of crosshair labels 
            chartControl1.CrosshairOptions.ShowArgumentLabels = True
            chartControl1.CrosshairOptions.ShowValueLabels = True
            chartControl1.CrosshairOptions.ShowValueLine = True
            chartControl1.CrosshairOptions.ShowArgumentLine = True

            ' Specify the crosshair label pattern for both series.
            series1.CrosshairLabelPattern = "{S} population: {V}"
            series2.CrosshairLabelPattern = "{S} population: {V}"

            ' Specify the crosshair group header pattern.
            chartControl1.CrosshairOptions.GroupHeaderPattern = "Year: {A}"

            ' Cast the chart's diagram to the XYDiagram type, to access its axes.
            Dim diagram As XYDiagram = CType(chartControl1.Diagram, XYDiagram)

            ' Specify the crosshair axis labels pattern for X-axis.
            diagram.AxisX.CrosshairAxisLabelOptions.Pattern = "Year: {A:F0}"

            ' Add the chart to the form.
            chartControl1.Dock = DockStyle.Fill
            Me.Controls.Add(chartControl1)
        End Sub

    End Class
End Namespace