SeriesLegendSettings with tooltip

[Vinc3nt]

Hi,

Is there a way to add tooltip to LegendItem (in code behind) ?
I do not have a problem to display the legend of each serie but I want to know if it's possible to add a tooltip to legend.

Thank you,
Vincent

[Petar Kirov]

Hi Vincent,

You can attach a tooltip to the LegendItem by simply modifying the RadLegend.ItemTemplate. In the following example, I have taken the default LegendItemTemplate and I attached a tooltip. The highlighted code is the new one:

<telerik:RadLegend Items="{Binding LegendItems, ElementName=chart}">
  <telerik:RadLegend.ItemTemplate>
    <DataTemplate>
      <StackPanel Orientation="Horizontal"
              ToolTipService.ToolTip="{Binding Title}">
        <Path Fill="{Binding MarkerFill}"
            Width="12"
            Height="12">
          <Path.Data>
            <Binding Path="ActualMarkerGeometry"
   RelativeSource="{RelativeSource AncestorType=telerik:LegendItemControl}">
              <Binding.Converter>
                <telerik:GeometryCloneConverter />
              </Binding.Converter>
            </Binding>
          </Path.Data>
        </Path>
        <TextBlock Margin="2" Text="{Binding Title}" />
      </StackPanel>
    </DataTemplate>
  </telerik:RadLegend.ItemTemplate>
</telerik:RadLegend>

That way if you hover the legend item with mouse a tooltip will appear displaying the Title of the legend item. The DataContext is of type LegendItem, so you have a reference to the underlying DataPoint via the LegendItem.Presenter property. This means that you can bind the tooltip to any of the exposes properties.

I hope this helps.

Regards,
Petar Kirov
Telerik

[Vinc3nt]

I have a problem with definition of the Path. It works with Spline Series but not with Bar Series. The color of the scare is not the color of my serie. I change the color of the serie using the Background property.

<Path Fill="{Binding MarkerFill}"
             Width="12"
             Height="12">
          <Path.Data>
            <Binding Path="ActualMarkerGeometry"
   RelativeSource="{RelativeSource AncestorType=telerik:LegendItemControl}">
              <Binding.Converter>
                <telerik:GeometryCloneConverter />
              </Binding.Converter>
            </Binding>
          </Path.Data>
        </Path>

var serieDefintionBar = new BarSeries
                    {
                        CategoryBinding =
                            new PropertyNameDataPointBinding
                            ("XValue"),
                        ValueBinding =
                            new PropertyNameDataPointBinding
                            ("YValue"),
                        Background = mySolidColorBrush,
                        PointTemplate = (DataTemplate)Resources["BarSeriesTemplate"],
                        AllowSelect = true,
                        LegendSettings =
                            legendSetting,
                        ItemsSource = results,
                        ZIndex = 5

[Pavel R. Pavlov]

Hi Lamarque,

Thank you for getting back to us. The reason behind the reported issue is the fact that the BarSeries uses Border component to visualize the different bar, rather than a Path component. In order to change the background of the BarSeries you can use its DefaultVisualStyle property.

Furthermore, you can define a Style targeting the native Border component. You can use similar to this code:

<telerik:BarSeries>
    <telerik:BarSeries.DefaultVisualStyle>
        <Style TargetType="Border">
            <Setter Property="Background">
                <Setter.Value>
                    <SolidColorBrush Color="Red" />
                </Setter.Value>
            </Setter>
        </Style>
    </telerik:BarSeries.DefaultVisualStyle>
</telrik:BarSeries>

I hope this will help you out.

Regards,
Pavel R. Pavlov
Telerik