ug.md

layout	title	description	platform	control	documentation
post	Customizing the appearance of Essential Xamarin.Forms Chart	Learn how to customize the appearance of Chart using palettes.	xamarin	Chart	ug

Color Palette

Apply palette for Chart

ColorModel property of SfChart is used to define the colors for each series. ColorModel contains the following color palettes.

Predefined Palettes

Currently, Chart supports only Metro palette and it is the default palette for SfChart. The following screenshot shows the default appearance of multiple series.

Custom Palette

Chart will use the colors from CustomBrushes property if ColorModel.Palette is set to Custom.

Following code illustrates how to set the custom colors.

{% tabs %}

{% highlight xaml %}

<ContentPage.Resources> <chart:ChartColorCollection x:Key="Colors"> Red Gray Blue Maroon Pink </chart:ChartColorCollection> </ContentPage.Resources>

chart:SfChart chart:SfChart.ColorModel <chart:ChartColorModel Palette="Custom" CustomBrushes="{StaticResource Colors}"/> </chart:SfChart.ColorModel>

...

chart:SfChart

{% endhighlight %}

{% highlight c# %}

SfChart chart = new SfChart() { ColorModel = new ChartColorModel() { Palette = ChartColorPalette.Custom, CustomBrushes = new ChartColorCollection() { Color.Red, Color.Gray, Color.Blue, Color.Maroon, Color.Pink, } }, ... };

{% endhighlight %}

{% endtabs %}

None Palette

None palette will not apply any color to the series. So in order to define the color for any series, you can use the Color property or the ColorModel property of ChartSeries (The ColorModel of Series will be explained later in this document).

Apply palette for Series

ColorModel property of ChartSeries is used to define the colors for each data point. Following palettes are used to define the colors.

Predefined Palettes

Currently, Chart supports only Metro palette.

{% tabs %}

{% highlight xaml %}

chart:SfChart ...

<chart:ColumnSeries ItemsSource ="{Binding Data}" XBindingPath="Country" YBindingPath="Value">

	<chart:ColumnSeries.ColorModel>

		<chart:ChartColorModel Palette="Metro"/>

	</chart:ColumnSeries.ColorModel>

</chart:ColumnSeries>

</chart:SfChart>

{% endhighlight %}

{% highlight c# %}

SfChart chart = new SfChart(); ...

ColumnSeries columnSeries = new ColumnSeries() {

ItemsSource = Data, 
XBindingPath = "Country", 
YBindingPath = "Value" 

};

columnSeries.ColorModel.Palette = ChartColorPalette.Metro;

chart.Series.Add(columnSeries);

{% endhighlight %}

{% endtabs %}

Custom Palette

Series will use the colors from CustomBrushes property if the ColorModel.Palette property of series is set to Custom.

Following code illustrates how to set the custom colors.

{% tabs %}

{% highlight xaml %}

<ContentPage.Resources> <chart:ChartColorCollection x:Key="Colors"> Red Gray Blue Maroon Pink </chart:ChartColorCollection> </ContentPage.Resources>

chart:SfChart ... chart:SfChart.Series <chart:ColumnSeries Label="Heights" ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Height"> chart:ColumnSeries.ColorModel <chart:ChartColorModel Palette="Custom" CustomBrushes="{StaticResource Colors}"/> </chart:ColumnSeries.ColorModel> </chart:ColumnSeries> </chart:SfChart.Series> </chart:SfChart>

{% endhighlight %}

{% highlight c# %}

SfChart chart = new SfChart() { ... Series = { new ColumnSeries() { ItemsSource = viewModel.Data, XBindingPath = "Name", YBindingPath = "Height", ColorModel = new ChartColorModel() { Palette = ChartColorPalette.Custom, CustomBrushes = new ChartColorCollection() { Color.Red, Color.Gray, Color.Blue, Color.Maroon, Color.Pink, } } } } };

{% endhighlight %}

{% endtabs %}

None Palette

None palette will not apply any color to the data points. So in order to define the color for the data points, you can use the Color property of ChartSeries.