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

[Solved] Stackedbar and PaletteBrushes

4 Answers 69 Views

Chart

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

This question is locked. New answers and comments are not allowed.

Mike asked on 24 Jan 2013, 09:55 AM

Hello,

I want to use a custom paletteBrushes by Series. Is it possible to do that? and how?

I tried using the following code, but it doesn't work. The palette is ignored.

<telerik:RadChart ItemsSource="{Binding ChartItemsSource}" Background="{x:Null}" BorderBrush="{x:Null}">

<telerik:RadChart.AxisElementBrush>

<SolidColorBrush Color="White" Opacity="0.5"/>

</telerik:RadChart.AxisElementBrush>

<telerik:RadChart.AxisForeground>

<SolidColorBrush Color="White" Opacity="0.5"/>

</telerik:RadChart.AxisForeground>

<telerik:RadChart.DefaultView>

<telerik:ChartDefaultView>

<telerik:ChartDefaultView.ChartLegend>

<telerik:ChartLegend Visibility="Collapsed"/>

</telerik:ChartDefaultView.ChartLegend>

<telerik:ChartDefaultView.ChartArea>

<telerik:ChartArea Background="Transparent">

<telerik:ChartArea.Annotations>

<telerik:MarkedZone Background="Transparent"/>

</telerik:ChartArea.Annotations>

<telerik:ChartArea.AxisX>

<telerik:AxisX LabelRotationAngle="-25"/>

</telerik:ChartArea.AxisX>

<telerik:ChartArea.AxisY>

<telerik:AxisY StripLinesVisibility="Collapsed"/>

</telerik:ChartArea.AxisY>

</telerik:ChartArea>

</telerik:ChartDefaultView.ChartArea>

</telerik:ChartDefaultView>

</telerik:RadChart.DefaultView>

<telerik:RadChart.SeriesMappings>

<telerik:SeriesMappingCollection>

<telerik:SeriesMapping>

<telerik:SeriesMapping.ChartArea>

<telerik:ChartArea>

<telerik:ChartArea.PaletteBrushes>

<SolidColorBrush Color="#A057FF" />

<SolidColorBrush Color="#C90606" />

<SolidColorBrush Color="#EE9A00" />

<SolidColorBrush Color="Yellow" />

<SolidColorBrush Color="#67C500" />

<SolidColorBrush Color="#00BBFF" />

</telerik:ChartArea.PaletteBrushes>

</telerik:ChartArea>

</telerik:SeriesMapping.ChartArea>

<telerik:SeriesMapping.SeriesDefinition>

<telerik:StackedBarSeriesDefinition LegendDisplayMode="DataPointLabel" />

</telerik:SeriesMapping.SeriesDefinition>

<telerik:ItemMapping FieldName="YValue" DataPointMember="YValue"/>

<telerik:ItemMapping FieldName="XCategory" DataPointMember="XCategory"/>

</telerik:SeriesMapping>

<telerik:SeriesMapping>

<telerik:SeriesMapping.ChartArea>

<telerik:ChartArea>

<telerik:ChartArea.PaletteBrushes>

<SolidColorBrush Color="#88FF57" />

<SolidColorBrush Color="#C90606" />

<SolidColorBrush Color="#EE9A00" />

<SolidColorBrush Color="Yellow" />

<SolidColorBrush Color="#67C500" />

<SolidColorBrush Color="#00BBFF" />

</telerik:ChartArea.PaletteBrushes>

</telerik:ChartArea>

</telerik:SeriesMapping.ChartArea>

<telerik:SeriesMapping.SeriesDefinition>

<telerik:StackedBarSeriesDefinition LegendDisplayMode="DataPointLabel" />

</telerik:SeriesMapping.SeriesDefinition>

<telerik:ItemMapping FieldName="XValue" DataPointMember="YValue"/>

<telerik:ItemMapping FieldName="XCategory" DataPointMember="XCategory"/>

</telerik:SeriesMapping>

</telerik:SeriesMappingCollection>

</telerik:RadChart.SeriesMappings>

</telerik:RadChart>

Thanks for help

4 Answers, 1 is accepted

Accepted

answered on 29 Jan 2013, 09:31 AM

StackedBars-result.PNG

Hi Radouan,

Thanks for contacting us.

When using the default palette of the Chart the bars in a stack looks like a single bar. The easist solution to overcome this is to use the following custom style in your application:

<Style x:Key="MyStyle" TargetType="telerik:StackedBar">

<Setter Property="Opacity" Value="0.8" />

</Style>

You might apply it to the second chart series like this:

<telerik:SeriesMapping.SeriesDefinition>

<telerik:StackedBarSeriesDefinition ItemStyle="{StaticResource MyStyle}" LegendDisplayMode="DataPointLabel" />

</telerik:SeriesMapping.SeriesDefinition>

The attachment demonstrates how this will affect your series.

You can use the same technique with your own custom palette set to the chart.

Kind regards,
Evgenia
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.