New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Candlestick Chart

  • Demo Configurator
Down Color
Pick Color(Current Color is #FF0000)

The Candlestick Chart type in the ASP.NET AJAX Chart can visualize the price movements of any financial instrument over the time. The chart describes the high, low, opening and closing prices for a single day by combining the BarChart and LineChart:

  • The High price is represented by the top of the upper thin line, while the Low price by the bottom of the lower line.
  • The Open and Close prices are represented by the wide part(the body) of the item. If the close price is higher than the open price, the body is hollowed (usually colored white or green), otherwise it is filled (usually colored black or red).

This example demonstrates a RadHtmlChart control, configured as an Candlestick Chart (it uses CandlestickSeries).

Related Resources

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.ChartTypes.CandlestickChart.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadHtmlChart runat="server" ID="CandlestickChart" Width="800" Height="500" Skin="Silk"
            Transitions="true">
            <ChartTitle Text="Coca Cola Hellenic Bottling Co SA (OCCH :NYSE)">
                <Appearance Align="Center" Position="Top">
                </Appearance>
            </ChartTitle>
            <Legend>
                <Appearance Position="Bottom">
                </Appearance>
            </Legend>
            <PlotArea>
                <XAxis AxisCrossingValue="0" MajorTickType="Outside" MinorTickType="Outside"
                    Reversed="false">
                    <TitleAppearance Text="Days">
                    </TitleAppearance>
                    <LabelsAppearance RotationAngle="0" Skip="0" Step="1">
                    </LabelsAppearance>
                    <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                    <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                    <Items>
                        <telerik:AxisItem LabelText="Feb \'11" />
                        <telerik:AxisItem LabelText="Feb \'18" />
                        <telerik:AxisItem LabelText="Feb \'25" />
                        <telerik:AxisItem LabelText="Mar \'04" />
                        <telerik:AxisItem LabelText="Mar \'11" />
                        <telerik:AxisItem LabelText="Mar \'18" />
                        <telerik:AxisItem LabelText="Mar \'25" />
                        <telerik:AxisItem LabelText="Apr \'01" />
                        <telerik:AxisItem LabelText="Apr \'08" />
                        <telerik:AxisItem LabelText="Apr \'15" />
                        <telerik:AxisItem LabelText="Apr \'22" />
                        <telerik:AxisItem LabelText="Apr \'29" />
                        <telerik:AxisItem LabelText="May \'06" />
                    </Items>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="Days">
                    </TitleAppearance>
                </XAxis>
                <YAxis AxisCrossingValue="0" Color="Black" MajorTickType="Outside" MinorTickType="Outside"
                    Reversed="false" MinValue="20" MaxValue="30" Step="1">
                    <LabelsAppearance DataFormatString="{0:C}" Skip="0" Step="1">
                    </LabelsAppearance>
                    <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                    <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="Price">
                    </TitleAppearance>
                </YAxis>
                <Series>
                    <telerik:CandlestickSeries Name="Coca Cola" DownColor="Red">
                        <Appearance>
                            <FillStyle BackgroundColor="Green"></FillStyle>
                        </Appearance>
                        <TooltipsAppearance BackgroundColor="LightGray"></TooltipsAppearance>
                        <SeriesItems>
                            <telerik:CandlestickSeriesItem Open="26.29" High="26.93" Low="25.49" Close="26.00" />
                            <telerik:CandlestickSeriesItem Open="26.30" High="27.09" Low="25.20" Close="25.99" />
                            <telerik:CandlestickSeriesItem Open="26.25" High="27.189" Low="24.60" Close="26.87" />
                            <telerik:CandlestickSeriesItem Open="26.68" High="26.82" Low="26.06" Close="26.29" />
                            <telerik:CandlestickSeriesItem Open="26.22" High="28.15" Low="25.676" Close="27.91" />
                            <telerik:CandlestickSeriesItem Open="27.25" High="29.44" Low="27.01" Close="27.99" />
                            <telerik:CandlestickSeriesItem Open="28.15" High="28.15" Low="25.49" Close="26.76" />
                            <telerik:CandlestickSeriesItem Open="26.52" High="27.06" Low="24.865" Close="24.95" />
                            <telerik:CandlestickSeriesItem Open="24.84" High="26.49" Low="24.83" Close="26.20" />
                            <telerik:CandlestickSeriesItem Open="25.51" High="25.845" Low="21.83" Close="22.32" />
                            <telerik:CandlestickSeriesItem Open="23.18" High="24.10" Low="22.40" Close="23.25" />
                            <telerik:CandlestickSeriesItem Open="24.50" High="25.90" Low="24.00" Close="24.538" />
                            <telerik:CandlestickSeriesItem Open="24.47" High="26.14" Low="24.10" Close="26.14" />
                        </SeriesItems>
                    </telerik:CandlestickSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
    </div>
    <telerik:RadAjaxManager runat="server" ID="theAjaxMaanger">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="demoConfigurator">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="demoConfigurator" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="CandlestickChart" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk">
    </telerik:RadAjaxLoadingPanel>
    <qsf:ConfiguratorPanel ID="demoConfigurator" runat="server">
        <Views>
            <qsf:View>
                <qsf:ColorPicker runat="server" ID="candlesticksDownColor" ShowIcon="true" Label="Down Color" Size="Narrow" AutoPostBack="true">
                </qsf:ColorPicker>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance