Area

This demo shows the Area series view. This view is useful when you need to show trends for several series on the same diagram and also demonstrate the relationship of parts to a whole.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapChart ID="ChartArea" runat="server" DataSourceUrl="~/jsondata/ChartTypes/area.json" TitleSettings-Text="Population: Age Structure (2000)">
    <SettingsCommonSeries ArgumentField="country" />
    <SeriesCollection>
        <dx:BootstrapChartAreaSeries ValueField="y1564" Name="15-64 years" />
        <dx:BootstrapChartAreaSeries ValueField="y014" Name="0-14 years" />
        <dx:BootstrapChartAreaSeries ValueField="y65" Name="65 years and older" />
    </SeriesCollection>
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis>
            <Label>
                <Format Type="Millions"/>
            </Label>
        </dx:BootstrapChartValueAxis>
    </ValueAxisCollection>
    <SettingsLegend VerticalAlignment="Bottom" HorizontalAlignment="Center" />
    <CssClasses Control="demo-chart" />
</dx:BootstrapChart>

Spline Area

This example shows the Spline Area series view. This view is similar to the Area chart but plots a fitted curve through each data point in a series.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapChart ID="ChartSplineArea" runat="server" DataSourceUrl="~/jsondata/ChartTypes/splinearea.json" TitleSettings-Text="Corporations with Highest Market Value">
    <SettingsCommonSeries ArgumentField="company" />
    <SeriesCollection>
        <dx:BootstrapChartSplineAreaSeries ValueField="y2005" Name="2005" />
        <dx:BootstrapChartSplineAreaSeries ValueField="y2004" Name="2004" />
    </SeriesCollection>
    <SettingsLegend VerticalAlignment="Bottom" HorizontalAlignment="Center" />
    <CssClasses Control="demo-chart" />
</dx:BootstrapChart>

Step Area

This demo illustrates the Step Area series view, which shows how much values have changed for different points of the same series.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapChart ID="ChartStepArea" runat="server" DataSourceUrl="~/jsondata/ChartTypes/steparea.json" TitleSettings-Text="Australian Medal Count" CustomPalette="#cd7f32, #b7b7b7, #ffd700">
    <SettingsCommonSeries ArgumentField="year" />
    <SeriesCollection>
        <dx:BootstrapChartStepAreaSeries ValueField="bronze" Name="Bronze Medals" />
        <dx:BootstrapChartStepAreaSeries ValueField="silver" Name="Silver Medals" />
        <dx:BootstrapChartStepAreaSeries ValueField="gold" Name="Gold Medals" />
    </SeriesCollection>
    <ArgumentAxis>
        <VisualRangeSettings>
            <NumericAxis EndValue="2017" />
        </VisualRangeSettings>
    </ArgumentAxis>
    <SettingsLegend VerticalAlignment="Bottom" HorizontalAlignment="Center" />
    <CssClasses Control="demo-chart" />
</dx:BootstrapChart>
Screen Size
Color Themes
Demo QR Code