ChartView Legend Colors

4 posts, 0 answers
  1. Marcel
    Marcel avatar
    25 posts
    Member since:
    Jan 2011

    Posted 15 May 2013 Link to this post

    Hello,

    I am using a ChartView RadCartesianChart with a stacked BarSeries and I have a legend defined. My user has asked for custom colors for each of the bars (series). I have managed to set the color of the bars, but the legend retains the original palette colors. How can I set the Legend colors to match the bar colors? Thank you
    <Grid>
        <telerik:RadLegend Grid.Column="1" Margin="0 0 0 0"
            Items="{Binding LegendItems, ElementName=CalendarSummaryLargeChart}" 
            HorizontalAlignment="Right" VerticalAlignment="Top"/>
        <Grid>
            <Grid.ColumnDefinitions>
                <!--the second column is for the legend-->
                <ColumnDefinition Width="9*" MinWidth="0" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <StackPanel Grid.Column="0" Margin="0 0 0 0">
                <telerik:RadCartesianChart 
                x:Name="CalendarSummaryLargeChart" Palette="Arctic" MinWidth="620" MinHeight="500" >
                    <telerik:RadCartesianChart.HorizontalAxis>
                        <telerik:CategoricalAxis>
                        </telerik:CategoricalAxis>
                    </telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:RadCartesianChart.VerticalAxis>
                        <telerik:LinearAxis></telerik:LinearAxis>
                    </telerik:RadCartesianChart.VerticalAxis>
                    <telerik:BarSeries 
                    x:Name="CalendarSummaryGlobalLargeSeries" 
                    ShowLabels="True" 
                    ClipToPlotArea="False"
                    CombineMode="Stack">
                        <telerik:BarSeries.LegendSettings>
                            <telerik:SeriesLegendSettings Title="Global" />
                        </telerik:BarSeries.LegendSettings>
                        <telerik:BarSeries.PointTemplate>
                            <DataTemplate>
                                <Rectangle Fill="#404040" Stretch="Fill" />
                            </DataTemplate>
                        </telerik:BarSeries.PointTemplate>
                    </telerik:BarSeries>
                    <telerik:BarSeries  
                    x:Name="CalendarSummaryResourceLargeSeries"
                    ShowLabels="True" 
                    ClipToPlotArea="False" 
                    CombineMode="Stack">
                        <telerik:BarSeries.PointTemplate>
                            <DataTemplate>
                                <Rectangle Fill="Gold" Stretch="Fill" />
                            </DataTemplate>
                        </telerik:BarSeries.PointTemplate>
                        <telerik:BarSeries.LegendSettings>
                            <telerik:SeriesLegendSettings Title="Resource" />
                        </telerik:BarSeries.LegendSettings>
                    </telerik:BarSeries>
                    <telerik:RadCartesianChart.Behaviors >
                        <telerik:ChartTooltipBehavior 
                            Placement="Top" VerticalOffset="0" HorizontalOffset="-10" />
                    </telerik:RadCartesianChart.Behaviors >
  2. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 20 May 2013 Link to this post

    Hi Marcel,

    Instead of defining different PointTemplates for each chart series, you can define your own ChartPalette. Here is an example: 
    <UserControl.Resources>
        <telerik:ChartPalette x:Key="customPalette">
            <telerik:ChartPalette.GlobalEntries>
                <telerik:PaletteEntry Fill="#404040"/>
                <telerik:PaletteEntry Fill="Gold"/>
                <!--Put palette entries for other series here-->
            </telerik:ChartPalette.GlobalEntries>
        </telerik:ChartPalette>
    </UserControl.Resources>
      
    <Grid>
        <telerik:RadLegend Grid.Column="1" Margin="0 0 0 0"
           Items="{Binding LegendItems, ElementName=CalendarSummaryLargeChart}"
           HorizontalAlignment="Right" VerticalAlignment="Top"/>
        <Grid>
            <Grid.ColumnDefinitions>
                <!--the second column is for the legend-->
                <ColumnDefinition Width="9*" MinWidth="0" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <StackPanel Grid.Column="0" Margin="0 0 0 0">
                <telerik:RadCartesianChart x:Name="CalendarSummaryLargeChart"
                        Palette="{StaticResource customPalette}"
                        MinWidth="620" MinHeight="500">

    I hope this helps.

    All the best,
    Petar Kirov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Praveen
    Praveen avatar
    1 posts
    Member since:
    Dec 2013

    Posted 15 Mar 2014 in reply to Petar Kirov Link to this post

    Hi Petar,
    On top of this,I 've a question.

    I decide my bar series colors using converter and it is showing perfectly.However,the corresponding color is not applied to legend.
    Can you please let me know how can I do this?
    Below is my code.

    <telerik:BarSeries ValueBinding="UmAfterRiskPerc" CategoryBinding="ProductGroup">
    <telerik:BarSeries.LegendSettings>
    <telerik:SeriesLegendSettings Title="Proposal" />
    </telerik:BarSeries.LegendSettings>
    <telerik:BarSeries.PointTemplate>
    <DataTemplate>
    <Rectangle>
    <Rectangle.Fill>
    <MultiBinding Converter="{StaticResource ThresholdConverter}"
    ConverterParameter="{x:Static settings:ThresholdSettingConverterParameter.UMARPERCENT}">
    <Binding Path="DataItem.UmAfterRiskPerc" />
    <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}" Path="DataContext.ThresholdMeasurementManager" />
    </MultiBinding>
    </Rectangle.Fill>
    </Rectangle>
    </DataTemplate>
    </telerik:BarSeries.PointTemplate>
    </telerik:BarSeries>
  5. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 19 Mar 2014 Link to this post

    Hello Macel,

    By default the RadCartesianChart uses the DefaultVisuals. Those are the default elements used by the chart to visually represent its data. When you define a PointTemplate you can put anything in it and the chart doesn't know from where exactly to get the colors for its legend. This is the reason behind the issue.

    However if you want to set only the color of the series you can do it in the DefaultVisualStyle. This way the chart will use its DefaultVisual element for the BarSeries and it will know from where to get the colors for the legend.
    <telerik:BarSeries ValueBinding="Value" CategoryBinding="Category" ItemsSource="{Binding Items}">
        <telerik:BarSeries.LegendSettings>
            <telerik:SeriesLegendSettings Title="Proposal" />
        </telerik:BarSeries.LegendSettings>
        <telerik:BarSeries.DefaultVisualStyle>
            <Style TargetType="Border">
                <Setter Property="Background" Value="Red" />
            </Style>
        </telerik:BarSeries.DefaultVisualStyle>
    </telerik:BarSeries>

    Another approach, as was mentioned earlier, is to use a custom Palette.

    Regards,
    Martin
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
Back to Top