.NET Charts - New Crosshair Features (v18.1)

Oliver's Blog
26 April 2018

In addition to Crosshair Cursor performance improvements mentioned in our recent post about performance improvements, we extended the Crosshair functionality on the basis of some very popular customer requests. The improvements apply to Chart Controls for WinForms and WPF, as well as ASP.NET WebForms and MVC, in our upcoming release v18.1.

New Crosshair Line mode: Free

We introduced a new Crosshair Cursor mode where snapping is disabled and lines are shown directly at the current mouse pointer position:

Free Lines

To enable this feature, set the property ChartControl.CrosshairOptions.LineMode to Free.

Note that the property CrosshairOptions.SnapMode (link for WinForms and ASP.NET, link for WPF) is still used in this mode to determine which values are selected for inclusion in the crosshair output.

Crosshair Details in the legend

In certain situations it can be convenient to display Crosshair Cursor information in the Legend panel instead of the standard “tooltip” popup window. This image shows a legend filled with Crosshair detail for the year 2016:

Crosshair Information in the Legend

Use the property ChartControl.CrosshairOptions.ContentShowMode to move the Crosshair Cursor data to the legend. Note that it is also possible to customize this option for an individual series using the Series.CrosshairContentShowMode property.

Include extra field values in Crosshair information

The final new feature is perhaps the best of the lot: you can now display arbitrary extra data source field values in the Crosshair output using the pattern syntax (link for WinForms and ASP.NET, link for WPF).

For example, the following text pattern includes the value of a field called Discount in the Crosshair output: {S}: {V:F2} (Discount: {Discount:P0}). The newly extended pattern syntax interprets the part {Discount:P0} as an instruction to include an extra field value.

Extra Field Values

8 comment(s)
Steve Sharkey
Steve Sharkey

Excellent - makes me want to include more charts in my apps!

26 April, 2018
Oleg Sharkevich
Oleg Sharkevich

Great, thanks!

Did you plan to include extra field values in series point label ?

27 April, 2018
Roman K (DevExpress)
Roman K (DevExpress)

Hello Oleg,

You can use extra fields in any text pattern, including series point labels' one.

27 April, 2018

Will it be possible to format Crosshair Information and Legend so that values are displayed in columns formatted with right aligned decimals? Your samples always look good, as they have values with all the same length.

How would the sample above look, when "Dev AV North" has $ 30.1? And bonus question: what will it look, if i show Euros, so the sign "€" will behind the value?

I had a support qestion about this years ago. The answer then was: not possible, not planned.

My users say: looks terrible unformatted. The program shows everything fine, but not the legend...

11 May, 2018
Oliver Sturm (DevExpress)
Oliver Sturm (DevExpress)

Hi Hans,

After some discussion with the team, I’m wondering if you can confirm our understanding of your scenario. We think you’d like to format values along these lines, aligning the decimal separators:


This display would have the advantage of looking tidy even when value lengths vary due to different numbers of decimal places or the inclusion of extra currency symbols. Mind you, I’m not sure we can find a very good solution, but I’d like to make sure we understand each other!

14 May, 2018

Hi Oliver,

yes, you are right! I need to format the values aligned to the decimal separators.

The standard formatting of the legend is

[line sample] [a name] [value]

- Meier   1.000,10 E

- Müller   1.000.000,00 E

i was looking for:

- Meier          1.000,10 E

- Müller  1.000.000,00 E

your trick is, to set values to front? What would the formatting for crosshair and diagram legend? I think, with this i can´t use the standard magic and have to do formatting at runtime in code?

If that works, i think it would be ok to my users.

If there is a solution, may be you could post / send a link to a little code sample?

Or we should move this discussion to a regular ticket.

Thank you!

17 May, 2018
Oliver Sturm (DevExpress)
Oliver Sturm (DevExpress)


I talked to the team again and they say it's part of their future plans to provide formatting similar to that in the legend (which seems to be quite close to your requirements) for the crosshair tooltips. Meanwhile, they suggested you may be able to solve your problem by custom drawing. I have dropped the sample code they gave me into a gist here: gist.github.com/.../ac4a905c12f16d2e285701fef16f00a6

You're right, we should move any further discussion into a support ticket - meanwhile I hope the sample helps you!

18 May, 2018

Hi Oliver,

your sample does nearly exactly what i need.

I added a monospace font. So now the decimals are aligned and really looking much better! The different font is not so disturbing then an unalingned decimal!

Thanks for your help!

18 May, 2018

Please login or register to post comments.