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.

@(Html.DevExpress()
    .BootstrapChart("chartStock")
    .TitleText("Stock Price")
    .EncodeHtml(false)
    .SeriesCollection(series => series
        .AddStockSeries()
            .Name("Dell")
            .ArgumentField("date")
            .OpenValueField("o")
            .HighValueField("h")
            .LowValueField("l")
            .CloseValueField("c"))
    .ArgumentAxis(axis => axis
        .ArgumentType(typeof(DateTime))
        .Label(label => label
            .Format(format => format
                .Type(DevExpress.AspNetCore.Bootstrap.FormatType.ShortDate))))
    .ValueAxisCollection(axis => axis
        .AddValueAxis()
            .TitleText("US dollars")
            .TickInterval(1)
            .Label(label => label
                .Format(format => format
                    .Type(DevExpress.AspNetCore.Bootstrap.FormatType.Currency)
                    .Precision(0))))
    ...
    .Bind("jsondata/ChartTypes/financial.json"))
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.

@(Html.DevExpress()
    .BootstrapChart("chartCandlestick")
    .TitleText("Stock Price")
    .EncodeHtml(false)
    .SeriesCollection(series => series
        .AddCandleStickSeries()
            .Name("Dell")
            .ArgumentField("date")
            .OpenValueField("o")
            .HighValueField("h")
            .LowValueField("l")
            .CloseValueField("c"))
    .ArgumentAxis(axis => axis
        .ArgumentType(typeof(DateTime))
        .Label(label => label
            .Format(format => format
                .Type(DevExpress.AspNetCore.Bootstrap.FormatType.ShortDate))))
    .ValueAxisCollection(axis => axis
        .AddValueAxis()
            .TitleText("US dollars")
            .TickInterval(1)
            .Label(label => label
                .Format(format => format
                    .Type(DevExpress.AspNetCore.Bootstrap.FormatType.Currency)
                    .Precision(0))))
    ...
    .Bind("jsondata/ChartTypes/financial.json"))
function onClientCustomizeTooltip(pointInfo) {
    return {
        text: 'Open: $' + pointInfo.openValue + '<br/>' +
            'Close: $' + pointInfo.closeValue + '<br/>' +
            'High: $' + pointInfo.highValue + '<br/>' +
            'Low: $' + pointInfo.lowValue
    };
}
Screen Size
Color Themes
Demo QR Code