Appearance in WinUI Chart (SfPolarChart)

7 Jul 202110 minutes to read

The appearance of SfPolarChart can be customized by using the predefined palettes, custom palettes and gradient, which allows to enrich the application.

Palettes

SfPolarChart provides options for applying various kinds of palettes. Some predefined palettes, such as.

  • Metro
  • AutumnBrights
  • FloraHues
  • Pineapple
  • TomatoSpectrum
  • RedChrome
  • PurpleChrome
  • BlueChrome
  • GreenChrome
  • Elite
  • LightCandy
  • SandyBeach

Applying Palette

Each palette applies a set of predefined brushes to the series in a predefined order. Metro palette is the default palette.

<chart:SfPolarChart x:Name="chart"
                    Palette="Metro"
                    GridLineType="Polygon">
        ...
        <chart:SfPolarChart.Series>
            <chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" 
                        XBindingPath="Direction"
                        YBindingPath="Tree" Label="Tree">
            </chart:PolarLineSeries>

            <chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" 
                        XBindingPath="Direction"
                        YBindingPath="Weed" Label="Weed">
            </chart:PolarLineSeries>

            <chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" 
                        XBindingPath="Direction"
                        YBindingPath="Flower" Label="Flower">
            </chart:PolarLineSeries>
        </chart:SfPolarChart.Series>
        ...
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
chart.Palette = ChartColorPalette.Metro;
chart.GridLineType = PolarChartGridLineType.Polygon;
...
PolarLineSeries series1 = new PolarLineSeries();
series1.XBindingPath = "Direction";
series1.YBindingPath = "Tree";
series1.ItemsSource = viewModel.PlantDetails;

PolarLineSeries series2 = new PolarLineSeries();
series2.XBindingPath = "Direction";
series2.YBindingPath = "Weed";
series2.ItemsSource = viewModel.PlantDetails;

PolarLineSeries series3 = new PolarLineSeries();
series3.XBindingPath = "Direction";
series3.YBindingPath = "Flower";
series3.ItemsSource = viewModel.PlantDetails;
...
this.Content = chart;

Predefined palette in WinUI Chart

BlueChrome Palette

<chart:SfPolarChart x:Name="chart" 
                Palette="BlueChrome"
                GridLineType="Polygon">
                ...

</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
chart.Palette = ChartColorPalette.BlueChrome;
chart.GridLineType = PolarChartGridLineType.Polygon;
. . .
this.Content = chart;

Palette support in WinUI Chart

Custom Palette

SfPolarChart provides support to define own brushes for the chart with preferred order by using the CustomBrushes property of ChartColorModel and Palette value as Custom, as shown in the following code example.

<chart:SfPolarChart x:Name="chart" 
                Palette="Custom"
                GridLineType="Polygon">

    <chart:SfPolarChart.ColorModel>
        <chart:ChartColorModel>
            <chart:ChartColorModel.CustomBrushes>
                <SolidColorBrush Color="#0078DE" />
                <SolidColorBrush Color="#00CC6A" />
                <SolidColorBrush Color="#B146C2" />
            </chart:ChartColorModel.CustomBrushes>
        </chart:ChartColorModel>
    </chart:SfPolarChart.ColorModel>
. . .
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
...
ChartColorModel colorModel = new ChartColorModel();
colorModel.CustomBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 0, 120, 222)));
colorModel.CustomBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 0, 204, 106)));
colorModel.CustomBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 177, 70, 194)));
chart.ColorModel = colorModel;
chart.Palette = ChartColorPalette.Custom;
. . .            
this.Content = chart;

Custom palette in WinUI Chart

Applying Gradient

Gradient for the chart can be set by using the ColorModel property of the polar chart with the help of LinearGradientBrush or RadialGradientBrush.

<chart:SfPolarChart Palette="Custom">

    <chart:SfPolarChart.ColorModel>
        <chart:ChartColorModel>
            <chart:ChartColorModel.CustomBrushes>
                <LinearGradientBrush>
                    <GradientStop Offset="1" Color="#FFE7C7" />
                    <GradientStop Offset="0" Color="#FCB69F" />
                </LinearGradientBrush>
                <LinearGradientBrush>
                    <GradientStop Offset="1" Color="#fadd7d" />
                    <GradientStop Offset="0" Color="#fccc2d" />
                </LinearGradientBrush>
                <LinearGradientBrush>
                    <GradientStop Offset="1" Color="#DCFA97" />
                    <GradientStop Offset="0" Color="#96E6A1" />
                </LinearGradientBrush>
            </chart:ChartColorModel.CustomBrushes>
        </chart:ChartColorModel>
    </chart:SfPolarChart.ColorModel>
. . .
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
...
ChartColorModel colorModel = new ChartColorModel();
LinearGradientBrush gradientColor1 = new LinearGradientBrush();
GradientStop stop1 = new GradientStop() { Offset = 1, Color = Color.FromRgb(255, 231, 199) };
GradientStop stop2 = new GradientStop() { Offset = 0, Color = Color.FromRgb(252, 182, 159) };
gradientColor1.GradientStops.Add(stop1);
gradientColor1.GradientStops.Add(stop2);
LinearGradientBrush gradientColor2 = new LinearGradientBrush();
stop1 = new GradientStop() { Offset = 1, Color = Color.FromRgb(250, 221, 125) };
stop2 = new GradientStop() { Offset = 0, Color = Color.FromRgb(252, 204, 45) };
gradientColor2.GradientStops.Add(stop1);
gradientColor2.GradientStops.Add(stop2);
...
colorModel.CustomBrushes.Add(gradientColor1);
colorModel.CustomBrushes.Add(gradientColor2);
...
chart.ColorModel = colorModel;
chart.Palette = ChartColorPalette.Custom;
. . .

Gradient support in WinUI Chart

Gradient color using the Interior property of series with LinearGradientBrush.

<chart:SfPolarChart>
    ...
    <chart:PolarAreaSeries  ItemsSource="{Binding PlantDetails}" 
                            XBindingPath="Direction" 
                            YBindingPath="Tree" Label="Tree">

        <chart:PolarAreaSeries.Interior>
            <LinearGradientBrush>
                <GradientStop Offset="1" Color="#A8EAEE" />
                <GradientStop Offset="0" Color="#7BB0F9" />
            </LinearGradientBrush>
        </chart:PolarAreaSeries.Interior>
                   
    </chart:PolarAreaSeries>
...
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
. . .
LinearGradientBrush gradientColor = new LinearGradientBrush();
GradientStop stop1 = new GradientStop() { Offset = 1, Color = Color.FromRgb(168, 234, 238) };
GradientStop stop2 = new GradientStop() { Offset = 0, Color = Color.FromRgb(123, 176, 249) };
gradientColor.GradientStops.Add(stop1);
gradientColor.GradientStops.Add(stop2);

PolarAreaSeries series = new PolarAreaSeries();
series.Interior = gradientColor;
...

Gradient color support in WinUI Chart