Add Indicator Lines

Building on the Quick Start example, you can add an indicator line to a candlestick when the user clicks it using the indicator option. The indicator line goes through the candlestick to the axis, so that it is easier to see the exact date on which it falls. The tooltip (hint) for the candlestick rises to the top of the indicator line.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which sets the indicator option's visible attribute to true.

Script	Copy Code
<script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min" } }); </script> <script id="scriptInit" type="text/javascript"> require(["wijmo.wijcandlestickchart"], function () { $(document).ready(function () { var myData = { x: [new Date('12/1/2011'), new Date('12/2/2011'), new Date("12/5/2011"), new Date("12/6/2011"), new Date("12/7/2011"), new Date("12/8/2011"), new Date("12/9/2011"), new Date("12/12/2011"), new Date("12/13/2011"), new Date("12/14/2011"), new Date("12/15/2011"), new Date("12/16/2011"), new Date("12/19/2011"), new Date("12/20/2011"), new Date("12/21/2011"), new Date("12/22/2011"), new Date("12/23/2011"), new Date("12/26/2011"), new Date("12/27/2011"), new Date("12/28/2011"), new Date("12/29/2011"), new Date("12/30/2011"), new Date('1/2/2012'), new Date('1/3/2012'), new Date('1/4/2012'), new Date("1/5/2012"), new Date("1/6/2012"), new Date("1/9/2012"), new Date("1/10/2012"), new Date("1/11/2012"), new Date("1/12/2012"), new Date("1/13/2012"), new Date("1/16/2012"), new Date("1/17/2012"), new Date("1/18/2012"), new Date("1/19/2012"), new Date("1/20/2012"), new Date("1/23/2012"), new Date("1/24/2012"), new Date("1/25/2012"), new Date("1/26/2012"), new Date("1/27/2012"), new Date("1/30/2012"), new Date("1/31/2012")], high: [10, 12, 11, 14, 16, 20, 18, 17, 17.5, 20, 22, 21, 22.5, 20, 21, 20.8, 20, 19, 18, 17, 16, 15, 15, 14, 13, 12, 11.5, 10.9, 10, 9, 9.5, 10, 12, 11, 14, 16, 20, 18, 17, 17.5, 20, 22, 21, 22.5], low: [7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10, 12.2, 12, 16, 15.5, 16, 15, 16, 16.5, 16, 16, 15, 14.5, 14, 13.5, 13, 12, 11, 11, 10, 9, 8, 7.5, 7.9, 7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10, 12.2, 12, 16, 15.5, 16], open: [8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5, 17.8, 18.6, 19.8, 18, 16.9, 15.6, 14.7, 14.2, 13.9, 13.2, 12.8, 11.7, 11.2, 10.5, 9.4, 8.9, 8.4, 8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2], close: [8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5, 17.8, 18.6, 19.8, 18, 16.9, 15.6, 14.7, 14.2, 13.9, 13.2, 12.8, 11.7, 11.2, 10.5, 9.4, 8.9, 8.4, 8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5] }; $("#wijcandlestickchartDefault").wijcandlestickchart({ textStyle: { "font-size": "13px", "font-family": '"Segoe UI", Arial, sans-serif' }, header: { text: "Stock History" }, legend: { visible: true, compass: "north", orientation: "horizontal" }, hint: { content: function () { return this.label + ' - ' + Globalize.format(this.x, "d") + '\n High:' + this.high + '\n Low:' + this.low + '\n Open:' + this.open + '\n Close:' + this.close; }, contentStyle: { "font-size": "12px", "font-family": '"Segoe UI", Arial, sans-serif' }, style: { fill: "#444444", stroke: "none" } }, indicator: { visible: true }, axis: { x: { textStyle: { "font-weight": "normal" }, tickMajor: { position: "outside",//Position tick marks outside of the axis line style: { stroke: "#999999"//Make the tick marks match axis line color } } }, y: { text: "Stock Price", textStyle: { "font-weight": "normal" }, alignment: "far"//axis text aligned away from xy intersection } }, seriesList: [{ label: "MSFT", legendEntry: true, data: myData }], seriesStyles: [{ highLow: {fill: "#88bde6"} }] }); }); }); </script>

Script

Copy Code

<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
    });
