Choose an item

Candlestick Chart

This chart type belongs to PowerCharts XT.

A candlestick chart is widely used for applications that require analysis of equity and commodity prices. It allows you to show the opening price, closing price, highest trading price, lowest trading price, and the trade volume on a single chart. A combination of the line and bar charts, a candlestick chart represents the range of price movement for a specific time interval.

The FusionCharts Suite XT candlestick chart offers you a powerful and interactive interface to plot your stock data. It offers the following features:

  • Integrated price and volume plot, where the volume plot can be turned on or off.

  • Multiple chart options for price plotting - candlestick/bar/line.

  • Interactive tooltip and customizable hover bar.

  • Option to plot trend lines and zones on the chart.

  • Option to plot any number of custom trend sets on the chart, which can be customized to show technical indicators.

  • Ability to provide missing data.

  • Ability to highlight specific candles.

  • Option to draw vertical indicator lines at any point on the x-axis.

{ "header": "Chart Anatomy", "subHeader": "To know how FusionCharts works, it is important to understand the various components and concepts of a chart", "content": { "header": "Below are different sections with interactive annotated images describing various components and concepts of charts", "contentGroup": [ { "itemHeader": "Candlestick Chart", "imgSrc": "candlestick-chart-anatomy.png", "annotations": [{ "annotationNumber": "1", "annotationName": "Caption", "annotationDesc": "The caption (also called the chart title) is the heading of your chart, you can add custom text for the caption, as well as configure its font properties and cosmetics.", "annotationDescLinkPath": null, "leftPosition": "35.5%", "topPosition": "6.5%", "annotationLinks": [{ "linkDesc": "Learn how to add caption ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption" }, { "linkDesc": "Font properties and cosmetics of caption can also be customized using attributes, know more about them ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties" }, { "linkDesc": "You can also customize the alignment of the caption. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment" } ] }, { "annotationNumber": "2", "annotationName": "Subcaption", "annotationDesc": "The sub-caption (also called the chart subtitle) is the sub-heading of your chart. You can add custom text for sub-caption, as well as configure its font properties.", "annotationDescLinkPath": null, "leftPosition": "54%", "topPosition": "12%", "annotationLinks": [{ "linkDesc": "Learn how to add sub-caption ", "linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names" }, { "linkDesc": "Font properties and cosmetics of sub-caption can also be customized using attributes, learn more about them ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties" } ] }, { "annotationNumber": "3", "annotationName": "Canvas Area", "annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.", "annotationDescLinkPath": null, "leftPosition": "92%", "topPosition": "15%", "annotationLinks": [{ "linkDesc": "You can customize border for canvas, learn more about it ", "linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border" }, { "linkDesc": "You can customize background color for canvas, as well as add gradient fill to it. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill" } ] }, { "annotationNumber": "4", "annotationName": "X-Axis", "annotationDesc": "X-Axis refers to line or values on a chart that runs horizontally (left-right). Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "35%", "topPosition": "77%", "annotationLinks": [] }, { "annotationNumber": "5", "annotationName": "X-Axis Labels", "annotationDesc": "X-Axis labels are the names of the data points that are displayed on the x-axis of a chart. Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "74%", "topPosition": "78%", "annotationLinks": [] }, { "annotationNumber": "6", "annotationName": "Y-Axis", "annotationDesc": "Y-Axis refers to line or values on a chart that runs vertically (up-down) through zero. Learn more about them ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "87%", "topPosition": "37%", "annotationLinks": [] }, { "annotationNumber": "7", "annotationName": "Y-Axis Title", "annotationDesc": "Y-Axis refers to the title of the y-axis. Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "7%", "topPosition": "44%", "annotationLinks": [] }, { "annotationNumber": "8", "annotationName": "Data Plot", "annotationDesc": "Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart.", "annotationDescLinkPath": null, "leftPosition": "36%", "topPosition": "54%", "annotationLinks": [{ "linkDesc": "You can customize the way your data plot looks using colors, gradients and hover effects using available attributes, learn more about their usage ", "linkPath": "/chart-guide/chart-configurations/data-plot" }] }, { "annotationNumber": "9", "annotationName": "Tooltip", "annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It denotes valuable information about the data plot hovered.", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "56.5%", "topPosition": "58.5%", "annotationLinks": [{ "linkDesc": "You can customize padding, size and other properties of tooltip, learn more about it ", "linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips" }, { "linkDesc": "You can also customize the text of tooltip and use values plotted on the chart using macros, learn more about it ", "linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros" } ] } ] } ] } }

Create a Candlestick Chart

As an example, we will create a candlestick chart that shows the daily stock price for Harry's SuperMart (stock name HRYS) for the last two months.

To create a candlestick chart follow the steps given below:

  • Specify the chart type using the type attribute. To render a candlestick chart, set candlestick.

  • Set the container object using renderAt attribute.

  • Specify the dimension of the chart using width and height attributes.

  • Set the type of data (JSON/XML) you want to pass to the chart object using dataFormat attribute.

