Search results

Area Charts

Area

To render a area series, use series Type as Area.

area.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Width="60%">
        <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
  
        <ChartSeriesCollection>
            <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="ChartSeriesType.Area">
            </ChartSeries>
        </ChartSeriesCollection>
</EjsChart>

@code{
    public class ChartData
    {
        public string X;
        public double Y;
    }
    public List<ChartData> MedalDetails = new List<ChartData> 
    {
        new ChartData { X= "South Korea", Y= 39.4 },
        new ChartData { X= "India", Y= 61.3 },
        new ChartData { X= "Pakistan", Y= 20.4 },
        new ChartData { X= "Germany", Y= 65.1 },
        new ChartData { X= "Australia", Y= 15.8 }
    };
}

Area

Multicolored area

To render a multicolored area series, use the series type as MultiColoredArea. The required Segments of the series can be customized using the Value, Color, and DashArray.

multicolor-area.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Width="60%">
        <ChartSeriesCollection> 
            <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Opacity="0.5" Type="ChartSeriesType.MultiColoredArea"> 
                <ChartSegments>
                    <ChartSegment Value="2007" Color="blue"></ChartSegment> 
                    <ChartSegment Value="2009" Color="red"></ChartSegment> 
                    <ChartSegment Color="green"></ChartSegment> 
                </ChartSegments> 
            </ChartSeries> 
        </ChartSeriesCollection> 
</EjsChart> 

@code{
    public class ChartData
    {
        public double X;
        public double Y;
    }

    public List<ChartData> WeatherReports = new List<ChartData> 
    {
        new ChartData{ X= 2005, Y= 28 },
        new ChartData{ X= 2006, Y= 25},
        new ChartData{ X= 2007, Y= 26 },
        new ChartData{ X= 2008, Y= 27 },
        new ChartData{ X= 2009, Y= 32},
        new ChartData{ X= 2010, Y= 35 },
        new ChartData{ X= 2011, Y= 25 }
    };
}

Multicolored area

Customization

You can use the following properties to customize the area series.

  • Fill – used to change the color of the area.
  • Opacity – used to control the transparency of the chart series.
  • DashArray – used to render area series with dashes.
  • Border – used to render area series with border.
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Title="Olympic Medals" Width="60%">
    <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Opacity="0.5"
                     DashArray="5,5" Fill="blue" Type="ChartSeriesType.Area">
            <ChartSeriesBorder Width="2" Color="red"></ChartSeriesBorder>
        </ChartSeries>
    </ChartSeriesCollection>
</EjsChart>

@code{
    public class ChartData
    {
        public string X;
        public double Y;
    }
    public List<ChartData> MedalDetails = new List<ChartData>
    {
        new ChartData { X= "South Korea", Y= 39.4 },
        new ChartData { X= "India", Y= 61.3 },
        new ChartData { X= "Pakistan", Y= 20.4 },
        new ChartData { X= "Germany", Y= 65.1 },
        new ChartData { X= "Australia", Y= 15.8 },
        new ChartData { X= "Italy", Y= 29.2 },
        new ChartData { X= "United Kingdom", Y= 44.6 },
        new ChartData { X= "Saudi Arabia", Y= 9.7 },
        new ChartData { X= "Russia", Y= 40.8 },
        new ChartData { X= "Mexico", Y= 31 },
        new ChartData { X= "Brazil", Y= 75.9 },
        new ChartData { X= "China", Y= 51.4 }
    };
}

Area

See Also