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.

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": { "caption": "Daily Stock Price HRYS", "subCaption": "Last 2 months", "numberPrefix": "$", "vNumberPrefix": " ", "pYAxisName": "Price", "vYAxisName": "Volume (In Millions)", "bgColor": "#ffffff", "showBorder": "0", "canvasBgColor": "#ffffff", "showCanvasBorder": "0", "showAlternateHGridColor": "0", "baseFontColor": "#333333", "baseFont": "Helvetica Neue,Arial", "captionFontSize": "14", "subcaptionFontSize": "14", "subcaptionFontBold": "0", "toolTipColor": "#ffffff", "toolTipBorderThickness": "0", "toolTipBgColor": "#000000", "toolTipBgAlpha": "80", "toolTipBorderRadius": "2", "toolTipPadding": "5", "divlineAlpha": "100", "divlineColor": "#999999", "divlineThickness": "1", "divLineDashed": "1", "divLineDashLen": "1", "divLineGapLen": "1" }, "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": {
        "caption": "Daily Stock Price HRYS",
        "subCaption": "Last 2 months",
        "numberPrefix": "$",
        "vNumberPrefix": " ",
        "pYAxisName": "Price",
        "vYAxisName": "Volume (In Millions)",
        "bgColor": "#ffffff",
        "showBorder": "0",
        "canvasBgColor": "#ffffff",
        "showCanvasBorder": "0",
        "showAlternateHGridColor": "0",
        "baseFontColor": "#333333",
        "baseFont": "Helvetica Neue,Arial",
        "captionFontSize": "14",
        "subcaptionFontSize": "14",
        "subcaptionFontBold": "0",
        "toolTipColor": "#ffffff",
        "toolTipBorderThickness": "0",
        "toolTipBgColor": "#000000",
        "toolTipBgAlpha": "80",
        "toolTipBorderRadius": "2",
        "toolTipPadding": "5",
        "divlineAlpha": "100",
        "divlineColor": "#999999",
        "divlineThickness": "1",
        "divLineDashed": "1",
        "divLineDashLen": "1",
        "divLineGapLen": "1"
    },
    "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"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'candlestick',
    renderAt: 'chart-container',
    
    width: '600',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Daily Stock Price HRYS",
            "subCaption": "Last 2 months",
            "numberPrefix": "$",
            "vNumberPrefix": " ",
            "pYAxisName": "Price",
            "vYAxisName": "Volume (In Millions)",
            "bgColor": "#ffffff",
            "showBorder": "0",
            "canvasBgColor": "#ffffff",
            "showCanvasBorder": "0",
            "showAlternateHGridColor": "0",
            "baseFontColor": "#333333",
            "baseFont": "Helvetica Neue,Arial",
            "captionFontSize": "14",
            "subcaptionFontSize": "14",
            "subcaptionFontBold": "0",
            "toolTipColor": "#ffffff",
            "toolTipBorderThickness": "0",
            "toolTipBgColor": "#000000",
            "toolTipBgAlpha": "80",
            "toolTipBorderRadius": "2",
            "toolTipPadding": "5",
            "divlineAlpha": "100",
            "divlineColor": "#999999",
            "divlineThickness": "1",
            "divLineDashed": "1",
            "divLineDashLen": "1",
            "divLineGapLen": "1",
        },
        "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"
            }]
        }]
    }
}
);
    fusioncharts.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.

Was this article helpful to you ?