In the JSON data:

  • Set the attributes and their corresponding values in "<attributeName>": "<value>" format.

  • Set the label attribute to specify the label for the data item. The label is rendered along the x-axis.

Note: This attribute belongs to the category object as well as the data object. When used in the category object, it specifies the numerical position of a category on the x-axis. When used in the data object, it specifies the numerical position of a candlestick point on the x-axis.

  • Set the open attribute to specify the opening price of a data item.

  • Set the close attribute to specify the closing price of a data item.

  • Set the high attribute to specify the highest price of a data item.

  • Set the low attribute to specify the lowest price of a data item.

  • Set the volume attribute to specify the volume of the transaction. To render the volume chart, specify the value to this attribute.

For a detailed list of attributes, refer to the chart attributes page of candlestick chart.

Refer to the code below:

{
    "chart": {
        ...
    },
    "categories": [
        {
            "category": [...]
        }
    ],
    "dataset": [
        {
            "data": [
                {
                    "open": "18.74",
                    "high": "19.16",
                    "low": "18.67 ",
                    "close": "18.99",
                    "x": "1",
                    "volume": "4991285"
                },
                {
                    "open": "23.97",
                    "high": "23.99",
                    "low": "23.14",
                    "close": "23.32",
                    "x": "61",
                    "volume": "4879546"
                }
            ]
        }
    ]
}

The candlestick chart thus created will look like:

