Blazor Area Chart

    The Ignite UI for Blazor Area Chart renders as a collection of points connected by straight line segments with the area below the line filled in. Values are represented on the y-axis (labels on the left side) and categories are displayed on the x-axis (bottom labels). This chart emphasize the amount of change over a period of time or compare multiple items as well as the relationship of parts of a whole by displaying the total of the plotted values. Therefore, they are often chronological, showing a change of quantity e.g. accumulation of a commodity over time.

    Blazor Area Chart Example

    You can create Blazor Category Area Chart in the IgbCategoryChart control by binding your data to DataSource property and setting ChartType property to Area enum, as shown in the example below.

    Area Chart Recommendations

    Area Chart Use Cases

    There are several common use cases for choosing an Area Chart:

    • Have a large, high-volume data set that fits well with the chart interactions like Panning, Zooming, and Drill-down.
    • Need to compare the trends of your data over time.
    • Want to show the difference between 2 or more data series.
    • Want to show cumulative part-to-whole comparisons of distinct categories.
    • Need to show data trends for one or more categories for comparative analysis.
    • Need to visualize details time-series data.

    Area Chart Best Practices

    • Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate.
    • Order time-series data from left to right.
    • Use transparent colors to ensure that data that is plotted behind another series is not blocked.

    When Not to Use Area Charts

    • You have many (more than 7 or 10) series of data. Your goal is to ensure the chart is readable.
    • Time-series data has similar values (data over the same period). This makes overlapped shaded areas impossible to differentiate.

    Area Chart Data Structure

    • The data source must be an array or a list of data items (for single series).
    • The data source must be an array of arrays or a list of lists (for multiple series).
    • The data source should contain two or more data items in order to render a line between them.
    • All data items must contain at least one data column (string or date time).
    • All data items must contain at least one numeric data column.

    Blazor Area Chart with Single Series

    Blazor Area Chart is often used to show the change of value over time such as the amount of renewable electricity produced. You can create this type of chart in IgbCategoryChart control by binding your data and setting ChartType property to Area value, as shown in the example below.

    Blazor Area Chart with Multiple Series

    Similarly to how you can show multiple Line Chart and Spline Chart, you may also combine multiple Area Charts in the same control. This is accomplished by binding multiple data source to DataSource property of the IgbCategoryChart control.

    Blazor Area Chart Styling

    Area charts often have semi-transparent fill for their areas, thicker lines and slightly larger markers than usual. Below is an example showing how you can style the Area Chart from earlier accordingly.

    Advanced Types of Area Charts

    The following sections explain more advanced types of Blazor Area Charts that can be created using the IgbDataChart control instead of IgbCategoryChart control with simplified API.

    Blazor Step Area Chart

    The Blazor Step Area Chart belongs to a group of category charts and it is rendered using a collection of points connected by continuous vertical and horizontal lines with the area below lines filled in. Values are represented on the y-axis and categories are displayed on the x-axis. The step area chart emphasizes the amount of change over a period of time or compares multiple items. You can create this type of chart in IgbCategoryChart control by binding your data and setting ChartType property to StepArea value, as shown in the example below.

    Advanced Types of Area Charts

    The following sections explain more advanced types of Blazor Area Charts that can be created using the IgbDataChart control instead of IgbCategoryChart control with simplified API.

    Blazor Range Area Chart

    The Blazor Range Area Chart allows you show the area as a range between two values over time. You can create this type of chart in IgbDataChart control by binding your data to IgbRangeAreaSeries, as shown in the example below.

    Blazor Stacked Area Chart

    The Blazor Stacked Area Chars is rendered using a collection of points connected by line segments, with the area below the line filled in and stacked on top of each other. Stacked Area Charts follow all the same requirements as Area Charts, with the only difference being that visually, the shaded areas are stacked on top of each other. You can create this type of chart in IgbDataChart control by binding your data to IgbStackedAreaSeries, as shown in the example below.

    Blazor Stacked 100% Area Chart

    The Blazor Stacked 100% Area Chart allows you represent your data as part of a whole being changed over time e.g. a country's energy consumption related to the sources from which it is produced. In such cases representing all stacked elements equally may be a better idea. You can create this type of chart in IgbDataChart control by binding your data to IgbStacked100AreaSeries, as shown in the example below.

    Blazor Stacked Spline Area Chart

    The Blazor Stacked Spline Area Chart is rendered using a collection of points connected by curved spline segments, with the area below the curved spline fill in and stacked on top of each other. Stacked Spline Area Chart follows all of the same requirements as area charts, with the only difference being that the visually shaded areas are stacked on top of each other. You can create this type of chart in IgbDataChart control by binding your data to IgbStackedSplineAreaSeries, as shown in the example below.

    Blazor Stacked 100% Spline Area Chart

    The Blazor Stacked 100% Spline Area Chart is identical to the Stacked Spline Area Chart in all aspects except for the treatment of the values on the y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Area Chart presents the data in terms of a percent of the sum of all values in a particular data point. Sometimes the chart represents part of a whole being changed over time. For example, a country's energy consumption related to the sources from which it is produced. In such cases, representing all stacked elements equally may be a better idea. You can create this type of chart in IgbDataChart control by binding your data to IgbStacked100SplineAreaSeries, as shown in the example below.

    Blazor Radial Area Chart

    The Blazor Radial Area Chart belongs to a group of Radial Chart and has a shape of a filled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the Area Chart, but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in IgbDataChart control by binding your data to IgbRadialAreaSeries, as shown in the example below.

    Blazor Polar Area Chart

    The Blazor Polar Area Chart belongs to a group of Polar Chart and have a shape of a filled polygon, where vertices or corners are located at the polar (angle/radius) coordinates of data points and are connected by a straight line and then filling the area represented by the connected points. The Polar Area Chart uses the same concepts of data plotting as the Scatter Marker Chart, but instead wraps the points around a circle and fills in the area that is drawn, rather than stretching the points and area filled along a horizontal line. You can create this type of chart in IgbDataChart control by binding your data to IgbPolarAreaSeries, as shown in the example below.

    Blazor Polar Spline Area Chart

    The Blazor Polar Spline Area Chart belongs to a group of Polar Chart and have a shape of a filled polygon, where vertices or corners are located at the polar (angle/radius) coordinates of data points and are connected by a curved spline and then filling the area represented by the connected points. The Polar Spline Area Chart uses the same concepts of data plotting as the Scatter Marker Chart, but instead wraps the points around a circle and fills in the area that is drawn, rather than stretching the points and area filled along a horizontal line. You can create this type of chart in IgbDataChart control by binding your data to IgbPolarSplineAreaSeries, as shown in the example below.

    Additional Resources

    You can find more information about related chart types in these topics:

    API References

    The following table lists API members mentioned in above sections:

    Chart Type Control Name API Members
    Area IgbCategoryChart ChartType = Area
    Step Area IgbCategoryChart ChartType = StepArea
    Range Area IgbDataChart IgbRangeAreaSeries
    Radial Area IgbDataChart IgbRadialAreaSeries
    Polar Area IgbDataChart IgbPolarAreaSeries
    Polar Spline Area IgbDataChart IgbPolarSplineAreaSeries
    Stacked Area IgbDataChart IgbStackedAreaSeries
    Stacked Spline Area IgbDataChart IgbStackedSplineAreaSeries
    Stacked 100% Area IgbDataChart IgbStacked100AreaSeries
    Stacked 100% Spline Area IgbDataChart IgbStacked100SplineAreaSeries