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.

<dx:BootstrapChart ID="ChartArea" runat="server" DataSourceUrl="~/jsondata/ChartTypes/area.json" TitleText="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>
    <ArgumentAxis ValueMarginsEnabled="false" />
    <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.

<dx:BootstrapChart ID="ChartSplineArea" runat="server" DataSourceUrl="~/jsondata/ChartTypes/splinearea.json" TitleText="Corporations with Highest Market Value">
    <SettingsCommonSeries ArgumentField="company" />
    <SeriesCollection>
        <dx:BootstrapChartSplineAreaSeries ValueField="y2005" Name="2005" />
        <dx:BootstrapChartSplineAreaSeries ValueField="y2004" Name="2004" />
    </SeriesCollection>
    <ArgumentAxis ValueMarginsEnabled="false" />
    <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.

<dx:BootstrapChart ID="ChartStepArea" runat="server" DataSourceUrl="~/jsondata/ChartTypes/steparea.json" TitleText="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 ValueMarginsEnabled="false" MaxValue="2017" />
    <SettingsLegend VerticalAlignment="Bottom" HorizontalAlignment="Center" />
    <CssClasses Control="demo-chart" />
</dx:BootstrapChart>
Screen Size
Color Themes
Demo QR Code