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.

Population: Age Structure (2000)
ASPXCopy 
<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.

Corporations with Highest Market Value
ASPXCopy 
<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.

Australian Medal Count
ASPXCopy 
<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