[Solved] Colour Palettes on StackedBarSeries using DataPointLabel legenddisplaymode

[Martyn]

Hi,

I'm having issues with getting correct bar colouring when using LegendDisplayMode="DataPointLabel" in a stacked bar chart. The Chart I have consists of two stacked bar series and a line series. Each bar in the series represents something different so i'm using DataPointLabel to give them different colours - This is fine problems occur with the second stacked bar - I'd like the second bar to have a different palette (in this case similar to the first palette but lighter) and the line series to have a single colour.

I've got my code so far below, the problem is that the two stacked bars use the same palette so it looks like a single bar and I have little control over the colour of the line series. What I'd like to do is set individual palettes for each series - is this possible?

code is as follows;

<telerik:RadChart x:Name="ModelYearPCPVChart" ItemsSource="{Binding ChartData}" PaletteBrushes="{StaticResource ModelYearStackedPalette}">
                <telerik:RadChart.DefaultView>
                    <telerik:ChartDefaultView>
                        <telerik:ChartDefaultView.ChartTitle>
                            <telerik:ChartTitle x:Name="ModelYearPCPVChartTitle"
                                                Content="{Binding Source={StaticResource Strings}, Path=ModelYearPCPVChartTitle}" />
                        </telerik:ChartDefaultView.ChartTitle>

                        <telerik:ChartDefaultView.ChartLegend>
                            <telerik:ChartLegend x:Name="ModelYearPCPVChartLegend" HorizontalContentAlignment="Center"
                                                 HorizontalAlignment="Center" Visibility="Collapsed" />
                        </telerik:ChartDefaultView.ChartLegend>

                        <telerik:ChartDefaultView.ChartArea>
                            <telerik:ChartArea SmartLabelsEnabled="True" LegendName="ModelYearPCPVChartLegend">
                                <!--<i:Interaction.Triggers>
                                    <i:EventTrigger EventName="ItemClick">
                                        <i:InvokeCommandAction Command="{Binding ChartItemClickedCommand}"
                                             CommandParameter="{Binding ElementName=ModelYearPCPVChart, Path=DefaultView.ChartArea.SelectedItems[0].DataItem}" />
                                    </i:EventTrigger>
                                </i:Interaction.Triggers>-->
                                <telerik:ChartArea.AxisY>
                                    <telerik:AxisY MinorTickPointMultiplier="5" ExtendDirection="None"
                                                   MinorTicksVisibility="Visible" DefaultLabelFormat="{StaticResource PCPVLabelFormat}"
                                                   Title="{Binding Source={StaticResource Strings}, Path=PCPVAxisLabel}" />
                                </telerik:ChartArea.AxisY>

                                <telerik:ChartArea.AxisX>
                                    <telerik:AxisX DefaultLabelFormat="{StaticResource ModelYearLabelFormat}"
                                                   Title="{Binding Source={StaticResource Strings}, Path=ModelYears}" />
                                </telerik:ChartArea.AxisX>

                                <telerik:ChartArea.AdditionalYAxes>
                                    <telerik:AxisY AxisName="SalesAxis"
                                                   Title="{Binding Source={StaticResource Strings}, Path=VINsSoldAxisLabel}"/>
                                </telerik:ChartArea.AdditionalYAxes>
                            </telerik:ChartArea>
                        </telerik:ChartDefaultView.ChartArea>
                    </telerik:ChartDefaultView>
                </telerik:RadChart.DefaultView>

                <telerik:RadChart.SeriesMappings>
                    <telerik:SeriesMapping>
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:StackedBarSeriesDefinition StackGroupName="PCPV" ShowItemToolTips="True"
                                                  ItemToolTipFormat="{StaticResource ModelYearPCPVPCPVTooltip}"
                                                  ItemLabelFormat="{StaticResource PCPVLabelFormat}" LegendDisplayMode="DataPointLabel" >
                                <telerik:StackedBarSeriesDefinition.InteractivitySettings>
                                    <telerik:InteractivitySettings SelectionMode="Single" SelectionScope="Item" />
                                </telerik:StackedBarSeriesDefinition.InteractivitySettings>
                            </telerik:StackedBarSeriesDefinition>
                        </telerik:SeriesMapping.SeriesDefinition>
                        <telerik:SeriesMapping.ItemMappings>
                            <telerik:ItemMapping FieldName="CCPV" DataPointMember="YValue" />
                            <telerik:ItemMapping FieldName="ModelYear" DataPointMember="XCategory" />
                        </telerik:SeriesMapping.ItemMappings>

                    </telerik:SeriesMapping>

                    <telerik:SeriesMapping>
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:StackedBarSeriesDefinition StackGroupName="PCPV" ShowItemToolTips="True"
                                                  ItemToolTipFormat="{StaticResource ModelYearPCPVCCPVTooltip}"
                                                  ItemLabelFormat="{StaticResource CCPVLabelFormat}" LegendDisplayMode="DataPointLabel">
                                <telerik:StackedBarSeriesDefinition.InteractivitySettings>
                                    <telerik:InteractivitySettings SelectionMode="Single" SelectionScope="Item" />
                                </telerik:StackedBarSeriesDefinition.InteractivitySettings>

                            </telerik:StackedBarSeriesDefinition>
                        </telerik:SeriesMapping.SeriesDefinition>

                        <telerik:SeriesMapping.ItemMappings>
                            <telerik:ItemMapping FieldName="RemainingPCPV" DataPointMember="YValue" />
                            <telerik:ItemMapping FieldName="ModelYear" DataPointMember="XCategory" />
                        </telerik:SeriesMapping.ItemMappings>
                    </telerik:SeriesMapping>

                    <telerik:SeriesMapping>
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:LineSeriesDefinition AxisName="SalesAxis" ShowItemToolTips="True"
                                            ItemToolTipFormat="{StaticResource ModelYearPCPVNumberOfVINsTooltip}">
                                <telerik:LineSeriesDefinition.InteractivitySettings>
                                    <telerik:InteractivitySettings SelectionMode="Single" SelectionScope="Item" />
                                </telerik:LineSeriesDefinition.InteractivitySettings>
                            </telerik:LineSeriesDefinition>
                        </telerik:SeriesMapping.SeriesDefinition>

                        <telerik:SeriesMapping.ItemMappings>
                            <telerik:ItemMapping FieldName="NumberOfVINs" DataPointMember="YValue" />
                            <telerik:ItemMapping FieldName="ModelYear" DataPointMember="XCategory" />
                        </telerik:SeriesMapping.ItemMappings>
                    </telerik:SeriesMapping>
                </telerik:RadChart.SeriesMappings>

                <telerik:RadChart.SortDescriptors>
                    <telerik:ChartSortDescriptor Member="ModelYear" SortDirection="Descending" />
                </telerik:RadChart.SortDescriptors>

                <telerik:RadContextMenu.ContextMenu>
                    <usercontrols:ExportContextMenu/>
                </telerik:RadContextMenu.ContextMenu>

            </telerik:RadChart>

 
