How to set different color for each RadCartesianChart in Xamarin Forms

[Ganesh]

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,

[Lance | Manager Technical Support]

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

[Ganesh]

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,

[Lance | Manager Technical Support]

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