How to set different color for each RadCartesianChart in Xamarin Forms

4 posts, 0 answers
  1. Ganesh
    Ganesh avatar
    11 posts
    Member since:
    Jun 2017

    Posted 08 Aug Link to this post

    Hi, I am Implementing the Bar series, I am able to draw the Bars, But I need to apply differnt colors to each bar,

    I have Searched and gone through the documentation, but unable to find it,

    I am implementing by using Xaml and Viewmodel , code is like below

               <telerikChart:RadCartesianChart x:Name="chart" Grid.Column="1" Grid.Row="0" HorizontalOptions="End" HeightRequest="80">
                        <telerikChart:RadCartesianChart.BindingContext>
                            <local:ChartsViewModel />
                        </telerikChart:RadCartesianChart.BindingContext>
                        <telerikChart:RadCartesianChart.HorizontalAxis>
                            <telerikChart:CategoricalAxis ShowLabels="False"/>
                        </telerikChart:RadCartesianChart.HorizontalAxis>
                        <telerikChart:RadCartesianChart.VerticalAxis>
                            <telerikChart:NumericalAxis ShowLabels="False" />
                        </telerikChart:RadCartesianChart.VerticalAxis>
                        <telerikChart:RadCartesianChart.Series>
                            <telerikChart:BarSeries CategoryBinding="Category"
                                ValueBinding="Value" 
                                ItemsSource="{Binding Data}" ShowLabels="False">
                            </telerikChart:BarSeries>
                        </telerikChart:RadCartesianChart.Series>
                    </telerikChart:RadCartesianChart>

    The code in View Model is 

            public ChartsViewModel()
            {
                this.Data = GetCategoricalData();
            }

            public ObservableCollection<CategoricalData> Data { get; set; }

            private static ObservableCollection<CategoricalData> GetCategoricalData()
            {
                var data = new ObservableCollection<CategoricalData>  {
                    new CategoricalData { Category = "A", Value = 10 },
                    new CategoricalData { Category = "B", Value = 8 },
                    new CategoricalData { Category = "C", Value = 15 },
                    new CategoricalData { Category = "D", Value = 9 },
                    new CategoricalData { Category = "E", Value = 6 },
                    new CategoricalData { Category = "F", Value = 5 },
                    new CategoricalData { Category = "G", Value = 2 },
                };

                return data;
            }
            public class CategoricalData
            {
                public object Category { get; set; }

                public double Value { get; set; }
            }
        }

    Now I would like to apply different colors to each Bar, and also need to reduce the width of the Bar.

    Can any one Help me out how to achive this,

  2. Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    419 posts

    Posted 08 Aug Link to this post

    Hi Ganesh,

    To get a different color for each data point (Bar), you need to create a new series for each data point. See my response in this forum thread for more info and an example.

    Regards,
    Lance | Tech Support Engineer, Sr.
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Ganesh
    Ganesh avatar
    11 posts
    Member since:
    Jun 2017

    Posted 09 Aug in reply to Lance | Tech Support Engineer, Sr. Link to this post

    HI Lance,

    Thank you for your reply, If I am adding Individual Barseries the different colors are applying.

    But I would like to apply my own custom color instead of default color.

    I have tried the below one but not working .

                   <telerikChart:BarSeries ItemsSource="{Binding}">
                            <telerikChart:BarSeries.ValueBinding>
            <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
        </telerikChart:BarSeries.ValueBinding>
        <telerikChart:BarSeries.PointTemplate>
            <DataTemplate>
                <Border>
                    <Border.Background>
                        <SolidColorBrush Color="{Binding DataItem.Color}"/>
                    </Border.Background>
                </Border>
            </DataTemplate>
        </telerikChart:BarSeries.PointTemplate>
    </telerikChart:BarSeries>

     

    Thank you,

  4. Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    419 posts

    Posted 09 Aug Link to this post

    Hello Ganesh,

    You need to use the Palettes, we have documentation here that shows you how to accomplish it.

    Regards,
    Lance | Tech Support Engineer, Sr.
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top