How to use palette color with point template

5 posts, 1 answers
  1. Brendan
    Brendan avatar
    34 posts
    Member since:
    Oct 2010

    Posted 12 Aug 2012 Link to this post

    I am trying to use a point template for my bar series however I can't figure out how to set the bar to the palette color. The user has the ability to change the palette so I want to be able to bind the color.

    My data template is :
    <DataTemplate x:Key="ChartBarTemplate">
        <Rectangle Stroke="Black" StrokeThickness="1" Stretch="Fill" />
    </DataTemplate>
  2. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 13 Aug 2012 Link to this post

    Hello Brendan,

    You can achieve the desired functionality like this:
    <telerik:RadCartesianChart x:Name="RadChart1" Palette="Lilac">
     
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:CategoricalAxis />
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis />
        </telerik:RadCartesianChart.VerticalAxis>
     
        <telerik:BarSeries>
            <telerik:BarSeries.PointTemplate>
                <DataTemplate>
                    <Rectangle Fill="{Binding ElementName=RadChart1, Path=Palette.GlobalEntries[0].Fill}"
                        Stroke="Black" StrokeThickness="1" Stretch="Fill" />
                </DataTemplate>
            </telerik:BarSeries.PointTemplate>
                     
            <telerik:CategoricalDataPoint Category="C1" Value="10" />
            <telerik:CategoricalDataPoint Category="C2" Value="20" />
            <telerik:CategoricalDataPoint Category="C3" Value="30" />
            <telerik:CategoricalDataPoint Category="C4" Value="40" />
            <telerik:CategoricalDataPoint Category="C5" Value="50" />
        </telerik:BarSeries>
     
    </telerik:RadCartesianChart>

    Hope this helps.


    Greetings,
    Giuseppe
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Brendan
    Brendan avatar
    34 posts
    Member since:
    Oct 2010

    Posted 13 Aug 2012 Link to this post

    Thanks that gets me closer, however my series are very dynamic and the order may change - is there any way to determine the series index easily?
  5. Answer
    Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 14 Aug 2012 Link to this post

    Hello Brendan,

    You can retrieve the series index in a dynamic scenario by implementing IValueConverter like this:

    XAML
    <UserControl x:Class="SilverlightApplication1.MainPage"
        xmlns:local="clr-namespace:SilverlightApplication1"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
     
        <Grid x:Name="LayoutRoot" Background="White">
            <Grid.Resources>
                <local:PaletteConverter x:Key="paletteConverter" />
            </Grid.Resources>
     
            <telerik:RadCartesianChart x:Name="RadChart1" Palette="Lilac">
     
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:CategoricalAxis />
                </telerik:RadCartesianChart.HorizontalAxis>
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis />
                </telerik:RadCartesianChart.VerticalAxis>
     
                <telerik:BarSeries>
                    <telerik:BarSeries.PointTemplate>
                        <DataTemplate>
                            <Rectangle Fill="{Binding Converter={StaticResource paletteConverter}}"
                                       Stroke="Black"
                                       StrokeThickness="1"
                                       Stretch="Fill" />
                        </DataTemplate>
                    </telerik:BarSeries.PointTemplate>
     
                    <telerik:CategoricalDataPoint Category="C1" Value="10" />
                    <telerik:CategoricalDataPoint Category="C2" Value="20" />
                    <telerik:CategoricalDataPoint Category="C3" Value="30" />
                    <telerik:CategoricalDataPoint Category="C4" Value="40" />
                    <telerik:CategoricalDataPoint Category="C5" Value="50" />
                </telerik:BarSeries>
     
                <telerik:BarSeries>
                    <telerik:BarSeries.PointTemplate>
                        <DataTemplate>
                            <Rectangle Fill="{Binding Converter={StaticResource paletteConverter}}"
                                       Stroke="Black"
                                       StrokeThickness="1"
                                       Stretch="Fill" />
                        </DataTemplate>
                    </telerik:BarSeries.PointTemplate>
     
                    <telerik:CategoricalDataPoint Category="C1" Value="10" />
                    <telerik:CategoricalDataPoint Category="C2" Value="10" />
                    <telerik:CategoricalDataPoint Category="C3" Value="10" />
                    <telerik:CategoricalDataPoint Category="C4" Value="20" />
                    <telerik:CategoricalDataPoint Category="C5" Value="30" />
                </telerik:BarSeries>
     
                <telerik:BarSeries>
                    <telerik:BarSeries.PointTemplate>
                        <DataTemplate>
                            <Rectangle Fill="{Binding Converter={StaticResource paletteConverter}}"
                                       Stroke="Black"
                                       StrokeThickness="1"
                                       Stretch="Fill" />
                        </DataTemplate>
                    </telerik:BarSeries.PointTemplate>
     
                    <telerik:CategoricalDataPoint Category="C1" Value="10" />
                    <telerik:CategoricalDataPoint Category="C2" Value="20" />
                    <telerik:CategoricalDataPoint Category="C3" Value="40" />
                    <telerik:CategoricalDataPoint Category="C4" Value="40" />
                    <telerik:CategoricalDataPoint Category="C5" Value="40" />
                </telerik:BarSeries>
     
            </telerik:RadCartesianChart>
             
        </Grid>
    </UserControl>

    C#
    using System;
    using System.Windows.Data;
    using Telerik.Charting;
    using Telerik.Windows.Controls;
    using Telerik.Windows.Controls.ChartView;
     
    namespace SilverlightApplication1
    {
        public class PaletteConverter : IValueConverter
        {
            public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                CategoricalDataPoint point = value as CategoricalDataPoint;
                BarSeries series = point.Presenter as BarSeries;
                RadCartesianChart chart = series.Chart as RadCartesianChart;
     
                int seriesIndex = chart.Series.IndexOf(series);
     
                return chart.Palette.GlobalEntries[seriesIndex].Fill;
            }
     
            public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                throw new NotImplementedException();
            }
        }
    }

    Hope this helps.


    Regards,
    Giuseppe
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Jaime Bula
    Jaime Bula avatar
    41 posts
    Member since:
    Apr 2009

    Posted 03 Dec 2015 Link to this post

    var dt = (DataTemplate)XamlReader.Load(String.Format(
              @"        <DataTemplate  xmlns=""http://schemas.microsoft.com/client/2007"">
                           <Ellipse Fill=""{0}"" Height=""10"" Width=""10""/>
                       </DataTemplate>", "{Binding ElementName=ChartNomina, Path=Palette.GlobalEntries[" + index + "].Fill}"));
               sNomina.PointTemplate = dt;

     

    I found out this was quicker and easier.

Back to Top
DevCraft banner