Stackedbar and PaletteBrushes

5 posts, 1 answers
  1. Mike
    Mike avatar
    75 posts
    Member since:
    Nov 2011

    Posted 24 Jan 2013 Link to this post

    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
  2. Mike
    Mike avatar
    75 posts
    Member since:
    Nov 2011

    Posted 24 Jan 2013 Link to this post

    See the picture in attachement to know what I need.

    Thanks.
  3. DevCraft banner
  4. Mike
    Mike avatar
    75 posts
    Member since:
    Nov 2011

    Posted 27 Jan 2013 Link to this post

    Hello, 

    is there someone to help me please?
  5. Answer
    Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 29 Jan 2013 Link to this post

    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.

  6. Mike
    Mike avatar
    75 posts
    Member since:
    Nov 2011

    Posted 29 Jan 2013 Link to this post

    Perfect, it works well ;)

    Thanks
Back to Top
DevCraft banner