HtmlChart - Candlestick Chart

Demo Configurator

Down Color
Pick Color(Current Color is #FF0000)
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The Candlestick Chart type in RadHtmlChart 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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>

Find Assistance

Help Us Improve

Was this example helpful?