Contour Chart

The Contour Chart visualizes three-dimensional data on a two-dimensional plane by using contour lines and color-filled areas. It groups data into defined contour levels, which are each represented by distinct colors, allowing users to quickly understand data distribution and surface gradients.

The Contour Chart inherits all existing properties of the Heat Map control.

Contour chart allows users to define:

NumberOfLevels: Specifies the total number of contour levels to create by evenly dividing the data range
Levels: Specifies the contour levels individually as a numerical array. This gives you explicit control over where each contour line is drawn.

If both Levels and NumberOfLevels properties are present, NumberOfLevels takes precedence and the values in the Levels array will be ignored.

Appearance: FlexChart offers the contour chart in three forms:
- LineArea: Combines contour lines and filled areas to show both value boundaries and gradients.
- Area: Displays smooth color-filled regions to represent continuous data ranges.
- LineArea: Shows only contour lines to emphasize value boundaries and shapes.

LineArea

Area

LineArea

Sample Usage

The following code demonstrates how to initialize a Contour series, set the number of levels, and configure its appearance.

.xaml file

<c1:FlexChart x:Name="chart" Loaded="ChartLoaded" Rotated="True" Grid.Row="1"
                Header="Monkey Saddle data" >
    <c1:FlexChart.HeaderStyle>
        <c1:ChartStyle FontSize="20" />
    </c1:FlexChart.HeaderStyle>
    <c1:FlexChart.DataLabel>
        <c1:DataLabel Content="{}{item}" Position="Center" >
            <c1:DataLabel.Style>
                <c1:ChartStyle Stroke="Black" />
            </c1:DataLabel.Style>
        </c1:DataLabel>
    </c1:FlexChart.DataLabel>
    <c1:FlexChart.AxisX>
        <c1:Axis AxisLine="False" MajorGrid="False" MajorTickMarks="None"/>
    </c1:FlexChart.AxisX>
    <c1:FlexChart.AxisY>
        <c1:Axis AxisLine="False" MajorGrid="False" MajorTickMarks="None"/>
    </c1:FlexChart.AxisY>
</c1:FlexChart>

.xaml.cs file

 var contour = new C1.WinUI.Chart.Contour();
 var (data, min, max) = MonkeySaddleData(); // Just a method generating a data
 var scale = new C1.WinUI.Chart.GradientColorScale() { Min = min, Max = max };
 scale.Colors = new List<Color> { Colors.Blue, Colors.White, Colors.Red };

 contour.ItemsSource = data;
 contour.ColorScale = scale;

 chart.AxisX.Max = data.GetLength(0) - 1;
 chart.AxisY.Max = data.GetLength(1) - 1;
 chart.Series.Add(contour);