I am using the sample from Telerik Demo to create pie chart, and register to .LayoutUpdate event, at which doing following:
private void pieChart_LayoutUpdated(object sender, System.EventArgs e)
{
var paths = ChildrenOfTypeExtensions.ChildrenOfType<Path>(PieChart.Series[0]).ToList();
if (paths.Count == 0)
return;
PieChart.LayoutUpdated -= pieChart_LayoutUpdated;
foreach (var path in paths)
{
var dataPoint = path.Tag as PieDataPoint;
if (dataPoint == null)
return;
path.MouseEnter += uiElement_MouseEnter;
path.MouseLeave += uiElement_MouseLeave;
}
}
private void uiElement_MouseEnter(object sender, MouseEventArgs e)
{
var bar = (UIElement) sender;
bar.Opacity = 0.5;
}
private void uiElement_MouseLeave(object sender, MouseEventArgs e)
{
var bar = (UIElement)sender;
bar.Opacity = 1;
}
But I wanted more than just highlighting on pie "path", I want the associated label to be highlighted too.
Which at the moment, I am doing something like this:
<Style x:Key="SlicerNameTextBoxStyle" TargetType="TextBlock">
<Setter Property="Foreground" Value="{Binding DataItem, Converter={StaticResource SlicerToBrushConverter}}"></Setter>
<Setter Property="FontWeight" Value="{Binding DataItem, Converter={StaticResource SlicerToNameConverter}}"></Setter>
<Setter Property="FontFamily" Value="Segoe UI" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource MouseOverBrush}"></Setter>
</Trigger>
</Style.Triggers>
</Style>
<telerik:PieSeries.LabelDefinitions>
<telerik:ChartSeriesLabelDefinition Margin="-4,0,0,0"
DefaultVisualStyle="{StaticResource SlicerNameTextBoxStyle}">
<telerik:ChartSeriesLabelDefinition.Template>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding DataItem.DisplayName}"
HorizontalAlignment="Center"
Style="{StaticResource SlicerNameTextBoxStyle}"
MouseDown="SlicerPieLabel_OnMouseDown"/>
</StackPanel>
</DataTemplate>
</telerik:ChartSeriesLabelDefinition.Template>
</telerik:ChartSeriesLabelDefinition>
</telerik:PieSeries.LabelDefinitions>
As you can see, the problem is that I can't connect the pie slice and label highlight together, and I duplicated the pie selection changed event.
Can you help me to provide a better solution here?
Thanks,
Mingxue
7 Answers, 1 is accepted
If you need hover interactivity, I suggest you do not use this custom approach you have at the moment. You can use the HoverMode property of the chart and legend. I am attaching a small project to demonstrate it.
Let us know if you need more information.
Regards,
Petar Marchev
Telerik
Rank 1
1. How to allow user to select from the legend control then?
2. The legend control only display color and percentage, but not the label of my pie. For example, the palette has 8 colors, but I have 10 items in my pie chart, and same color would be reused for different slices. Even though the fade out works, but it would be better to see what item I can choose directly from Legend control by looking at the name instead of matching the color and fading out.
Thanks.
1. How to allow user to select from the legend control then?
The RadLegend does not currently support selection, so you need to implement this yourself. You can handle the MouseDown event of the RadLegend or LegendItemControl and get the DataContext of the clicked item. You should be able to get the corresponding DataPoint from the LegendItem and change its IsSelected property.
2. The legend control only display color and percentage, but not the label of my pie.
You can find information in out online documentation about how you can control the content of the item labels. You can also see this in many of our qsf examples and sdk demos.
3. For example, the palette has 8 colors, but I have 10 items in my pie chart, and same color would be reused for different slices.
You can consider creating a custom palette.
4. Even though the fade out works, but it would be better to see what item I can choose directly from Legend control by looking at the name instead of matching the color and fading out.
I am not sure what you need here. In general, we suggest not to have a legend when using a pie chart, because you can place all the needed information inside the pie slice label.
Regards,
Petar Marchev
Telerik
Rank 1
Hi, is there a way to implement this hover mode when I select the datapoint instead of "hover" on it?
Thanks
I don't think that I understand what you need here. Hover interactivity and selection indication are two different things. One changes the appearance of the item when the mouse enters the item, and the other modifies its appearance when the item is selected, and sometimes selection is done via mouse. Hover interactivity usually modifies the opacity of the element, or the other elements in order to bring focus to the hovered item, where selection usually changes the color of the datapoint visual. We have this built-in. You can set a SelectionPalette for the chart and selected items will automatically get the color from this palette.
Regards,
Petar Marchev
Telerik
Rank 1
Hi,
I know I can change colors on selection based on a Palette. What I need is when I select a slice, every slice on the chart set his opacity down except for the one selected. That's the same behaviour of the hover and since it's a built in resource I thought there was a way to use the same behaviour but when I select the the slice, not when I hover on it.
Thanks
Unfortunately, there is no built-in mechanism to achieve such a behavior. You will need to implement it yourself.
Regards,
Petar Marchev
Telerik