</script>
    <script id="scriptInit" type="text/javascript">
        require(["wijmo.wijcandlestickchart"], function () {
            $(document).ready(function () {
                var myData = {
                    x: [new Date('12/1/2011'), new Date('12/2/2011'), new Date("12/5/2011"), new Date("12/6/2011"), new Date("12/7/2011"),
                        new Date("12/8/2011"), new Date("12/9/2011"), new Date("12/12/2011"), new Date("12/13/2011"), new Date("12/14/2011"),
                        new Date("12/15/2011"), new Date("12/16/2011"), new Date("12/19/2011"), new Date("12/20/2011"), new Date("12/21/2011"),
                        new Date("12/22/2011"), new Date("12/23/2011"), new Date("12/26/2011"), new Date("12/27/2011"), new Date("12/28/2011"),
                        new Date("12/29/2011"), new Date("12/30/2011"), new Date('1/2/2012'), new Date('1/3/2012'), new Date('1/4/2012'),
                        new Date("1/5/2012"), new Date("1/6/2012"), new Date("1/9/2012"), new Date("1/10/2012"), new Date("1/11/2012"),
                        new Date("1/12/2012"), new Date("1/13/2012"), new Date("1/16/2012"), new Date("1/17/2012"), new Date("1/18/2012"),
                        new Date("1/19/2012"), new Date("1/20/2012"), new Date("1/23/2012"), new Date("1/24/2012"), new Date("1/25/2012"),
                        new Date("1/26/2012"), new Date("1/27/2012"), new Date("1/30/2012"), new Date("1/31/2012")],

                    high: [10, 12, 11, 14, 16, 20, 18, 17, 17.5, 20, 22, 21, 22.5, 20, 21, 20.8, 20, 19, 18, 17, 16, 15, 15, 14, 13, 12,
                        11.5, 10.9, 10, 9, 9.5, 10, 12, 11, 14, 16, 20, 18, 17, 17.5, 20, 22, 21, 22.5],
                    low: [7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10, 12.2, 12, 16, 15.5, 16, 15, 16, 16.5, 16, 16, 15, 14.5, 14, 13.5, 13, 12, 11,
                        11, 10, 9, 8, 7.5, 7.9, 7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10, 12.2, 12, 16, 15.5, 16],
                    open: [8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5, 17.8, 18.6, 19.8, 18, 16.9, 15.6, 14.7, 14.2, 13.9, 13.2,
                        12.8, 11.7, 11.2, 10.5, 9.4, 8.9, 8.4, 8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2],
                    close: [8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5, 17.8, 18.6, 19.8, 18, 16.9, 15.6, 14.7, 14.2, 13.9, 13.2,
                        12.8, 11.7, 11.2, 10.5, 9.4, 8.9, 8.4, 8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5]
                };

                $("#wijcandlestickchartDefault").wijcandlestickchart({
                    textStyle: {
                        "font-size": "13px",
                        "font-family": '"Segoe UI", Arial, sans-serif'
                    },
                    header: {
                        text: "Stock History"
                    },
                    legend: {
                        visible: true,
                        compass: "north",
                        orientation: "horizontal"
                    },
                    hint: {
                        content: function () {
                            return this.label + ' - ' +
                            Globalize.format(this.x, "d") +
                            '\n High:' + this.high +
                            '\n Low:' + this.low +
                            '\n Open:' + this.open +
                            '\n Close:' + this.close;
                        },
                        contentStyle: {
                            "font-size": "12px",
                            "font-family": '"Segoe UI", Arial, sans-serif'
                        },
                        style: {
                            fill: "#444444",
                            stroke: "none"
                        }
                    },
                    indicator: {
                        visible: true
                    },
                    axis: {
                        x: {
                            textStyle: {
                                "font-weight": "normal"
                            },
                            tickMajor: {
                                position: "outside",//Position tick marks outside of the axis line
                                style: {
                                    stroke: "#999999"//Make the tick marks match axis line color
                                }
                            }
                        },
                        y: {
                            text: "Stock Price",
                            textStyle: {
                                "font-weight": "normal"
                            },
                            alignment: "far"//axis text aligned away from xy intersection
                        }
                    },
                    seriesList: [{
                        label: "MSFT",
                        legendEntry: true,
                        data: myData
                    }],
                    seriesStyles: [{
                        highLow: {fill: "#88bde6"}
                    }]
                });

            });
        });
    </script>

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the widget.
Save your HTML file and open it in a browser. The widget appears like the one in the live widget below. Click a candlestick to see the indicator line appear.

Reference

indicator Option

wijcandlestickchart API