FusionCharts will load here..
{
    "chart": {
        "theme": "fusion",
        "caption": "Daily Stock Price HRYS",
        "subCaption": "Last 2 months",
        "numberprefix": "$",
        "vNumberPrefix": " ",
        "pyaxisname": "Price",
        "vyaxisname": "Volume (In Millions)",
        "toolTipColor": "#ffffff",
        "toolTipBorderThickness": "0",
        "toolTipBgColor": "#000000",
        "toolTipBgAlpha": "80",
        "toolTipBorderRadius": "2",
        "toolTipPadding": "5"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "2 month ago",
                    "x": "1"
                },
                {
                    "label": "1 month ago",
                    "x": "31"
                },
                {
                    "label": "Today",
                    "x": "60"
                }
            ]
        }
    ],
    "dataset": [
        {
            "data": [
                {
                    "open": "18.74",
                    "high": "19.16",
                    "low": "18.67 ",
                    "close": "18.99",
                    "x": "1",
                    "volume": "4991285"
                },
                {
                    "open": "18.74",
                    "high": "19.06",
                    "low": "18.54",
                    "close": "18.82",
                    "x": "2",
                    "volume": "3615889"
                },
                {
                    "open": "19.21",
                    "high": "19.3",
                    "low": "18.59 ",
                    "close": "18.65",
                    "x": "3",
                    "volume": "4749586"
                },
                {
                    "open": "19.85",
                    "high": "19.86",
                    "low": "19.12",
                    "close": "19.4",
                    "x": "4",
                    "volume": "4366740"
                },
                {
                    "open": "20.19",
                    "high": "20.21",
                    "low": "19.57",
                    "close": "19.92",
                    "x": "5",
                    "volume": "3982709"
                },
                {
                    "open": "20.47",
                    "high": "20.64",
                    "low": "20.15",
                    "close": "20.16",
                    "x": "6",
                    "volume": "2289403"
                },
                {
                    "open": "20.36",
                    "high": "20.52",
                    "low": "20.29",
                    "close": "20.48",
                    "x": "7",
                    "volume": "1950919"
                },
                {
                    "open": "20.21",
                    "high": "20.25",
                    "low": "19.91",
                    "close": "20.15",
                    "x": "8",
                    "volume": "2391070"
                },
                {
                    "open": "19.46",
                    "high": "20.54",
                    "low": "19.46",
                    "close": "20.22",
                    "x": "9",
                    "volume": "4548422"
                },
                {
                    "open": "19.24",
                    "high": "19.5",
                    "low": "19.13",
                    "close": "19.44",
                    "x": "10",
                    "volume": "1889811"
                },
                {
                    "open": "19.25",
                    "high": "19.41",
                    "low": "18.99",
                    "close": "19.22",
                    "x": "11",
                    "volume": "2543355"
                },
                {
                    "open": "18.85",
                    "high": "19.45",
                    "low": "18.8",
                    "close": "19.24",
                    "x": "12",
                    "volume": "2134393"
                },
                {
                    "open": "18.97",
                    "high": "19.01",
                    "low": "18.68",
                    "close": "18.95",
                    "x": "13",
                    "volume": "1740852"
                },
                {
                    "open": "18.69",
                    "high": "19",
                    "low": "18.35",
                    "close": "18.97",
                    "x": "14",
                    "volume": "2701392"
                },
                {
                    "open": "19.02",
                    "high": "19.1",
                    "low": "18.68",
                    "close": "18.7",
                    "x": "15",
                    "volume": "2198755"
                },
                {
                    "open": "19.29",
                    "high": "19.38",
                    "low": "18.88",
                    "close": "19.05",
                    "x": "16",
                    "volume": "2464958"
                },
                {
                    "open": "18.64",
                    "high": "19.35",
                    "low": "18.53",
                    "close": "19.33",
                    "x": "17",
                    "volume": "2962994"
                },
                {
                    "open": "18.14",
                    "high": "18.58",
                    "low": "18.08",
                    "close": "18.52",
                    "x": "18",
                    "volume": "1964932"
                },
                {
                    "open": "18.49",
                    "high": "18.92",
                    "low": "18.19",
                    "close": "18.26",
                    "x": "19",
                    "volume": "3013102"
                },
                {
                    "open": "18.71",
                    "high": "18.84",
                    "low": "18",
                    "close": "18.51",
                    "x": "20",
                    "volume": "4435894"
                },
                {
                    "open": "19.17",
                    "high": "19.35",
                    "low": "18.61",
                    "close": "18.66",
                    "x": "21",
                    "volume": "3245851"
                },
                {
                    "open": "19.12",
                    "high": "19.41",
                    "low": "18.92",
                    "close": "19.2",
                    "x": "22",
                    "volume": "2259792"
                },
                {
                    "open": "19.43",
                    "high": "19.58",
                    "low": "19.16",
                    "close": "19.33",
                    "x": "23",
                    "volume": "3531327"
                },
                {
                    "open": "19.72",
                    "high": "19.81",
                    "low": "19.04",
                    "close": "19.27",
                    "x": "24",
                    "volume": "5834733"
                },
                {
                    "open": "19.7",
                    "high": "19.94",
                    "low": "19.49",
                    "close": "19.77",
                    "x": "25",
                    "volume": "2009987"
                },
                {
                    "open": "19.84",
                    "high": "19.98",
                    "low": "19.39",
                    "close": "19.88",
                    "x": "26",
                    "volume": "2767592"
                },
                {
                    "open": "20.71",
                    "high": "20.73",
                    "low": "19.16",
                    "close": "19.63",
                    "x": "27",
                    "volume": "673358"
                },
                {
                    "open": "21.14",
                    "high": "21.14",
                    "low": "20.55",
                    "close": "20.65",
                    "x": "28",
                    "volume": "3164006"
                },
                {
                    "open": "21.5",
                    "high": "21.86",
                    "low": "21.2",
                    "close": "21.33",
                    "x": "29",
                    "volume": "7986466"
                },
                {
                    "open": "20.45",
                    "high": "21.08",
                    "low": "20.1",
                    "close": "20.56",
                    "x": "30",
                    "volume": "5813040"
                },
                {
                    "open": "20.07",
                    "high": "20.69",
                    "low": "20.04",
                    "close": "20.36",
                    "x": "31",
                    "volume": "3440002"
                },
                {
                    "open": "19.88",
                    "high": "20.11",
                    "low": "19.51",
                    "close": "20.03",
                    "x": "32",
                    "volume": "2779171"
                },
                {
                    "open": "19.76",
                    "high": "20.13",
                    "low": "19.65",
                    "close": "19.88",
                    "x": "33",
                    "volume": "2918115"
                },
                {
                    "open": "19.77",
                    "high": "19.97",
                    "low": "19.27",
                    "close": "19.9",
                    "x": "34",
                    "volume": "3850357"
                },
                {
                    "open": "19.43",
                    "high": "19.72",
                    "low": "18.88",
                    "close": "19.5",
                    "x": "35",
                    "volume": "5047378"
                },
                {
                    "open": "19.69",
                    "high": "19.84",
                    "low": "19.17",
                    "close": "19.43",
                    "x": "36",
                    "volume": "3479017"
                },
                {
                    "open": "19.59",
                    "high": "20.02",
                    "low": "19.02",
                    "close": "19.41",
                    "x": "37",
                    "volume": "5749874"
                },
                {
                    "open": "20.95",
                    "high": "21.09",
                    "low": "19.64",
                    "close": "19.83",
                    "x": "38",
                    "volume": "6319111"
                },
                {
                    "open": "20.52",
                    "high": "21.03",
                    "low": "20.45",
                    "close": "21",
                    "x": "39",
                    "volume": "4412413"
                },
                {
                    "open": "20.36",
                    "high": "20.96",
                    "low": "20.2",
                    "close": "20.44",
                    "x": "40",
                    "volume": "5948318"
                },
                {
                    "open": "21.45",
                    "high": "21.48",
                    "low": "19.63",
                    "close": "20.3",
                    "x": "41",
                    "volume": "11935440"
                },
                {
                    "open": "23.49",
                    "high": "23.57",
                    "low": "21.12",
                    "close": "21.63",
                    "x": "42",
                    "volume": "10523910"
                },
                {
                    "open": "24.04",
                    "high": "24.21",
                    "low": "23.04",
                    "close": "23.28",
                    "x": "43",
                    "volume": "3843797"
                },
                {
                    "open": "23.6",
                    "high": "24.065",
                    "low": "23.51",
                    "close": "23.94",
                    "x": "44",
                    "volume": "3691404"
                },
                {
                    "open": "22.87",
                    "high": "23.49",
                    "low": "22.86",
                    "close": "23.48",
                    "x": "45",
                    "volume": "3387393"
                },
                {
                    "open": "22.35",
                    "high": "22.89",
                    "low": "22.35",
                    "close": "22.74",
                    "x": "46",
                    "volume": "3737330"
                },
                {
                    "open": "22.11",
                    "high": "22.5",
                    "low": "21.9",
                    "close": "22.24",
                    "x": "47",
                    "volume": "4630397"
                },
                {
                    "open": "22.58",
                    "high": "22.80",
                    "low": "22.25",
                    "close": "22.42",
                    "x": "48",
                    "volume": "3024711"
                },
                {
                    "open": "23.54",
                    "high": "23.76",
                    "low": "22.6",
                    "close": "22.68",
                    "x": "49",
                    "volume": "3984508"
                },
                {
                    "open": "23.66",
                    "high": "24.09",
                    "low": "23.09",
                    "close": "23.46",
                    "x": "50",
                    "volume": "3420204"
                },
                {
                    "open": "24.36",
                    "high": "24.42",
                    "low": "22.90",
                    "close": "23.6",
                    "x": "51",
                    "volume": "5151096"
                },
                {
                    "open": "24.34",
                    "high": "24.6",
                    "low": "23.73",
                    "close": "24.15",
                    "x": "52",
                    "volume": "5999654"
                },
                {
                    "open": "23.38",
                    "high": "24.8",
                    "low": "23.36",
                    "close": "24.1",
                    "x": "53",
                    "volume": "5382049"
                },
                {
                    "open": "23.76",
                    "high": "23.84",
                    "low": "23.23",
                    "close": "23.47",
                    "x": "54",
                    "volume": "3508510"
                },
                {
                    "open": "23.64",
                    "high": "23.94",
                    "low": "23.48",
                    "close": "23.76",
                    "x": "55",
                    "volume": "2718428"
                },
                {
                    "open": "23.99",
                    "high": "24.18",
                    "low": "23.59",
                    "close": "23.66",
                    "x": "56",
                    "volume": "2859391"
                },
                {
                    "open": "23.32",
                    "high": "24.26",
                    "low": "23.32",
                    "close": "23.79",
                    "x": "57",
                    "volume": "4138618"
                },
                {
                    "open": "24.08",
                    "high": "24.4",
                    "low": "23.26",
                    "close": "23.39",
                    "x": "58",
                    "volume": "4477478"
                },
                {
                    "open": "22.84",
                    "high": "23.96",
                    "low": "22.83",
                    "close": "23.88",
                    "x": "59",
                    "volume": "4822378"
                },
                {
                    "open": "23.38",
                    "high": "23.78",
                    "low": "22.94",
                    "close": "23.01",
                    "x": "60",
                    "volume": "4037312"
                },
                {
                    "open": "23.97",
                    "high": "23.99",
                    "low": "23.14",
                    "close": "23.32",
                    "x": "61",
                    "volume": "4879546"
                }
            ]
        }
    ]
}
<chart theme="fusion" caption="Daily Stock Price HRYS" subcaption="Last 2 months" numberprefix="$" vnumberprefix=" " pyaxisname="Price" vyaxisname="Volume (In Millions)" tooltipcolor="#ffffff" tooltipborderthickness="0" tooltipbgcolor="#000000" tooltipbgalpha="80" tooltipborderradius="2" tooltippadding="5">
    <categories>
        <category label="2 month ago" x="1" />
        <category label="1 month ago" x="31" />
        <category label="Today" x="60" />
    </categories>
    <dataset>
        <set open="18.74" high="19.16" low="18.67 " close="18.99" x="1" volume="4991285" />
        <set open="18.74" high="19.06" low="18.54" close="18.82" x="2" volume="3615889" />
        <set open="19.21" high="19.3" low="18.59 " close="18.65" x="3" volume="4749586" />
        <set open="19.85" high="19.86" low="19.12" close="19.4" x="4" volume="4366740" />
        <set open="20.19" high="20.21" low="19.57" close="19.92" x="5" volume="3982709" />
        <set open="20.47" high="20.64" low="20.15" close="20.16" x="6" volume="2289403" />
        <set open="20.36" high="20.52" low="20.29" close="20.48" x="7" volume="1950919" />
        <set open="20.21" high="20.25" low="19.91" close="20.15" x="8" volume="2391070" />
        <set open="19.46" high="20.54" low="19.46" close="20.22" x="9" volume="4548422" />
        <set open="19.24" high="19.5" low="19.13" close="19.44" x="10" volume="1889811" />
        <set open="19.25" high="19.41" low="18.99" close="19.22" x="11" volume="2543355" />
        <set open="18.85" high="19.45" low="18.8" close="19.24" x="12" volume="2134393" />
        <set open="18.97" high="19.01" low="18.68" close="18.95" x="13" volume="1740852" />
        <set open="18.69" high="19" low="18.35" close="18.97" x="14" volume="2701392" />
        <set open="19.02" high="19.1" low="18.68" close="18.7" x="15" volume="2198755" />
        <set open="19.29" high="19.38" low="18.88" close="19.05" x="16" volume="2464958" />
        <set open="18.64" high="19.35" low="18.53" close="19.33" x="17" volume="2962994" />
        <set open="18.14" high="18.58" low="18.08" close="18.52" x="18" volume="1964932" />
        <set open="18.49" high="18.92" low="18.19" close="18.26" x="19" volume="3013102" />
        <set open="18.71" high="18.84" low="18" close="18.51" x="20" volume="4435894" />
        <set open="19.17" high="19.35" low="18.61" close="18.66" x="21" volume="3245851" />
        <set open="19.12" high="19.41" low="18.92" close="19.2" x="22" volume="2259792" />
        <set open="19.43" high="19.58" low="19.16" close="19.33" x="23" volume="3531327" />
        <set open="19.72" high="19.81" low="19.04" close="19.27" x="24" volume="5834733" />
        <set open="19.7" high="19.94" low="19.49" close="19.77" x="25" volume="2009987" />
        <set open="19.84" high="19.98" low="19.39" close="19.88" x="26" volume="2767592" />
        <set open="20.71" high="20.73" low="19.16" close="19.63" x="27" volume="673358" />
        <set open="21.14" high="21.14" low="20.55" close="20.65" x="28" volume="3164006" />
        <set open="21.5" high="21.86" low="21.2" close="21.33" x="29" volume="7986466" />
        <set open="20.45" high="21.08" low="20.1" close="20.56" x="30" volume="5813040" />
        <set open="20.07" high="20.69" low="20.04" close="20.36" x="31" volume="3440002" />
        <set open="19.88" high="20.11" low="19.51" close="20.03" x="32" volume="2779171" />
        <set open="19.76" high="20.13" low="19.65" close="19.88" x="33" volume="2918115" />
        <set open="19.77" high="19.97" low="19.27" close="19.9" x="34" volume="3850357" />
        <set open="19.43" high="19.72" low="18.88" close="19.5" x="35" volume="5047378" />
        <set open="19.69" high="19.84" low="19.17" close="19.43" x="36" volume="3479017" />
        <set open="19.59" high="20.02" low="19.02" close="19.41" x="37" volume="5749874" />
        <set open="20.95" high="21.09" low="19.64" close="19.83" x="38" volume="6319111" />
        <set open="20.52" high="21.03" low="20.45" close="21" x="39" volume="4412413" />
        <set open="20.36" high="20.96" low="20.2" close="20.44" x="40" volume="5948318" />
        <set open="21.45" high="21.48" low="19.63" close="20.3" x="41" volume="11935440" />
        <set open="23.49" high="23.57" low="21.12" close="21.63" x="42" volume="10523910" />
        <set open="24.04" high="24.21" low="23.04" close="23.28" x="43" volume="3843797" />
        <set open="23.6" high="24.065" low="23.51" close="23.94" x="44" volume="3691404" />
        <set open="22.87" high="23.49" low="22.86" close="23.48" x="45" volume="3387393" />
        <set open="22.35" high="22.89" low="22.35" close="22.74" x="46" volume="3737330" />
        <set open="22.11" high="22.5" low="21.9" close="22.24" x="47" volume="4630397" />
        <set open="22.58" high="22.80" low="22.25" close="22.42" x="48" volume="3024711" />
        <set open="23.54" high="23.76" low="22.6" close="22.68" x="49" volume="3984508" />
        <set open="23.66" high="24.09" low="23.09" close="23.46" x="50" volume="3420204" />
        <set open="24.36" high="24.42" low="22.90" close="23.6" x="51" volume="5151096" />
        <set open="24.34" high="24.6" low="23.73" close="24.15" x="52" volume="5999654" />
        <set open="23.38" high="24.8" low="23.36" close="24.1" x="53" volume="5382049" />
        <set open="23.76" high="23.84" low="23.23" close="23.47" x="54" volume="3508510" />
        <set open="23.64" high="23.94" low="23.48" close="23.76" x="55" volume="2718428" />
        <set open="23.99" high="24.18" low="23.59" close="23.66" x="56" volume="2859391" />
        <set open="23.32" high="24.26" low="23.32" close="23.79" x="57" volume="4138618" />
        <set open="24.08" high="24.4" low="23.26" close="23.39" x="58" volume="4477478" />
        <set open="22.84" high="23.96" low="22.83" close="23.88" x="59" volume="4822378" />
        <set open="23.38" high="23.78" low="22.94" close="23.01" x="60" volume="4037312" />
        <set open="23.97" high="23.99" low="23.14" close="23.32" x="61" volume="4879546" />
    </dataset>
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'candlestick',
    renderAt: 'chart-container',
    width: '680',
    height: '390',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Daily Stock Price HRYS",
            "subCaption": "Last 2 months",
            "numberprefix": "$",
            "vNumberPrefix": " ",
            "pyaxisname": "Price",
            "vyaxisname": "Volume (In Millions)",
            "toolTipColor": "#ffffff",
            "toolTipBorderThickness": "0",
            "toolTipBgColor": "#000000",
            "toolTipBgAlpha": "80",
            "toolTipBorderRadius": "2",
            "toolTipPadding": "5"
        },
        "categories": [{
            "category": [{
                "label": "2 month ago",
                "x": "1"
            }, {
                "label": "1 month ago",
                "x": "31"
            }, {
                "label": "Today",
                "x": "60"
            }]
        }],
        "dataset": [{
            "data": [{
                "open": "18.74",
                "high": "19.16",
                "low": "18.67 ",
                "close": "18.99",
                "x": "1",
                "volume": "4991285"
            }, {
                "open": "18.74",
                "high": "19.06",
                "low": "18.54",
                "close": "18.82",
                "x": "2",
                "volume": "3615889"
            }, {
                "open": "19.21",
                "high": "19.3",
                "low": "18.59 ",
                "close": "18.65",
                "x": "3",
                "volume": "4749586"
            }, {
                "open": "19.85",
                "high": "19.86",
                "low": "19.12",
                "close": "19.4",
                "x": "4",
                "volume": "4366740"
            }, {
                "open": "20.19",
                "high": "20.21",
                "low": "19.57",
                "close": "19.92",
                "x": "5",
                "volume": "3982709"
            }, {
                "open": "20.47",
                "high": "20.64",
                "low": "20.15",
                "close": "20.16",
                "x": "6",
                "volume": "2289403"
            }, {
                "open": "20.36",
                "high": "20.52",
                "low": "20.29",
                "close": "20.48",
                "x": "7",
                "volume": "1950919"
            }, {
                "open": "20.21",
                "high": "20.25",
                "low": "19.91",
                "close": "20.15",
                "x": "8",
                "volume": "2391070"
            }, {
                "open": "19.46",
                "high": "20.54",
                "low": "19.46",
                "close": "20.22",
                "x": "9",
                "volume": "4548422"
            }, {
                "open": "19.24",
                "high": "19.5",
                "low": "19.13",
                "close": "19.44",
                "x": "10",
                "volume": "1889811"
            }, {
                "open": "19.25",
                "high": "19.41",
                "low": "18.99",
                "close": "19.22",
                "x": "11",
                "volume": "2543355"
            }, {
                "open": "18.85",
                "high": "19.45",
                "low": "18.8",
                "close": "19.24",
                "x": "12",
                "volume": "2134393"
            }, {
                "open": "18.97",
                "high": "19.01",
                "low": "18.68",
                "close": "18.95",
                "x": "13",
                "volume": "1740852"
            }, {
                "open": "18.69",
                "high": "19",
                "low": "18.35",
                "close": "18.97",
                "x": "14",
                "volume": "2701392"
            }, {
                "open": "19.02",
                "high": "19.1",
                "low": "18.68",
                "close": "18.7",
                "x": "15",
                "volume": "2198755"
            }, {
                "open": "19.29",
                "high": "19.38",
                "low": "18.88",
                "close": "19.05",
                "x": "16",
                "volume": "2464958"
            }, {
                "open": "18.64",
                "high": "19.35",
                "low": "18.53",
                "close": "19.33",
                "x": "17",
                "volume": "2962994"
            }, {
                "open": "18.14",
                "high": "18.58",
                "low": "18.08",
                "close": "18.52",
                "x": "18",
                "volume": "1964932"
            }, {
                "open": "18.49",
                "high": "18.92",
                "low": "18.19",
                "close": "18.26",
                "x": "19",
                "volume": "3013102"
            }, {
                "open": "18.71",
                "high": "18.84",
                "low": "18",
                "close": "18.51",
                "x": "20",
                "volume": "4435894"
            }, {
                "open": "19.17",
                "high": "19.35",
                "low": "18.61",
                "close": "18.66",
                "x": "21",
                "volume": "3245851"
            }, {
                "open": "19.12",
                "high": "19.41",
                "low": "18.92",
                "close": "19.2",
                "x": "22",
                "volume": "2259792"
            }, {
                "open": "19.43",
                "high": "19.58",
                "low": "19.16",
                "close": "19.33",
                "x": "23",
                "volume": "3531327"
            }, {
                "open": "19.72",
                "high": "19.81",
                "low": "19.04",
                "close": "19.27",
                "x": "24",
                "volume": "5834733"
            }, {
                "open": "19.7",
                "high": "19.94",
                "low": "19.49",
                "close": "19.77",
                "x": "25",
                "volume": "2009987"
            }, {
                "open": "19.84",
                "high": "19.98",
                "low": "19.39",
                "close": "19.88",
                "x": "26",
                "volume": "2767592"
            }, {
                "open": "20.71",
                "high": "20.73",
                "low": "19.16",
                "close": "19.63",
                "x": "27",
                "volume": "673358"
            }, {
                "open": "21.14",
                "high": "21.14",
                "low": "20.55",
                "close": "20.65",
                "x": "28",
                "volume": "3164006"
            }, {
                "open": "21.5",
                "high": "21.86",
                "low": "21.2",
                "close": "21.33",
                "x": "29",
                "volume": "7986466"
            }, {
                "open": "20.45",
                "high": "21.08",
                "low": "20.1",
                "close": "20.56",
                "x": "30",
                "volume": "5813040"
            }, {
                "open": "20.07",
                "high": "20.69",
                "low": "20.04",
                "close": "20.36",
                "x": "31",
                "volume": "3440002"
            }, {
                "open": "19.88",
                "high": "20.11",
                "low": "19.51",
                "close": "20.03",
                "x": "32",
                "volume": "2779171"
            }, {
                "open": "19.76",
                "high": "20.13",
                "low": "19.65",
                "close": "19.88",
                "x": "33",
                "volume": "2918115"
            }, {
                "open": "19.77",
                "high": "19.97",
                "low": "19.27",
                "close": "19.9",
                "x": "34",
                "volume": "3850357"
            }, {
                "open": "19.43",
                "high": "19.72",
                "low": "18.88",
                "close": "19.5",
                "x": "35",
                "volume": "5047378"
            }, {
                "open": "19.69",
                "high": "19.84",
                "low": "19.17",
                "close": "19.43",
                "x": "36",
                "volume": "3479017"
            }, {
                "open": "19.59",
                "high": "20.02",
                "low": "19.02",
                "close": "19.41",
                "x": "37",
                "volume": "5749874"
            }, {
                "open": "20.95",
                "high": "21.09",
                "low": "19.64",
                "close": "19.83",
                "x": "38",
                "volume": "6319111"
            }, {
                "open": "20.52",
                "high": "21.03",
                "low": "20.45",
                "close": "21",
                "x": "39",
                "volume": "4412413"
            }, {
                "open": "20.36",
                "high": "20.96",
                "low": "20.2",
                "close": "20.44",
                "x": "40",
                "volume": "5948318"
            }, {
                "open": "21.45",
                "high": "21.48",
                "low": "19.63",
                "close": "20.3",
                "x": "41",
                "volume": "11935440"
            }, {
                "open": "23.49",
                "high": "23.57",
                "low": "21.12",
                "close": "21.63",
                "x": "42",
                "volume": "10523910"
            }, {
                "open": "24.04",
                "high": "24.21",
                "low": "23.04",
                "close": "23.28",
                "x": "43",
                "volume": "3843797"
            }, {
                "open": "23.6",
                "high": "24.065",
                "low": "23.51",
                "close": "23.94",
                "x": "44",
                "volume": "3691404"
            }, {
                "open": "22.87",
                "high": "23.49",
                "low": "22.86",
                "close": "23.48",
                "x": "45",
                "volume": "3387393"
            }, {
                "open": "22.35",
                "high": "22.89",
                "low": "22.35",
                "close": "22.74",
                "x": "46",
                "volume": "3737330"
            }, {
                "open": "22.11",
                "high": "22.5",
                "low": "21.9",
                "close": "22.24",
                "x": "47",
                "volume": "4630397"
            }, {
                "open": "22.58",
                "high": "22.80",
                "low": "22.25",
                "close": "22.42",
                "x": "48",
                "volume": "3024711"
            }, {
                "open": "23.54",
                "high": "23.76",
                "low": "22.6",
                "close": "22.68",
                "x": "49",
                "volume": "3984508"
            }, {
                "open": "23.66",
                "high": "24.09",
                "low": "23.09",
                "close": "23.46",
                "x": "50",
                "volume": "3420204"
            }, {
                "open": "24.36",
                "high": "24.42",
                "low": "22.90",
                "close": "23.6",
                "x": "51",
                "volume": "5151096"
            }, {
                "open": "24.34",
                "high": "24.6",
                "low": "23.73",
                "close": "24.15",
                "x": "52",
                "volume": "5999654"
            }, {
                "open": "23.38",
                "high": "24.8",
                "low": "23.36",
                "close": "24.1",
                "x": "53",
                "volume": "5382049"
            }, {
                "open": "23.76",
                "high": "23.84",
                "low": "23.23",
                "close": "23.47",
                "x": "54",
                "volume": "3508510"
            }, {
                "open": "23.64",
                "high": "23.94",
                "low": "23.48",
                "close": "23.76",
                "x": "55",
                "volume": "2718428"
            }, {
                "open": "23.99",
                "high": "24.18",
                "low": "23.59",
                "close": "23.66",
                "x": "56",
                "volume": "2859391"
            }, {
                "open": "23.32",
                "high": "24.26",
                "low": "23.32",
                "close": "23.79",
                "x": "57",
                "volume": "4138618"
            }, {
                "open": "24.08",
                "high": "24.4",
                "low": "23.26",
                "close": "23.39",
                "x": "58",
                "volume": "4477478"
            }, {
                "open": "22.84",
                "high": "23.96",
                "low": "22.83",
                "close": "23.88",
                "x": "59",
                "volume": "4822378"
            }, {
                "open": "23.38",
                "high": "23.78",
                "low": "22.94",
                "close": "23.01",
                "x": "60",
                "volume": "4037312"
            }, {
                "open": "23.97",
                "high": "23.99",
                "low": "23.14",
                "close": "23.32",
                "x": "61",
                "volume": "4879546"
            }]
        }]
    }
}
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the candlestick chart.

