SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

0 votes
1k views

Hello SciChart Team,
I have multiple charts in my application where all the charts are in the same MdofierGroup to show the RolloverModifier tooltip at the same time. As I want to show custom tooltip text, I have created a custom TooltipTemplate and TooltipContainerStyle. But now when the tooltip is shown on the left side the tooltip text is a long way from the marker. I want to align the tooltip text based on the tooltip position. When the tooltip is on the right side the text will be aligned left and when the tooltip is on left side the text will be aligned right.

I have attached some code snippets of my implementations, can you suggest me any way to achieve this?

<Style x:Key="_tooltipContainer" TargetType="scichart:TooltipControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="scichart:TooltipControl">
                    <ContentPresenter Content="{TemplateBinding DataContext}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <DataTemplate x:Key="_tooltipTemplate" DataType="scichart:XySeriesInfo">
        <StackPanel Orientation="Vertical">
            <TextBlock FontSize="12" FontFamily="Rubik" Foreground="White">
                <TextBlock.Text>
                    .
                    .
                    .
                </TextBlock.Text>
            </TextBlock>
        </StackPanel>
    </DataTemplate>

    <!-- Style applied via x:Key name in ViewModel -->
    <Style TargetType="scichart:BaseRenderableSeries"  x:Key="_lineSeriesStyle">
        <Setter Property="RolloverMarkerTemplate">
            <Setter.Value>
                <ControlTemplate>
                    <Ellipse Width="7" Height="7" Stroke="White" StrokeThickness="1" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>

        <Setter Property="scichart:RolloverModifier.TooltipContainerStyle" Value="{StaticResource _tooltipContainer}"/>
        <Setter Property="scichart:RolloverModifier.TooltipTemplate" Value="{StaticResource _tooltipTemplate}"/>
        <Setter Property="scichart:RolloverModifier.IncludeSeries" Value="True"/>
        <Setter Property="StrokeThickness" Value="2"/>
    </Style>


 <scichart:SciChartSurface RenderableSeries="{scichart:SeriesBinding ItsRenderableTimeGraphSeries}">


                                    <scichart:SciChartSurface.ChartModifier>
                                        <scichart:ModifierGroup DataContext="{Binding Path=DataContext, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}" 
                                                            scichart:MouseManager.MouseEventGroup="MouseEventGroup" >
                                            <scichart:RolloverModifier ShowTooltipOn="MouseHover" DrawVerticalLine="False" />
                                        </scichart:ModifierGroup>
                                    </scichart:SciChartSurface.ChartModifier>
.
.
.
</scichart:SciChartSurface>

In ViewModel:

ItsRenderableTimeGraphSeries = new ObservableCollection<IRenderableSeriesViewModel>
        {
            new MountainRenderableSeriesViewModel()
            {
                IsDigitalLine = false,
                StyleKey = "_lineSeriesStyle",
            }
        };
0 votes
2k views

Getting an exception when trying to add tooltip template MVVM style to a blox plot. The chart also contains a scatter plot which should not be styled. That works fine, hoverwer, when I move the mouse over a box in the box plot, the exception is thrown.

I want to keep the styling, I just want to write something different than the default text.

The template:

  <DataTemplate DataType="scalarPlot:ToolTipData" x:Key="BoxSeriesTooltipTemplate">
    <TextBlock>
      <Run Text="Max:      " />
      <Run Text="{Binding Maximum}" />
      <LineBreak />
      <Run Text="P90:       " />
      <Run Text="{Binding P90}" />
      <LineBreak />
      <Run Text="Median: " />
      <Run Text="{Binding Median}" />
      <LineBreak />
      <Run Text="P10:       " />
      <Run Text="{Binding P10}" />
      <LineBreak />
      <Run Text="Min:       " />
      <Run Text="{Binding Minimum}" />
      <LineBreak />
    </TextBlock>
  </DataTemplate>

The binding:

      <Style TargetType="s:BaseRenderableSeries" x:Key="BoxSeriesStyle">
        <Setter Property="s:TooltipModifier.TooltipTemplate" Value="{StaticResource BoxSeriesTooltipTemplate}"/>
        <Setter Property="s:TooltipModifier.IncludeSeries" Value="True"/>
      </Style>

The modifier:

<s:SciChartSurface.ChartModifier>
      <s:ModifierGroup>
        <s:TooltipModifier IsEnabled="True" ShowTooltipOn="Always" ReceiveHandledEvents="True" TooltipLabelDataContextSelector="{Binding ToolTipDataContext}"/>
      </s:ModifierGroup>
    </s:SciChartSurface.ChartModifier>

The view model:

    private static IRenderableSeriesViewModel CreateBoxPlotViewModel(BoxPlotDataSeries<int, float> boxPlotDataSeries)
    {
        return new BoxPlotRenderableSeriesViewModel
        {
            DataSeries = boxPlotDataSeries,
            Stroke = Colors.SteelBlue,
            Fill = new LinearGradientBrush(Colors.White, Colors.LightSteelBlue, new System.Windows.Point(0, 0), new System.Windows.Point(0.5, 1)),
            StyleKey = "BoxSeriesStyle"
        };
    }

The data context selector:

    public Func<SeriesInfo, object> ToolTipDataContext
    {
        get
        {
            return seriesInfo =>
                   {
                       return seriesInfo switch
                       {
                           BoxPlotSeriesInfo boxInfo =>
                               new ToolTipData
                               {
                                   Fill = seriesInfo.Fill,
                                   Stroke = seriesInfo.Stroke,
                                   Maximum = (float) boxInfo.MaximumValue,
                                   P90 = (float) boxInfo.UpperQuartileValue,
                                   Median = (float) boxInfo.MedianValue,
                                   P10 = (float) boxInfo.LowerQuartileValue,
                                   Minimum = (float) boxInfo.MinimumValue
                               },
                           _ => seriesInfo
                       };
                   };
        }
    }
  • Tore Munch asked 2 years ago
  • last active 2 years ago
Showing 2 results
This template supports the sidebar's widgets. Add one or use Full Width layout.