Best approach to show labels while passing over candles in chart?

[Lorenzo]

Hi,

I have a fast candlestick chart and I would like to see a few things while hovering over the chart (I was thinking a trackball could be used for this but I'm not finding the behavior to accomplish this.)

1 - a label on the X-axis while hovering over the chart. The current x-axis is a date with a certain format, I would also like a label to show up in black as I hover over the x-axis value. It should also be the x value, but of a different date format.

2 - I would like to see a label on the right of the chart which shows the price at which I'm hovering.

3 - If using the trackball, I would like to change the order of the values in the black label in the middle of the chart that shows the HLOC, and possibly know how to add/remove values from that label.

Attachment: chartImage_8b72dc35.zip

[Devakumar Dhanapoosanam]

Hi Lorenzo,

Query 1: label on the X-axis while hovering over the chart.

We can show the x-axis label while hovering in chart using the trackball and by enabling axis ShowTrackBallInfo property as true as per in below code example.

<chart:SfChart.PrimaryAxis>

<chart:DateTimeAxis x:Name="xAxis" LabelFormat="dd MMM HH:mm"

ShowTrackBallInfo="True"/>

chart:SfChart.PrimaryAxis>

https://help.syncfusion.com/wpf/charts/interactive-features/trackball#axis-label

Query 1.1: It should also be the x value, but of a different date format.

We will check and update complete details on April 25, 2022.

Query 2: see a label on the right of the chart which shows the price at which I'm hovering.

We would like to suggest using CrossHairBehavior based on your requirement to show label value at y-axis while hovering in chart. Also, we can customize the crosshair horizontal and vertical line. Please refer the below link for more details.



https://help.syncfusion.com/wpf/charts/interactive-features/crosshair
https://help.syncfusion.com/wpf/charts/interactive-features/crosshair#vertical-and-horizontal-line

Query 3: I would like to change the order of the values in the black label in the middle of the chart that shows the HLOC, and possibly know how to add/remove values from that label.

We can customize the trackball series label using the TrackBallLabelTemplate property and can order or add any labels based on your requirement as per in the below code example.

<chart:SfChart.Resources>

<DataTemplate x:Key="candleTemplate">

<Border CornerRadius="5" Background="Black">

<StackPanel Margin="4" Orientation="Vertical">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

Grid.ColumnDefinitions>

<TextBlock Text="High : " FontSize="10" Foreground="White"/>

<TextBlock Padding="3,0,0,0" FontSize="10" Grid.Column="1"

Text="{Binding Item.High}" Foreground="White"/>

Grid>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

Grid.ColumnDefinitions>

<TextBlock Text="Open : " FontSize="10" Foreground="White"/>

<TextBlock Padding="3,0,0,0" FontSize="10" Grid.Column="1"

Text="{Binding Item.Open}" Foreground="White"/>

Grid>

…..

StackPanel>

Border>

DataTemplate>

chart:SfChart.Resources>

…

<chart:FastCandleBitmapSeries ItemsSource="{Binding StockPriceDetails}"

High="High" Low="Low"

Close="Close" Open="Open"

XBindingPath="Date"
TrackBallLabelTemplate="{StaticResource candleTemplate}"/>

Please find the sample from the attachment below and let us know if you need any further assistance on this.

Regards,

Devakumar D

Attachment: 174569_b039c8b1.zip

[Devakumar Dhanapoosanam]

Hi Lorenzo,

Query 1.1: It should also be the x value, but of a different date format.

We have achieved your requirement using the axis TrackBallLabelTemplate and by using converter to show trackball axis label with different date time format as per in the below code example.

…

<chart:SfChart.Resources>

    <local:LabelFormatConverter x:Key="formatConverter"/>

    <DataTemplate x:Key="axisLabelTemplate">

        <Border CornerRadius="2" Background="Black">

            <TextBlock Foreground="White" Margin="5"

                       Text="{Binding Converter={StaticResource formatConverter},

                                                 ConverterParameter={x:Reference chart}}"/>

        </Border>

    </DataTemplate>

    ….

</chart:SfChart.Resources>

<chart:SfChart.PrimaryAxis>

    <chart:DateTimeAxis x:Name="xAxis" LabelFormat="dd MMM HH:mm"

                        ShowTrackBallInfo="True"

                        TrackBallLabelTemplate="{StaticResource axisLabelTemplate}"/>

