Stock

In this example, the Stock series displays variations in stock price throughout the course of a given day.

Left and right lines at each point represent the Open and Close prices, and the bottom and top values of the vertical line shown at each point represents the Low and High prices.

<dx:BootstrapChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/financial.json" TitleText="Stock Price" EncodeHtml="false">
    <SeriesCollection>
        <dx:BootstrapChartStockSeries Name="Dell" ArgumentField="date" OpenValueField="o" HighValueField="h" LowValueField="l" CloseValueField="c"/>
    </SeriesCollection>
    <ArgumentAxis ArgumentType="System.DateTime">
        <Label>
            <Format Type="ShortDate"/>
        </Label>
    </ArgumentAxis>
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis TitleText="US dollars" TickInterval="1">
            <Label>
                <Format Type="Currency" Precision="0"/>
            </Label>
        </dx:BootstrapChartValueAxis>
    </ValueAxisCollection>
    ...
</dx:BootstrapChart>

Candlestick

In this example, the Candlestick series displays variations in stock price throughout the course of a given day.

A filled rectangle represents the Open and Close prices, and the bottom and top values of the vertical line shown at each point represent the Low and High prices.

<dx:BootstrapChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/financial.json" TitleText="Stock Price" EncodeHtml="false">
    <SeriesCollection>
        <dx:BootstrapChartCandleStickSeries Name="Dell" ArgumentField="date" OpenValueField="o" HighValueField="h" LowValueField="l" CloseValueField="c"/>
    </SeriesCollection>
    <ArgumentAxis ArgumentType="System.DateTime">
        <Label>
            <Format Type="ShortDate"/>
        </Label>
    </ArgumentAxis>
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis TitleText="US dollars" TickInterval="1">
            <Label>
                <Format Type="Currency" Precision="0"/>
            </Label>
        </dx:BootstrapChartValueAxis>
    </ValueAxisCollection>
    ...
</dx:BootstrapChart>
Screen Size
Color Themes
Demo QR Code