Chart - Chart Areas

A ChartArea defines a region within the chart where series data is plotted. You can configure axes, backgrounds, and other settings per chart area.

Single Chart Area

Most charts use a single chart area. The ChartArea component configures the X and Y axes using the Axis class.

---

Axis Configuration Options

The Axis class supports the following properties:

Property	Description
Title	Axis title text
Minimum	Minimum value on the axis
Maximum	Maximum value on the axis
Interval	Step size between tick marks
IsLogarithmic	Use logarithmic scale

---

Logarithmic Axis

Use IsLogarithmic = true for data that spans multiple orders of magnitude.

---

Chart Area with Constrained Y-Axis

Set Minimum and Maximum to focus on a specific data range.

---

Source Code

<Chart ChartWidth="600px" ChartHeight="400px" Palette="ChartPalette.BrightPastel">
    <ChartTitle Text="Quarterly Performance" />
    <ChartLegend Name="Default" />
    <ChartArea Name="MainArea"
        AxisX="@(new Axis { Title = "Quarter" })"
        AxisY="@(new Axis { Title = "Revenue ($K)", Minimum = 0, Maximum = 200, Interval = 50 })" />
    <ChartSeries Name="Revenue"
        ChartType="SeriesChartType.Column"
        ChartArea="MainArea"
        Points="@revenueData" />
    <ChartSeries Name="Profit"
        ChartType="SeriesChartType.Line"
        ChartArea="MainArea"
        Points="@profitData" />
</Chart>

@code {

    private List<DataPoint> revenueData = new()
    {
        new() { XValue = "Q1", YValues = new[] { 120.0 } },
        new() { XValue = "Q2", YValues = new[] { 145.0 } },
        new() { XValue = "Q3", YValues = new[] { 138.0 } },
        new() { XValue = "Q4", YValues = new[] { 175.0 } }
    };

    private List<DataPoint> profitData = new()
    {
        new() { XValue = "Q1", YValues = new[] { 35.0 } },
        new() { XValue = "Q2", YValues = new[] { 42.0 } },
        new() { XValue = "Q3", YValues = new[] { 38.0 } },
        new() { XValue = "Q4", YValues = new[] { 52.0 } }
    };

}