SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
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?
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:
Also, you can learn how to style the CursorModifier Tooltips and Axis Labels in the following example:
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
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>
How do you implement this with version 3.x and with a SciChartGroup?
David
Please login first to submit.