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 ID="ChartStock" runat="server" DataSourceUrl="~/jsondata/ChartTypes/financial.json" TitleSettings-Text="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 TitleSettings-Text="US dollars" TickInterval="1">
<Label>
<Format Type="Currency" Precision="0"/>
</Label>
</dx:BootstrapChartValueAxis>
</ValueAxisCollection>
<SettingsToolTip Enabled="true" OnClientCustomizeTooltip="onClientCustomizeTooltip" />
<CssClasses Control="demo-chart" />
</dx:BootstrapChart>
function onClientCustomizeTooltip(pointInfo) {
return {
text: 'Open: $' + pointInfo.openValue + '<br/>' +
'Close: $' + pointInfo.closeValue + '<br/>' +
'High: $' + pointInfo.highValue + '<br/>' +
'Low: $' + pointInfo.lowValue
};
}
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" TitleSettings-Text="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 TitleSettings-Text="US dollars" TickInterval="1">
<Label>
<Format Type="Currency" Precision="0"/>
</Label>
</dx:BootstrapChartValueAxis>
</ValueAxisCollection>
<SettingsToolTip Enabled="true" OnClientCustomizeTooltip="onClientCustomizeTooltip" />
<CssClasses Control="demo-chart" />
</dx:BootstrapChart>