</chart:SfChart.PrimaryAxis>
…

public class LabelFormatConverter : IValueConverter

{

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

    {

        var chartPointInfo = (ChartPointInfo)value;

        var chart = parameter as SfChart;

        if (chartPointInfo != null && chart != null)

        {

            var x = chartPointInfo.X;

            var y = chartPointInfo.Y;

            Point point = new Point(x, y);

            double xValue = chart.PointToValue(chart.PrimaryAxis, point);

            return DateTime.FromOADate(xValue).ToString("MM/dd/yyyy hh:mm tt");

        }

 

        return string.Empty;

    }

 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

    {

        return value;

    }

}

https://help.syncfusion.com/wpf/charts/interactive-features/trackball#customization-of-axis-label

Please find the sample from the attachment below and let us know if you need any further assistance on this.

Regards,

Devakumar D

Attachment: 174569_modified_7b6f9b3a.zip

[Lorenzo]

Thanks for all the information.

However I'm getting an issue when implementing both the trackball and the crosshair. I get a double label at the bottom. I guess it's coming from both the crosshair AND the trackball?

Is there a way to make the crosshair label go away? or even how make the vertical line of the crosshair go away, since the trackball works as a vertical line.

Here is my xaml for the chart. I've attached a screenshot.

                       Grid.Row ="1">
            
                                                    EnableScrollBar="True"
                                    ShowTrackBallInfo="True"
                                    Interval="1"
                                    LabelFormat="d MMM HH:mm"
                                    ZoomFactor ="{Binding Path=XZoomFactor, Mode=TwoWay}"
                                    ZoomPosition ="{Binding Path=XZoomPosition, Mode=TwoWay}"/>
            


            
                                                     OpposedPosition="True"
                                     ShowTrackBallInfo="True"
                                     Minimum="{Binding Path=YMin}"
                                     Maximum="{Binding Path=YMax}"/>
            


                                                      ItemsSource="{Binding Path=ChartBars}"
                                          XBindingPath="Date"
                                          High="High"
                                          Low="Low"
                                          Open="Open"
                                          Close="Close"
                                          BearFillColor="Maroon"
                                          BullFillColor="MidnightBlue"/>


            




            
        

Attachment: double_label_ce823d8c.zip

[Lorenzo]

This last statement can be disregarded.

I think the answer to my last question is:

1 - to remove the trackballbehavior,

2 - use the crosshairbehavior

3 - set ShowTrackBallInfo =True, on both axis

4 - set ShowTootip = true on the axis 

Thanks for all the other help as well.

[Yuvaraj Palanisamy]

Hi Lorenzo,

When we add Trackballbehavior and CrossHairBehavior with enable axis ShowTrackballInfo property, added two labels by default. You can remove the axis CrosshairLabel with the help of setting empty content for CrosshairlabelTemplate. And also remove the crosshair vertical line by setting stroke thickness as 0
as per the below code example.

<chart:SfChart.Resources>

  <DataTemplate x:Key="crosshairLabelTemplate">

      <ContentControl />

  </DataTemplate>

 

<Style TargetType="Line" x:Key="lineStyle">

    <Setter Property="StrokeThickness" Value="0"></Setter>

</Style>

. . .

</chart:SfChart.Resources>

 

 

<chart:SfChart.PrimaryAxis>

    <chart:DateTimeAxis x:Name="xAxis"

                        LabelFormat="dd MMM HH:mm"

                        ShowTrackBallInfo="True"

                        CrosshairLabelTemplate="{StaticResource crosshairLabelTemplate}

                        TrackBallLabelTemplate="{StaticResource axisLabelTemplate}"/>

</chart:SfChart.PrimaryAxis>

 

<chart:SfChart.Behaviors>

    <chart:ChartTrackBallBehavior LineStyle="{StaticResource hitTestCollapselineStyle}"/>

    <chart:ChartCrossHairBehavior VerticalLineStyle="{StaticResource lineStyle}"

                                  HorizontalLineStyle="{StaticResource hitTestCollapselineStyle}" />

    <chart:ChartSelectionBehavior EnableSegmentSelection="True"/>

</chart:SfChart.Behaviors>

We have attached the sample for your reference, please find the sample from the below attachment.

Output:

Please let us know if you have further assistance.

Regards,

Yuvaraj.

Attachment: ChartSample_19649805.zip