In the chart above, the price chart is rendered in the first half of the candlestick chart while the volume chart is rendered in the second half.

A candlestick chart is widely used for applications that require analysis of equity and commodity prices. It allows you to show the opening price, closing price, highest trading price, lowest trading price, and the trade volume on a single chart.

Candlestick chart has both x-axis and y-axis as numeric. This chart does not directly accept dates for the data and category labels. Instead, it accepts an x-value for each data. This allows for greater flexibility as you can plot days, hours, weeks, months, years, etc. using this chart.

Converting your dates into x-values is very simple. Using your server side script, select the first date in your chart as base date. Now, use date difference function (with respect to this base date) to get the x-values for each date. So, if you want to show daily quotes on the chart, you can use "day" as the date difference parameter. Similarly, if you want to show weekly quotes, you can use "weeks" as the date difference parameter and so on.

Now, let's customize the appearance and properties of the charts.

Set a chart type for the Price chart

You can render the price chart using a candle chart, a bar chart, or a line chart. To render the price chart as per your requirement, set plotPriceAs attribute as candlestick, bar or line.

Refer to the code given below:

{
  "chart": {
    "plotPriceAs" : "line"
  }
}

A candlestick chart with the price chart rendered as a line chart looks like this:

FusionCharts will load here..

Click here to edit the candlestick chart.

