Pre loader

Custom Styling of CursorModifier Tooltip, Labels and Crosshairs

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

Answered
0
0

When using the CursorModifier and rolling over a series the numbers appear without thousand seperators ie: 10000 instead of 10,000. Is there a way I can add these?

  • You must to post comments
Best Answer
0
0

Update: SciChart v4

The SciChart v4 Documentation now has a topic on styling the CursorModifier Tooltips, Lines and Axis Labels. You can see this here:

> How to style the CursorModifier Tooltips

Also, you can learn how to style the CursorModifier Tooltips and Axis Labels in the following example:

> Styling CursorModifier Tooltips WPF Chart Example

enter image description here

  • You must to post comments
0
0

How do you implement this with version 3.x and with a SciChartGroup?

David

  • You must to post comments
0
0

Hello Kelly,

My apologies! I mistook you for another customer (who has source code licenses hence can access the source).

Here, I have created a customized CursorModifier for you which has the styles & templates inline. Many of these styles can be moved to UserControl.Resources, or a resource dictionary. The CursorModifier has these styles applied in the themes but everything may be overridden.

Hope this helps!
Andrew

<!-- See properties on CursorModifier to define its behaviour -->
<sciChart:CursorModifier x:Name="crosshairsModifier" 
                         ShowTooltip="True" ShowAxisLabels="True" IsEnabled="True"
                         ShowTooltipOn="Always">
    
    <sciChart:CursorModifier.Resources>

        <!-- Brushes used for cursor labels -->
        <SolidColorBrush x:Key="LabelBackgroundBrush" Color="#BBD0D0D0" />
        <SolidColorBrush x:Key="LabelBorderBrush" Color="#77333333" />
        <SolidColorBrush x:Key="LabelForegroundBrush" Color="#555" />
        <SolidColorBrush x:Key="CursorLineBrush" Color="#77333333" />
        
        <!--  Common label (TextBlock) style used in cursors  -->
        <Style x:Key="HintDataItemsStyle" TargetType="TextBlock">
            <Setter Property="Foreground" Value="{StaticResource LabelForegroundBrush}" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="FontFamily" Value="Arial" />
            <Setter Property="FontSize" Value="13" />
            <Setter Property="Margin" Value="3,2,2,2" />
        </Style>
    </sciChart:CursorModifier.Resources>
    
    <!-- Defines the Cursor Line Style (Crosshairs style -->
    <sciChart:CursorModifier.CrosshairsStyle>
        <!-- Note, any styles that apply to line, e.g. StrokeDashArray, may be used -->
        <Style TargetType="Line">
            <Setter Property="Stroke" Value="{StaticResource CursorLineBrush}" />
            <Setter Property="StrokeThickness" Value="1" />
        </Style>
    </sciChart:CursorModifier.CrosshairsStyle>
    
    <!-- Defines the control template for the cursor tooltip -->
    <!-- There is a default CursorLabelTemplate defined in the themes, but you can override it -->
    <sciChart:CursorModifier.CursorLabelTemplate>
        <ControlTemplate TargetType="sciChart:TemplatableControl">
            <Border Background="{StaticResource LabelBackgroundBrush}" BorderBrush="{StaticResource LabelBorderBrush}" BorderThickness="1" CornerRadius="5">
                <ItemsControl Margin="6" ItemsSource="{Binding SeriesData.SeriesInfo}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <!-- Binds to SeriesInfo type in the SciChart library-->
                            <StackPanel Orientation="Horizontal">
                                <!-- Shows 'SeriesName: ' -->
                                <TextBlock Style="{StaticResource HintDataItemsStyle}" Text="{Binding SeriesName, StringFormat='{}{0}:'}" Visibility="{Binding SeriesName, Converter={StaticResource CollapseIfNullOrEmptyStringConverter}}" />                   
                                <!-- Shows 'SeriesValue '-->
                                <TextBlock Style="{StaticResource HintDataItemsStyle}" Text="{Binding Value, StringFormat=\{0:0.000\}}" />
                            </StackPanel>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Border>
        </ControlTemplate>
    </sciChart:CursorModifier.CursorLabelTemplate>

    <!-- Template for the CursorModifier axes toltips to display AxisInfo collection (result of hit test)  -->
    <!-- There is a default AxisLabelTemplate defined in the Themes, but you can override it -->
    <sciChart:CursorModifier.AxisLabelTemplate>
        <ControlTemplate TargetType="sciChart:TemplatableControl">
            <!-- Binds to AxisInfo in the SciChart library -->
            <!-- Draws a rounded rectangle with axis value -->
            <Border Margin="1"
                    Background="{StaticResource LabelBackgroundBrush}"
                    BorderBrush="{StaticResource LabelBorderBrush}"
                    BorderThickness="1"
                    CornerRadius="2">
                <TextBlock Style="{StaticResource HintDataItemsStyle}" Text="{Binding CursorFormattedDataValue}" />
            </Border>
        </ControlTemplate>
    </sciChart:CursorModifier.AxisLabelTemplate>
</sciChart:CursorModifier>
  • You must to post comments
0
0

Hello there,

Yes, this is possible, as all the modifiers are controls are Xaml Templated. Since you have the source code, if you take a look at the /Themes folder, there are a number of XAML themes.

Open up any one of those (e.g. Chrome.xaml) and you will find a section which looks like this


    <!--  Template for the CursorModifier tooltip to display SeriesInfo collection (result of hit test)  -->
    <ControlTemplate x:Key="CursorLabelTemplate" TargetType="SciChart:TemplatableControl">
        <Border Background="{StaticResource LabelBackgroundBrush}"
                BorderBrush="{StaticResource LabelBorderBrush}"
                BorderThickness="1"
                CornerRadius="5">

            <ItemsControl Margin="6" ItemsSource="{Binding SeriesData.SeriesInfo}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <SciChart:SeriesInfoTemplateSelector 
                               BandSeries1Template="{StaticResource BandSeriesCursorLabelTemplate}"
                               BandSeries2Template="{StaticResource BandSeriesCursorLabelTemplate}"
                                                             Content="{Binding}"
                               DefaultTemplate="{StaticResource XySeriesRolloverLabelTemplate}"
                               OhlcSeriesTemplate="{StaticResource OhlcSeriesRolloverLabelTemplate}" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Border>
    </ControlTemplate>

You don’t need the SeriesInfoTemplateSelector, this is included on our side to provide a different template for OHLC or Xy data. If you are only using XyData, you can substitute and modify the XySeriesRolloverLabelTemplate, also in the Chrome.xaml theme file:


    <DataTemplate x:Key="XySeriesRolloverLabelTemplate">

        <StackPanel Orientation="Horizontal">
            <TextBlock Style="{StaticResource HintDataItemsStyle}"
                       Text="{Binding SeriesName,
                                      StringFormat='{}{0}:'}"
                       Visibility="{Binding SeriesName,
                                            Converter={StaticResource CollapseIfNullOrEmptyStringConverter}}" />
            <TextBlock Style="{StaticResource HintDataItemsStyle}" Text="{Binding Value, StringFormat=\{0:0.000\}}" />
        </StackPanel>

    </DataTemplate>

The binding with TextBlock.Text is where the SeriesInfo.Value is bound to the cursor tooltip label
Text=”{Binding Value, StringFormat={0:0.000}}” />

So to recap, if you create a custom Template and apply to CursorModifier.CursorLabelTemplate you can change how the how control is presented.

Have a look and let me know how you get on.

Thanks!
Andrew

  • kelias
    Thanks for the quick response, but I'm not sure I fully understand. The chart is a simple line chart that I'm using. The DataTemplate you provide above looks like it should do the trick, but I'm not sure how to apply it. If I add it to my resources where do I reference it on the chart to apply the template? Just to clarify I do NOT want to modify any of the original source or files.
  • Yuriy Zadereckiy
    Hi, The CursorModifier has CursorLabelTemplate property, you need to set it. Use the DataTemplate Andrew provided as ItemTemplate for ItemsControl inside of ControlTemplate which Andrew posted above. Please, don't hesitate to ask if you need more assistance with this. Best regards, Yuriy
  • You must to post comments
Showing 4 results
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies