This is a migrated thread and some comments may be shown as answers.

Tooltip not shown in Area Series etc

5 Answers 212 Views

ToolTip

This is a migrated thread and some comments may be shown as answers.

Trump asked on 09 Dec 2017, 12:58 AM

2.png

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

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.
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.
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.

5 Answers, 1 is accepted

Accepted

answered on 13 Dec 2017, 11:39 AM

WpfApplication1.zip

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.

answered on 14 Dec 2017, 12:04 PM

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