Composite Y Axis Heights

When you use multiple charts in a CompositeChart, you can set multiple Y axes, and set the height of each Y axis. Valid values for the height option include:

null or undefined (default)
auto
number value

Here is an example how how to use the CandleStickChart in a CompositeChart. Notice in the axis code that the Y axis is an array containing two axes. The second axis is set to a hard-coded height value of 160 pixels, while the first is set to automatically fill the rest of the defined chart area.

CompositeChart	Copy Code
<!DOCTYPE HTML> <HTML> <head> <!-- #Region "references" --> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" /> <!--RequireJs--> <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script> <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> <!-- #End Region --> <!-- #Region "js" --> <script id="scriptInit" type="text/javascript"> require(["wijmo.wijcompositechart"], function () { $(document).ready(function () { var data = { 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] }; var data1 = { x: data.x, y: data.low }; var data2 = { x: data.x, y: data.high }; $("#wijcandlestickchartDefault").wijcompositechart({ textStyle: { "font-size": "13px", "font-family": '"Segoe UI", Arial, sans-serif' }, header: { text: "Stock History" }, legend: { visible: true, compass: "north", orientation: "horizontal" }, showChartLabels: false, hint: { enable: false }, 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: [{ height: "auto", compass: "east", text: "Stock Price", textStyle: { "font-weight": "normal" }, alignment: "far"//axis text aligned away from xy intersection }, { height: 160, compass: "east", text: "Stock Price", textStyle: { "font-weight": "normal" }, alignment: "far"//axis text aligned away from xy intersection }] }, seriesList: [{ type: "ohlc", label: "MSFT", legendEntry: true, data: data, yAxis: 0 }, { type: "line", label: "High", legendEntry: true, yAxis: 1, data: data2 }, { type: "column", label: "Low", legendEntry: true, yAxis: 1, data: data1 }] }); }); }); </script> <!-- #End Region --> </head> <body> <!-- #Region "markup" --> <div id="wijcandlestickchartDefault" style="width: 756px; height: 475px;"> </div> <!-- #End Region --> </body> </HTML>

CompositeChart

Copy Code

<!DOCTYPE HTML>
<HTML>
<head>

<!-- #Region "references" -->
<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" />

<!--RequireJs-->
<script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>
<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>
<!-- #End Region -->

<!-- #Region "js" -->
    <script id="scriptInit" type="text/javascript">
        require(["wijmo.wijcompositechart"], function () {
            $(document).ready(function () {
                var data = {
                    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]
                };

                var data1 = {
                    x: data.x,
                    y: data.low
                };

                var data2 = {
                    x: data.x,
                    y: data.high
                };

                $("#wijcandlestickchartDefault").wijcompositechart({
                    textStyle: {
                        "font-size": "13px",
                        "font-family": '"Segoe UI", Arial, sans-serif'
                    },
                    header: {
                        text: "Stock History"
                    },
                    legend: {
                        visible: true,
                        compass: "north",
                        orientation: "horizontal"
                    },
                    showChartLabels: false,
                    hint: {
                        enable: false
                    },
                    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: [{
                            height: "auto",
                            compass: "east",
                            text: "Stock Price",
                            textStyle: {
                                "font-weight": "normal"
                            },
                            alignment: "far"//axis text aligned away from xy intersection
                        }, {
                            height: 160,
                            compass: "east",
                            text: "Stock Price",
                            textStyle: {
                                "font-weight": "normal"
                            },
                            alignment: "far"//axis text aligned away from xy intersection
                        }]
                    },
                    seriesList: [{
                        type: "ohlc",
                        label: "MSFT",
                        legendEntry: true,
                        data: data,
                        yAxis: 0
                    },
                    {
                        type: "line",
                        label: "High",
                        legendEntry: true,
                        yAxis: 1,
                        data: data2
                    },
                    {
                        type: "column",
                        label: "Low",
                        legendEntry: true,
                        yAxis: 1,
                        data: data1
                    }]
                });
            });
        });
    </script>
<!-- #End Region -->

</head>
<body>

<!-- #Region "markup" -->
    <div id="wijcandlestickchartDefault" style="width: 756px; height: 475px;">
    </div>
<!-- #End Region -->

</body>
</HTML>

Widgets

CompositeChart

CandlestickChart