Set the Price to Plot for the Line Price chart

For a price chart rendered as a line chart, you can decide whether you want to plot the chart w.r.t. the opening price or the closing price, using the plotClosingPrice attribute.

As discussed before, high and low price values are not required for the line chart.

Refer to the code given below:

{
  "chart": {
    "plotClosingPrice" : "0"
  }
}

A candlestick chart looks like:

FusionCharts will load here..

Click here to edit the candlestick chart.

Show/Hide the Volume chart

The volume chart in a candlestick chart can be set as hidden by specifying the showVolumeChart attribute as 0. The default value for this attribute is 1.

Refer to the code given below:

{
  "chart": {
    "showVolumeChart" : "0"
  }
}

A candlestick chart rendered with the volume chart hidden looks like this:

FusionCharts will load here..

Click here to edit the candlestick chart.

You can also customize the height of the volume chart by volumeHeightPercent attribute. The default value is 40% and you can choose any value between 20% to 80%.

Configure Trend-Sets and Trend-Lines

Trend-Sets

For a candlestick chart, you can plot overlay lines on the existing data plots. These lines, known as trend-sets, can be effectively used to show technical indicators.

To add cosmetics to the trend-sets, take a look at the following attributes and their usage:

  • Specify the trendSetColor attribute to set the hex code of the color used to render all trend-sets on the chart.

  • Specify the trendSetAlpha attribute to set the transparency for all trend-sets on the chart. This attribute takes values between 0 (transparent) and 100 (opaque).

  • Specify the trendSetThickness attribute to set the thickness for all trend-sets on the chart.

  • Specify the trendSetDashed attribute as 1, to set the trend-sets as dashed. The default value of this attribute is 0.

  • Specify the length of the dashed trend-sets using trendSetDashLen attribute.

  • trendSetDashGap attribute sets the gap between each dash, if the trend-sets are rendered as dashed.