With the palette set as a BrushCollection of 10 SolidColorBrush's - Hopefully this is enough info to show you what I'm looking to do, if not I can provide screenshots, etc

Thanks

[Sia]

Hello Martyn,

The easiest solution which comes to my mind is to set the following  custom style in your application:

<Style x:Key="MyStyle" TargetType="telerik:StackedBar">
    <Setter Property="Opacity" Value="0.8" />
</Style>

If you use a theme different than the default "Office Black", you need to base this style on your theme:

<Style x:Key="MyStyle" TargetType="telerik:StackedBar" telerik:StyleManager.BasedOn="Metro">
    <Setter Property="Opacity" Value="0.8" />
</Style>

and apply it to the second stacked bar series:

<telerik:StackedBarSeriesDefinition StackGroupName="PCPV"
                         ItemStyle="{StaticResource MyStyle}">
...
</telerik:StackedBarSeriesDefinition>

In my opinion it is better to remove the default masks, so please let me know which theme you use and I will send you the needed style for that.

All the best,
Sia
the Telerik team

[Martyn]

Hey,

I've tried this out and it does make the top bar lighter, however it also means the chart background now shows through bar which looks a little strange. We're using Office Black as the theme, does this help?

Thanks

:)

[Sia]

Hello Martyn,

Please excuse me for the late reply.
You are absolutely right that such behavior is not expected. What I can suggest is to remove the default mask from your bar series and make the second series looks lighter.

The style which removes the default masks and which you need to set to the first stacked bar series is:

<Style x:Key="MyStyle" TargetType="telerik:StackedBar">
    <Setter Property="Template" >
        <Setter.Value>
            <ControlTemplate TargetType="telerik:StackedBar">
                <Canvas Opacity="0"
                        x:Name="PART_MainContainer">
                    <Rectangle x:Name="PART_DefiningGeometry"
                               Height="{TemplateBinding ItemActualHeight}"
                               Width="{TemplateBinding ItemActualWidth}"
                               Style="{TemplateBinding ItemStyle}"/>
                    <Canvas.RenderTransform>
                        <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />
                    </Canvas.RenderTransform>
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

and the style which will make the bars lighter for your second bar series is:

<Style x:Key="MyStyle1" TargetType="telerik:StackedBar">
    <Setter Property="Template" >
        <Setter.Value>
            <ControlTemplate TargetType="telerik:StackedBar">
                <Canvas Opacity="0"
                        x:Name="PART_MainContainer"
                        Background="White">
                    <Rectangle x:Name="PART_DefiningGeometry"
                                Height="{TemplateBinding ItemActualHeight}"
                                Width="{TemplateBinding ItemActualWidth}"
                                Style="{TemplateBinding ItemStyle}"
                                Opacity="0.5"/>
                    <Canvas.RenderTransform>
                        <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />
                    </Canvas.RenderTransform>
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I hope this helps.

Kind regards,
Sia
the Telerik team

[Martyn]

Hey,

We've been so impressed with the look of the stacked charts since making this change that we've decided to adopt this controltemplate to all of our charts, giving the bars a nice solid colour. There is a problem, however. The interactivity when a user hovers over a bar (which highlights the current series and makes the others transparent) no longer works.

Would it be possible to provide a modified template to return this previous functionality?

Also, the legend labels of all charts still show a gradiented key colour, is there a fix for this?

Thanks for your help

:)

[Sia]

Hello Martyn,

Please excuse me for omitting the details about your scenario.
I sent this template for simplicity. But you are right that if you use interactivity, you need a different template which has the needed storyboards in it.  Please find the two styles in the attached document. Please have in mind that applying them like this will make the selected state of the series with opacity lighter. If this is not appropriate, just let me know and I will modify them for you.

What I can suggest if you need simple bars is to use our Expression Dark theme or the Metro theme. The Summer theme also can be modified to use solid colors by setting the PaletteBrushesUseSolidColors property to be true.

Greetings,
Sia
the Telerik team