Tooltip not shown in Area Series etc

[Trump]

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.

[Trump]

I can't attach the project as attachment so I made a project on wpf-chart.zip for demo.

[Dilyan Traykov]

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

[Trump]

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.

[Dilyan Traykov]

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

[Trump]

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