Refer to the code given below:

{
  "chart": {
    "trendSetColor" : "0",
    "trendSetAlpha" : "0",
    "trendSetThickness" : "0",
    "trendSetDashed" : "0",
    "trendSetDashLen" : "0",
    "trendSetDashGap" : "0"
  }
}

To customize a specific trend-set, follow the steps given below:

  • name attribute sets the name of a trend-set. This attribute belongs to the trendset object.

  • Specify the color attribute under trendset object to set the hex code of the color that will be used to render a specific trend-set.

  • Specify the alpha attribute under trendset object to set the transparency of a specific trend-set.

  • Specify the thickness attribute under trendset object to set the thickness of a specific trend-set.

  • Set the includeInLegend attribute under trenset object to specify whether the name of a trend-set will be included in the legend. Setting this attribute to 0 will not show the trend-set in the legend, whereas the default value for this attribute is 1.

  • Specify the dashed attribute under trendset object as 1, to set the trend-sets as dashed for a particular trend-set. The default value of this attribute is 0.

  • Specify the length of the dashed for a particular trend-sets using dashlen attribute.

  • dashGap attribute sets the gap between each dash for a particular trend-set, if the trend-sets are rendered as dashed.

Refer to the code below:

{
    "chart": {
        ...
    },
    "data": [],
    "trendset": [{
        "name": "High trends",
        "color": "#0000CC",
        "alpha": "1",
        "thickness": "1",
        "includeInLegend": "1",
        "dashed": "1",
        "dashlen": "3",
        "dashGap": "4"
    }]
}

A candlestick chart rendered with a trend-set looks like this:

FusionCharts will load here..

Click here to edit the candlestick chart.

Each individual object in the set object under trendset can have two attributes: x and value. x represents the x-axis index where this value should be plotted.