Tooltip not shown in Area Series etc

6 posts, 1 answers
  1. Trump
    Trump avatar
    16 posts
    Member since:
    Nov 2017

    Posted 08 Dec 2017 Link to this post

    I have three questions for my project. The output is attached.

    1. The first one is the tooltip is not shown. I tried both DefaultVisualStyle and PointTemplate. This is the main thing so I post it in ToolTip sub-forum.
    2. I want to line up the legend and Y axis. Which means the left side of colorful squares line up with the Y axis of the chart. I guess may  e ItemsPanel can be changed. 
    3. Because I added margin to the series Margin="30,0". So the entire series shifts to the right. a little. Notice the right side the series is beyond the line scope. Is it possible to extend the line so the series is still within the line.
    <Grid>
           <StackPanel>
               <telerik:RadCartesianChart Palette="Windows8" Height="300">
                   <telerik:RadCartesianChart.Behaviors>
                       <telerik:ChartTooltipBehavior Placement="Top" />
                   </telerik:RadCartesianChart.Behaviors>
                   <telerik:RadCartesianChart.VerticalAxis>
                       <telerik:LinearAxis Margin="0 0 20 0" MajorTickLength="0" LineStroke="Transparent">
                           <telerik:LinearAxis.LabelStyle>
                               <Style TargetType="TextBlock">
                                   <Setter Property="Margin" Value="0 0 10 0" />
                               </Style>
                           </telerik:LinearAxis.LabelStyle>
                       </telerik:LinearAxis>
                   </telerik:RadCartesianChart.VerticalAxis>
                   <telerik:RadCartesianChart.HorizontalAxis>
                       <telerik:CategoricalAxis Margin="0 20 0 0" MajorTickLength="0" LineStroke="Transparent"/>
                   </telerik:RadCartesianChart.HorizontalAxis>
     
                   <telerik:AreaSeries CategoryBinding="Category" ValueBinding="YValue"
                                   ItemsSource="{Binding Items}" Fill="Blue" Margin="30,0">
                       <telerik:AreaSeries.TooltipTemplate>
                           <DataTemplate>
                               <ItemsControl ItemsSource="{Binding Converter={StaticResource MyConverter}}">
                                   <ItemsControl.ItemTemplate>
                                       <DataTemplate>
                                           <TextBlock Text="{Binding}" FontSize="14">
                                           </TextBlock>
                                       </DataTemplate>
                                   </ItemsControl.ItemTemplate>
                               </ItemsControl>
                           </DataTemplate>
                       </telerik:AreaSeries.TooltipTemplate>
                       <telerik:AreaSeries.DefaultVisualStyle>
                           <Style TargetType="Path">
                               <Setter Property="Fill" Value="Transparent"/>
                           </Style>
                       </telerik:AreaSeries.DefaultVisualStyle>
                   </telerik:AreaSeries>
     
                   <telerik:RadCartesianChart.Grid>
                       <telerik:CartesianChartGrid MajorLinesVisibility="XY" />
                   </telerik:RadCartesianChart.Grid>
               </telerik:RadCartesianChart>
               <telerik:RadLegend>
                   <telerik:RadLegend.ItemsPanel>
                       <ItemsPanelTemplate>
                           <telerik:RadWrapPanel Orientation="Vertical" ItemWidth="120" />
                       </ItemsPanelTemplate>
                   </telerik:RadLegend.ItemsPanel>
                   <telerik:RadLegend.Items>
                       <telerik:LegendItemCollection>
                           <telerik:LegendItem MarkerFill="#FF55AA33" MarkerStroke="Black" Title="Legend item 1" />
                           <telerik:LegendItem MarkerFill="#FFCC3399" MarkerStroke="Black" Title="Legend item 2" />
                           <telerik:LegendItem MarkerFill="#FF5511BB" MarkerStroke="Black" Title="Legend item 3" />
                           <telerik:LegendItem MarkerFill="#FF55AA33" MarkerStroke="Black" Title="Legend item 4" />
                           <telerik:LegendItem MarkerFill="#FFCC3399" MarkerStroke="Black" Title="Legend item 5" />
                           <telerik:LegendItem MarkerFill="#FF5511BB" MarkerStroke="Black" Title="Legend item 6" />
                           <telerik:LegendItem MarkerFill="#FF55AA33" MarkerStroke="Black" Title="Legend item 7" />
                           <telerik:LegendItem MarkerFill="#FFCC3399" MarkerStroke="Black" Title="Legend item 8" />
                           <telerik:LegendItem MarkerFill="#FF5511BB" MarkerStroke="Black" Title="Legend item 9" />
                       </telerik:LegendItemCollection>
                   </telerik:RadLegend.Items>
               </telerik:RadLegend>
           </StackPanel>
       </Grid>

    The converter is simple, it is just returning a string.

    public class MyConverter : IValueConverter
        {
            public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
            {
                return "Test";
            }
     
            public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
            {
                throw new NotImplementedException();
            }
        }

    Thanks.

  2. Trump
    Trump avatar
    16 posts
    Member since:
    Nov 2017

    Posted 10 Dec 2017 Link to this post

    I can't attach the project as attachment so I made a project on wpf-chart.zip for demo.
  3. Answer
    Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    654 posts

    Posted 13 Dec 2017 Link to this post

    Hello,

    Thank you very much for the provided project and detailed description.

    As stated in the Tooltip article, you should specify the desired shape, color and size for the area series' points through the DefaultVisualStyle or PointTemplate properties for their tooltips to appear. With the current setup, however, these points will be shifted by 30 pixels by the Margin that is set for the series.

    Could you please clarify why this margin is needed? Removing it will resolve issues 1 and 3. Alternatively, you can test the PlotMode property of the CategoricalAxis.

    As for aligning the RadLegend and the chart's Y axis, you can do this in the RadCartesianChart's Loaded event like so:

    private void Chart_Loaded(object sender, RoutedEventArgs e)
    {
        Dispatcher.BeginInvoke(new Action(() => { this.legend.Margin = new Thickness(this.chart.PlotAreaClip.X, 0, 0, 0); }));
    }

    For your convenience, I'm attaching a new version of your project incorporating all 3 modifications. Please have a look at it and let me know if it provides the desired result. If that is not the case, please share more details on your exact requirements so that I can better assist you.

    I look forward to your reply.

    Regards,
    Dilyan Traykov
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  4. Trump
    Trump avatar
    16 posts
    Member since:
    Nov 2017

    Posted 13 Dec 2017 in reply to Dilyan Traykov Link to this post

    The reason I added the margin to the series is that I want to customize the series like this one and that one. So the series can shift to the right a little bit.

    If I use PlotMode, I don't know the default margin of it. Whether it fits my requirement? Also it seems that PlotMode only works for BarSeries. I need to do it in LineSeries and others.

  5. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    654 posts

    Posted 14 Dec 2017 Link to this post

    Hello,

    I'm currently unable to open the images you provided. Could you please try to attach them to your reply or provide new links for them?

    I also noticed that you've marked my previous reply as the answer. Did you manage to achieve the result you're looking for?

    Regards,
    Dilyan Traykov
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  6. Trump
    Trump avatar
    16 posts
    Member since:
    Nov 2017

    Posted 14 Dec 2017 in reply to Dilyan Traykov Link to this post

    Never mind. I removed the margin and I think that I figure it out.
Back to Top