Stock and Volume Chart with Blended Scales and Interactive Crosshairs

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/T7JINBBA

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .chart--container {
      width: 100%;
      height: 100%;
      min-height: 530px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let chartData = [
      [1546434060000, [108.1, 109.135, 107.7304, 108.97]], // 01/02/19
      [1546520460000, [108.48, 108.65, 105.9436, 106.33]], // 01/03/19
      [1546606860000, [107.94, 110.75, 107.25, 109.61]], // 01/04/19
      [1546866060000, [109.91, 111.4, 109.3, 110.56]], // 01/07/19
      [1546952460000, [111.8, 112.56, 111.17, 111.42]], // 01/08/19

      [1547038860000, [111.8, 112.8, 111.56, 112.67]], // 01/09/19
      [1547125260000, [111.99, 112.91, 111.5, 112.8]], // 01/10/19
      [1547211660000, [112.18, 112.92, 111.73, 112.65]], // 01/11/19
      [1547470860000, [111.65, 112.695, 111.43, 112.42]], // 01/14/19
      [1547557260000, [112.3, 113.18, 110.61, 111.76]], // 01/15/19

      [1547643660000, [111.45, 112.01, 110.81, 110.91]], // 01/16/19
      [1547730060000, [110.72, 111.255, 110.16, 111.01]], // 01/17/19
      [1547816460000, [111.86, 111.93, 110.8286, 111.04]], // 01/18/19
      [1548162060000, [110.62, 111.33, 109.75, 110.6]], // 01/22/19
      [1548248460000, [111.19, 111.84, 110.0, 111.12]], // 01/23/19

      [1548334860000, [111.0, 111.11, 109.93, 110.55]], // 01/24/19
      [1548421260000, [111.465, 111.5, 110.66, 111.09]], // 01/25/19
      [1548680460000, [110.76, 110.99, 109.95, 110.81]], // 01/28/19
      [1548766860000, [110.65, 110.9286, 110.0046, 110.9]], // 01/29/19
      [1548853260000, [110.3, 110.58, 108.96, 110.13]], // 01/30/19

      [1548939660000, [110.1, 111.54, 110.01, 111.52]], // 01/31/19
      [1549026060000, [111.97, 112.05, 110.93, 111.3]], // 02/01/19
      [1549285260000, [111.41, 111.98, 110.68, 111.8]], // 02/04/19
      [1549371660000, [112.02, 112.74, 111.45, 112.66]], // 02/05/19
      [1549458060000, [113.85, 113.92, 111.07, 111.41]], // 02/06/19

      [1549544460000, [111.05, 111.11, 109.81, 110.95]], // 02/07/19
      [1549630860000, [110.46, 111.54, 110.0641, 111.51]], // 02/08/19
      [1549890060000, [111.77, 111.81, 109.25, 109.44]], // 02/11/19
      [1549976460000, [110.21, 110.83, 109.15, 109.2]], // 02/12/19
      [1550062860000, [109.24, 110.48, 109.23, 110.2]], // 02/13/19

      [1550149260000, [109.85, 111.495, 109.54, 110.66]], // 02/14/19
      [1550235660000, [111.4, 112.6325, 111.03, 112.59]], // 02/15/19
      [1550581260000, [112.91, 113.77, 112.83, 113.51]], // 02/19/19
      [1550667660000, [113.6, 114.085, 113.285, 113.68]], // 02/20/19
      [1550754060000, [113.4, 114.54, 112.87, 114.29]], // 02/21/19

      [1550840460000, [114.63, 115.77, 113.95, 115.25]], // 02/22/19
      [1551099660000, [115.62, 115.8, 113.46, 113.59]], // 02/25/19
      [1551186060000, [113.65, 114.01, 112.85, 113.5]], // 02/26/19
      [1551272460000, [113.095, 113.5099, 112.46, 112.78]], // 02/27/19
      [1551358860000, [112.9, 113.43, 112.75, 112.84]], // 02/28/19

      [1551445260000, [113.45, 114.4399, 113.45, 114.01]], // 03/01/19
      [1551704460000, [114.42, 114.42, 113.0944, 114.33]], // 03/04/19
      [1551790860000, [114.23, 114.54, 113.76, 114.0]], // 03/05/19
      [1551877260000, [114.0, 115.05, 114.0, 114.85]], // 03/06/19
      [1551963660000, [114.85, 114.9, 113.47, 114.01]], // 03/07/19

      [1552050060000, [113.46, 113.84, 112.9, 113.81]], // 03/08/19
      [1552309260000, [114.04, 115.0, 114.03, 114.75]], // 03/11/19
      [1552395660000, [114.72, 115.3, 114.04, 114.73]], // 03/12/19
      [1552482060000, [114.84, 114.85, 113.72, 114.09]], // 03/13/19
      [1552568460000, [114.12, 114.77, 113.93, 114.48]], // 03/14/19

      [1552654860000, [114.5, 115.48, 113.68, 114.96]], // 03/15/19
      [1552914060000, [113.03, 114.0, 112.46, 113.12]], // 03/18/19
      [1553000460000, [112.95, 113.7085, 109.8, 110.0]], // 03/19/19
      [1553086860000, [110.31, 110.88, 108.05, 109.99]], // 03/20/19
      [1553173260000, [110.1, 110.15, 108.37, 108.66]], // 03/21/19

      [1553259660000, [108.33, 109.0, 107.51, 108.23]], // 03/22/19
      [1553518860000, [108.49, 109.07, 107.32, 107.79]], // 03/25/19
      [1553605260000, [108.4, 110.34, 108.27, 110.14]], // 03/26/19
      [1553691660000, [110.45, 111.09, 109.7329, 110.28]], // 03/27/19
      [1553778060000, [110.6, 111.27, 110.24, 110.71]], // 03/28/19

      [1553864460000, [111.56, 111.6, 110.39, 111.03]], // 03/29/19
      [1554123660000, [111.59, 112.865, 111.38, 112.51]], // 04/01/19
      [1554210060000, [113.15, 113.305, 111.92, 111.96]], // 04/02/19
      [1554296460000, [112.7, 113.11, 112.21, 112.52]], // 04/03/19
      [1554382860000, [113.24, 114.8569, 113.03, 114.75]], // 04/04/19

      [1554469260000, [114.97, 115.13, 114.3061, 115.0]], // 04/05/19
      [1554728460000, [115.0, 115.83, 114.635, 114.96]], // 04/08/19
      [1554814860000, [115.61, 117.1641, 115.28, 116.86]], // 04/09/19
      [1554901260000, [117.58, 118.03, 116.28, 117.16]], // 04/10/19
      [1554987660000, [117.73, 117.86, 116.32, 116.6]], // 04/11/19

      [1555074060000, [127.91, 130.9, 126.36, 130.06]], // 04/12/19
      [1555333260000, [131.05, 132.7, 129.79, 132.04]], // 04/15/19
      [1555419660000, [131.75, 132.1299, 129.56, 129.9]], // 04/16/19
      [1555506060000, [129.81, 132.36, 129.28, 131.75]], // 04/17/19
      [1555592460000, [131.77, 132.87, 131.11, 132.45]], // 04/18/19

      [1555938060000, [131.9, 132.2, 131.0325, 131.68]], // 04/22/19
      [1556024460000, [133.39, 134.24, 132.65, 133.36]], // 04/23/19
      [1556110860000, [133.11, 135.75, 132.72, 135.1]], // 04/24/19
      [1556197260000, [135.36, 138.8799, 134.84, 137.24]], // 04/25/19
      [1556283660000, [138.7, 140.04, 137.51, 139.92]], // 04/26/19

      [1556542860000, [142.19, 142.37, 137.61, 139.3]], // 04/29/19
      [1556629260000, [139.12, 139.39, 136.03, 136.97]], // 04/30/19
      [1556715660000, [137.49, 138.17, 136.235, 136.38]], // 05/01/19
      [1556802060000, [135.38, 135.69, 132.38, 134.14]], // 05/02/19
      [1556888460000, [135.22, 135.31, 133.78, 134.33]], // 05/03/19

      [1557147660000, [132.54, 135.33, 132.3, 135.0]], // 05/06/19
      [1557234060000, [135.35, 135.97, 132.76, 133.44]], // 05/07/19
      [1557320460000, [133.5, 135.7, 133.31, 134.99]], // 05/08/19
      [1557406860000, [135.03, 136.48, 132.84, 133.59]], // 05/09/19
      [1557493260000, [133.01, 134.32, 131.23, 134.04]], // 05/10/19

      [1557752460000, [131.5, 132.66, 130.55, 131.34]], // 05/13/19
      [1557838860000, [133.52, 134.66, 132.05, 133.2]], // 05/14/19
      [1557925260000, [132.55, 135.21, 132.04, 134.68]], // 05/15/19
      [1558011660000, [135.29, 136.4, 134.81, 135.5]], // 05/16/19
      [1558098060000, [134.26, 135.98, 134.03, 135.04]], // 05/17/19

      [1558357260000, [134.25, 134.4, 133.25, 133.91]], // 05/20/19
      [1558443660000, [134.57, 134.57, 133.11, 134.09]], // 05/21/19
      [1558530060000, [133.82, 134.17, 133.39, 133.85]], // 05/22/19
      [1558616460000, [132.71, 133.55, 131.95, 132.73]], // 05/23/19
      [1558702860000, [133.1, 133.29, 132.22, 132.79]], // 05/24/19

      [1559048460000, [133.21, 134.04, 132.59, 132.62]], // 05/28/19
      [1559134860000, [131.96, 132.15, 130.7783, 131.57]], // 05/29/19
      [1559221260000, [131.88, 132.68, 131.335, 132.2]], // 05/30/19
      [1559307660000, [130.96, 132.93, 130.78, 132.04]], // 05/31/19
      [1559566860000, [132.02, 132.95, 131.49, 132.47]], // 06/03/19

      [1559653260000, [133.45, 134.88, 132.92, 134.82]], // 06/04/19
      [1559739660000, [135.41, 136.0, 134.9399, 135.94]], // 06/05/19
      [1559826060000, [136.51, 137.44, 135.73, 137.21]], // 06/06/19
      [1559912460000, [137.6, 138.76, 137.33, 138.04]], // 06/07/19
      [1560171660000, [138.88, 138.88, 136.071, 137.07]], // 06/10/19

      [1560258060000, [137.59, 137.745, 134.94, 135.08]], // 06/11/19
      [1560344460000, [135.09, 136.28, 134.8245, 135.72]], // 06/12/19
      [1560430860000, [137.95, 141.85, 137.61, 141.74]], // 06/13/19
      [1560517260000, [142.05, 142.95, 140.53, 141.65]], // 06/14/19
      [1560776460000, [140.81, 141.48, 139.11, 140.97]], // 06/17/19

      [1560862860000, [141.99, 143.51, 138.97, 139.24]], // 06/18/19
      [1560949260000, [139.51, 141.07, 138.58, 140.92]], // 06/19/19
      [1561035660000, [141.975, 142.2285, 139.91, 142.02]], // 06/20/19
      [1561122060000, [141.95, 142.0, 140.0, 140.23]], // 06/21/19
      [1561381260000, [140.12, 140.47, 137.8, 139.22]], // 06/24/19

      [1561467660000, [139.02, 140.41, 138.67, 139.94]], // 06/25/19
      [1561554060000, [140.36, 140.74, 139.5109, 140.4]], // 06/26/19
      [1561640460000, [141.0, 141.74, 138.92, 139.3]], // 06/27/19
      [1561726860000, [139.41, 140.21, 138.61, 139.64]], // 06/28/19
      [1561986060000, [140.45, 141.95, 139.22, 141.65]], // 07/01/19

      [1562072460000, [141.4, 142.86, 141.2697, 142.53]], // 07/02/19
      [1562158860000, [142.7, 143.0, 142.0007, 142.98]], // 07/03/19
      [1562331660000, [141.42, 142.89, 140.7, 142.45]], // 07/05/19
      [1562590860000, [142.18, 142.23, 140.97, 141.02]], // 07/08/19
      [1562677260000, [140.06, 141.72, 139.75, 141.61]], // 07/09/19

      [1562763660000, [142.4, 144.25, 142.01, 143.54]], // 07/10/19
      [1562850060000, [144.01, 145.34, 143.54, 143.56]], // 07/11/19
      [1562936460000, [144.15, 145.43, 144.0, 144.88]], // 07/12/19
      [1563195660000, [145.13, 145.36, 143.97, 145.06]], // 07/15/19
      [1563282060000, [144.75, 144.99, 143.81, 144.3]], // 07/16/19

      [1563368460000, [144.6, 144.68, 142.37, 142.57]], // 07/17/19
      [1563454860000, [142.46, 142.46, 140.17, 141.63]], // 07/18/19
      [1563541260000, [142.24, 142.24, 139.74, 139.85]], // 07/19/19
      [1563800460000, [141.25, 141.44, 140.01, 140.84]], // 07/22/19
      [1563886860000, [141.65, 142.54, 140.27, 141.26]], // 07/23/19

      [1563973260000, [141.4, 141.59, 140.4, 141.29]], // 07/24/19
      [1564059660000, [141.4, 143.23, 141.045, 143.21]], // 07/25/19
      [1564146060000, [143.74, 145.19, 143.05, 144.65]], // 07/26/19
      [1564405260000, [145.59, 147.15, 145.17, 146.39]], // 07/29/19
    ];

    let chartData2 = [
      [1546434060000, 9.72], // 01/02/19
      [1546520460000, 10.59], // 01/03/19
      [1546606860000, 10.12], // 01/04/19
      [1546866060000, 6.71], // 01/07/19
      [1546952460000, 8.73], // 01/08/19

      [1547038860000, 5.93], // 01/09/19
      [1547125260000, 6.16], // 01/10/19
      [1547211660000, 4.82], // 01/11/19
      [1547470860000, 6.98], // 01/14/19
      [1547557260000, 9.8], // 01/15/19

      [1547643660000, 5.9], // 01/16/19
      [1547730060000, 6.39], // 01/17/19
      [1547816460000, 8.55], // 01/18/19
      [1548162060000, 6.99], // 01/22/19
      [1548248460000, 6.85], // 01/23/19

      [1548334860000, 6.72], // 01/24/19
      [1548421260000, 5.71], // 01/25/19
      [1548680460000, 6.18], // 01/28/19
      [1548766860000, 5.25], // 01/29/19
      [1548853260000, 7.85], // 01/30/19

      [1548939660000, 8.35], // 01/31/19
      [1549026060000, 6.56], // 02/01/19
      [1549285260000, 7.04], // 02/04/19
      [1549371660000, 13.62], // 02/05/19
      [1549458060000, 14.23], // 02/06/19

      [1549544460000, 8.66], // 02/07/19
      [1549630860000, 6.4], // 02/08/19
      [1549890060000, 11.09], // 02/11/19
      [1549976460000, 7.61], // 02/12/19
      [1550062860000, 6.92], // 02/13/19

      [1550149260000, 6.32], // 02/14/19
      [1550235660000, 8.2], // 02/15/19
      [1550581260000, 8.17], // 02/19/19
      [1550667660000, 7.08], // 02/20/19
      [1550754060000, 9.48], // 02/21/19

      [1550840460000, 8.74], // 02/22/19
      [1551099660000, 9.33], // 02/25/19
      [1551186060000, 8.96], // 02/26/19
      [1551272460000, 7.25], // 02/27/19
      [1551358860000, 6.72], // 02/28/19

      [1551445260000, 7.0], // 03/01/19
      [1551704460000, 6.01], // 03/04/19
      [1551790860000, 5.23], // 03/05/19
      [1551877260000, 7.35], // 03/06/19
      [1551963660000, 6.32], // 03/07/19

      [1552050060000, 6.55], // 03/08/19
      [1552309260000, 6.95], // 03/11/19
      [1552395660000, 9.92], // 03/12/19
      [1552482060000, 17.99], // 03/13/19
      [1552568460000, 17.41], // 03/14/19

      [1552654860000, 14.93], // 03/15/19
      [1552914060000, 21.77], // 03/18/19
      [1553000460000, 45.38], // 03/19/19
      [1553086860000, 35.59], // 03/20/19
      [1553173260000, 27.44], // 03/21/19

      [1553259660000, 24.13], // 03/22/19
      [1553518860000, 18.19], // 03/25/19
      [1553605260000, 16.69], // 03/26/19
      [1553691660000, 10.79], // 03/27/19
      [1553778060000, 11.75], // 03/28/19

      [1553864460000, 16.36], // 03/29/19
      [1554123660000, 10.79], // 04/01/19
      [1554210060000, 9.23], // 04/02/19
      [1554296460000, 10.53], // 04/03/19
      [1554382860000, 14.38], // 04/04/19

      [1554469260000, 10.91], // 04/05/19
      [1554728460000, 11.05], // 04/08/19
      [1554814860000, 17.34], // 04/09/19
      [1554901260000, 14.09], // 04/10/19
      [1554987660000, 12.78], // 04/11/19

      [1555074060000, 65.25], // 04/12/19
      [1555333260000, 32.77], // 04/15/19
      [1555419660000, 14.56], // 04/16/19
      [1555506060000, 14.25], // 04/17/19
      [1555592460000, 11.89], // 04/18/19

      [1555938060000, 10.2], // 04/22/19
      [1556024460000, 12.16], // 04/23/19
      [1556110860000, 11.45], // 04/24/19
      [1556197260000, 16.38], // 04/25/19
      [1556283660000, 14.17], // 04/26/19

      [1556542860000, 25.75], // 04/29/19
      [1556629260000, 15.25], // 04/30/19
      [1556715660000, 8.91], // 05/01/19
      [1556802060000, 16.58], // 05/02/19
      [1556888460000, 8.87], // 05/03/19

      [1557147660000, 9.96], // 05/06/19
      [1557234060000, 10.97], // 05/07/19
      [1557320460000, 15.42], // 05/08/19
      [1557406860000, 15.3], // 05/09/19
      [1557493260000, 9.86], // 05/10/19

      [1557752460000, 11.39], // 05/13/19
      [1557838860000, 12.0], // 05/14/19
      [1557925260000, 9.73], // 05/15/19
      [1558011660000, 9.69], // 05/16/19
      [1558098060000, 8.96], // 05/17/19

      [1558357260000, 8.01], // 05/20/19
      [1558443660000, 7.05], // 05/21/19
      [1558530060000, 5.09], // 05/22/19
      [1558616460000, 6.74], // 05/23/19
      [1558702860000, 4.57], // 05/24/19

      [1559048460000, 8.94], // 05/28/19
      [1559134860000, 7.75], // 05/29/19
      [1559221260000, 5.27], // 05/30/19
      [1559307660000, 7.42], // 05/31/19
      [1559566860000, 7.9], // 06/03/19

      [1559653260000, 8.25], // 06/04/19
      [1559739660000, 6.84], // 06/05/19
      [1559826060000, 6.03], // 06/06/19
      [1559912460000, 7.03], // 06/07/19
      [1560171660000, 8.48], // 06/10/19

      [1560258060000, 6.35], // 06/11/19
      [1560344460000, 5.54], // 06/12/19
      [1560430860000, 17.94], // 06/13/19
      [1560517260000, 11.13], // 06/14/19
      [1560776460000, 8.54], // 06/17/19

      [1560862860000, 11.23], // 06/18/19
      [1560949260000, 6.88], // 06/19/19
      [1561035660000, 8.49], // 06/20/19
      [1561122060000, 14.15], // 06/21/19
      [1561381260000, 10.5], // 06/24/19

      [1561467660000, 14.68], // 06/25/19
      [1561554060000, 8.84], // 06/26/19
      [1561640460000, 6.47], // 06/27/19
      [1561726860000, 20.08], // 06/28/19
      [1561986060000, 9.0], // 07/01/19

      [1562072460000, 7.56], // 07/02/19
      [1562158860000, 4.15], // 07/03/19
      [1562331660000, 5.6], // 07/05/19
      [1562590860000, 4.99], // 07/08/19
      [1562677260000, 7.4], // 07/09/19

      [1562763660000, 9.53], // 07/10/19
      [1562850060000, 10.47], // 07/11/19
      [1562936460000, 8.51], // 07/12/19
      [1563195660000, 5.29], // 07/15/19
      [1563282060000, 5.85], // 07/16/19

      [1563368460000, 5.3], // 07/17/19
      [1563454860000, 8.04], // 07/18/19
      [1563541260000, 6.11], // 07/19/19
      [1563800460000, 7.71], // 07/22/19
      [1563886860000, 7.51], // 07/23/19

      [1563973260000, 5.9], // 07/24/19
      [1564059660000, 7.29], // 07/25/19
      [1564146060000, 8.14], // 07/26/19
      [1564405260000, 11.67], // 07/29/19
    ];

    let chartConfig = {
      type: 'mixed',
      title: {
        text: 'Disney Stock & Volume',
        fontFamily: 'Garamond',
      },
      subtitle: {
        text: 'Source: http://quotes.wsj.com/DIS/historical-prices',
        fontWeight: 'normal',
      },
      plot: {
        tooltip: {
          visible: false,
        },
        aspect: 'candlestick',
        barWidth: '50%',
      },
      plotarea: {
        marginLeft: '10%',
      },
      scaleX: {
        item: {
          fontSize: '10px',
        },
        maxItems: 10,
        minValue: 1546434060000,
        step: 'day',
        transform: {
          type: 'date',
          all: '%D,<br>%M %d',
        },
      },
      scaleY: {
        values: '90:150:20',
        format: '$%v',
        guide: {
          lineStyle: 'solid',
        },
        item: {
          fontSize: '10px',
        },
        label: {
          text: 'Prices',
        },
        offsetStart: '35%', // to adjust scale offsets
      },
      scaleY2: {
        values: '0:70:35',
        blended: true, // to bind the scale to "scale-y"
        format: '%vM',
        guide: {
          lineStyle: 'solid',
        },
        item: {
          fontSize: '10px',
        },
        label: {
          text: 'Volume',
        },
        offsetEnd: '75%', // to adjust scale offsets
        placement: 'default', // to move scale to default (left) side
      },
      crosshairX: {
        plotLabel: {
          multiple: true,
        },
        scaleLabel: {
          text: '%v',
          transform: {
            type: 'date',
            all: '%D,<br>%M %d, %Y',
          },
        },
      },
      series: [{
          type: 'stock',
          values: chartData,
          guideLabel: {
            // for crosshair plot labels
            text: 'Open: $%open<br>High: $%high<br>Low: $%low<br>Close: $%close',
            decimals: 2,
          },
          scales: 'scale-x,scale-y',
          trendUp: {
            backgroundColor: '#0099ff',
            borderColor: '#0099ff',
            lineColor: '#0099ff',
          },
          trendDown: {
            backgroundColor: 'none',
            borderColor: '#ff99ff',
            lineColor: '#ff99ff',
          },
        },
        {
          type: 'bar',
          values: chartData2,
          backgroundColor: '#00cc99',
          guideLabel: {
            // for crosshair plot labels
            text: 'Shares Sold: %vM',
            decimals: 2,
          },
          rules: [{
              lineColor: '#0099ff',
              rule: '%open < %close',
            },
            {
              lineColor: '#ff99ff',
              rule: '%open > %close',
            },
          ],
          scales: 'scale-x,scale-y-2',
        },
      ],
    };

    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%',
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id="myChart" class="chart--container">
			<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
		</div>
	</body>
</html>

let chartData = [
  [1546434060000, [108.1, 109.135, 107.7304, 108.97]], // 01/02/19
  [1546520460000, [108.48, 108.65, 105.9436, 106.33]], // 01/03/19
  [1546606860000, [107.94, 110.75, 107.25, 109.61]], // 01/04/19
  [1546866060000, [109.91, 111.4, 109.3, 110.56]], // 01/07/19
  [1546952460000, [111.8, 112.56, 111.17, 111.42]], // 01/08/19

  [1547038860000, [111.8, 112.8, 111.56, 112.67]], // 01/09/19
  [1547125260000, [111.99, 112.91, 111.5, 112.8]], // 01/10/19
  [1547211660000, [112.18, 112.92, 111.73, 112.65]], // 01/11/19
  [1547470860000, [111.65, 112.695, 111.43, 112.42]], // 01/14/19
  [1547557260000, [112.3, 113.18, 110.61, 111.76]], // 01/15/19

  [1547643660000, [111.45, 112.01, 110.81, 110.91]], // 01/16/19
  [1547730060000, [110.72, 111.255, 110.16, 111.01]], // 01/17/19
  [1547816460000, [111.86, 111.93, 110.8286, 111.04]], // 01/18/19
  [1548162060000, [110.62, 111.33, 109.75, 110.6]], // 01/22/19
  [1548248460000, [111.19, 111.84, 110.0, 111.12]], // 01/23/19

  [1548334860000, [111.0, 111.11, 109.93, 110.55]], // 01/24/19
  [1548421260000, [111.465, 111.5, 110.66, 111.09]], // 01/25/19
  [1548680460000, [110.76, 110.99, 109.95, 110.81]], // 01/28/19
  [1548766860000, [110.65, 110.9286, 110.0046, 110.9]], // 01/29/19
  [1548853260000, [110.3, 110.58, 108.96, 110.13]], // 01/30/19

  [1548939660000, [110.1, 111.54, 110.01, 111.52]], // 01/31/19
  [1549026060000, [111.97, 112.05, 110.93, 111.3]], // 02/01/19
  [1549285260000, [111.41, 111.98, 110.68, 111.8]], // 02/04/19
  [1549371660000, [112.02, 112.74, 111.45, 112.66]], // 02/05/19
  [1549458060000, [113.85, 113.92, 111.07, 111.41]], // 02/06/19

  [1549544460000, [111.05, 111.11, 109.81, 110.95]], // 02/07/19
  [1549630860000, [110.46, 111.54, 110.0641, 111.51]], // 02/08/19
  [1549890060000, [111.77, 111.81, 109.25, 109.44]], // 02/11/19
  [1549976460000, [110.21, 110.83, 109.15, 109.2]], // 02/12/19
  [1550062860000, [109.24, 110.48, 109.23, 110.2]], // 02/13/19

  [1550149260000, [109.85, 111.495, 109.54, 110.66]], // 02/14/19
  [1550235660000, [111.4, 112.6325, 111.03, 112.59]], // 02/15/19
  [1550581260000, [112.91, 113.77, 112.83, 113.51]], // 02/19/19
  [1550667660000, [113.6, 114.085, 113.285, 113.68]], // 02/20/19
  [1550754060000, [113.4, 114.54, 112.87, 114.29]], // 02/21/19

  [1550840460000, [114.63, 115.77, 113.95, 115.25]], // 02/22/19
  [1551099660000, [115.62, 115.8, 113.46, 113.59]], // 02/25/19
  [1551186060000, [113.65, 114.01, 112.85, 113.5]], // 02/26/19
  [1551272460000, [113.095, 113.5099, 112.46, 112.78]], // 02/27/19
  [1551358860000, [112.9, 113.43, 112.75, 112.84]], // 02/28/19

  [1551445260000, [113.45, 114.4399, 113.45, 114.01]], // 03/01/19
  [1551704460000, [114.42, 114.42, 113.0944, 114.33]], // 03/04/19
  [1551790860000, [114.23, 114.54, 113.76, 114.0]], // 03/05/19
  [1551877260000, [114.0, 115.05, 114.0, 114.85]], // 03/06/19
  [1551963660000, [114.85, 114.9, 113.47, 114.01]], // 03/07/19

  [1552050060000, [113.46, 113.84, 112.9, 113.81]], // 03/08/19
  [1552309260000, [114.04, 115.0, 114.03, 114.75]], // 03/11/19
  [1552395660000, [114.72, 115.3, 114.04, 114.73]], // 03/12/19
  [1552482060000, [114.84, 114.85, 113.72, 114.09]], // 03/13/19
  [1552568460000, [114.12, 114.77, 113.93, 114.48]], // 03/14/19

  [1552654860000, [114.5, 115.48, 113.68, 114.96]], // 03/15/19
  [1552914060000, [113.03, 114.0, 112.46, 113.12]], // 03/18/19
  [1553000460000, [112.95, 113.7085, 109.8, 110.0]], // 03/19/19
  [1553086860000, [110.31, 110.88, 108.05, 109.99]], // 03/20/19
  [1553173260000, [110.1, 110.15, 108.37, 108.66]], // 03/21/19

  [1553259660000, [108.33, 109.0, 107.51, 108.23]], // 03/22/19
  [1553518860000, [108.49, 109.07, 107.32, 107.79]], // 03/25/19
  [1553605260000, [108.4, 110.34, 108.27, 110.14]], // 03/26/19
  [1553691660000, [110.45, 111.09, 109.7329, 110.28]], // 03/27/19
  [1553778060000, [110.6, 111.27, 110.24, 110.71]], // 03/28/19

  [1553864460000, [111.56, 111.6, 110.39, 111.03]], // 03/29/19
  [1554123660000, [111.59, 112.865, 111.38, 112.51]], // 04/01/19
  [1554210060000, [113.15, 113.305, 111.92, 111.96]], // 04/02/19
  [1554296460000, [112.7, 113.11, 112.21, 112.52]], // 04/03/19
  [1554382860000, [113.24, 114.8569, 113.03, 114.75]], // 04/04/19

  [1554469260000, [114.97, 115.13, 114.3061, 115.0]], // 04/05/19
  [1554728460000, [115.0, 115.83, 114.635, 114.96]], // 04/08/19
  [1554814860000, [115.61, 117.1641, 115.28, 116.86]], // 04/09/19
  [1554901260000, [117.58, 118.03, 116.28, 117.16]], // 04/10/19
  [1554987660000, [117.73, 117.86, 116.32, 116.6]], // 04/11/19

  [1555074060000, [127.91, 130.9, 126.36, 130.06]], // 04/12/19
  [1555333260000, [131.05, 132.7, 129.79, 132.04]], // 04/15/19
  [1555419660000, [131.75, 132.1299, 129.56, 129.9]], // 04/16/19
  [1555506060000, [129.81, 132.36, 129.28, 131.75]], // 04/17/19
  [1555592460000, [131.77, 132.87, 131.11, 132.45]], // 04/18/19

  [1555938060000, [131.9, 132.2, 131.0325, 131.68]], // 04/22/19
  [1556024460000, [133.39, 134.24, 132.65, 133.36]], // 04/23/19
  [1556110860000, [133.11, 135.75, 132.72, 135.1]], // 04/24/19
  [1556197260000, [135.36, 138.8799, 134.84, 137.24]], // 04/25/19
  [1556283660000, [138.7, 140.04, 137.51, 139.92]], // 04/26/19

  [1556542860000, [142.19, 142.37, 137.61, 139.3]], // 04/29/19
  [1556629260000, [139.12, 139.39, 136.03, 136.97]], // 04/30/19
  [1556715660000, [137.49, 138.17, 136.235, 136.38]], // 05/01/19
  [1556802060000, [135.38, 135.69, 132.38, 134.14]], // 05/02/19
  [1556888460000, [135.22, 135.31, 133.78, 134.33]], // 05/03/19

  [1557147660000, [132.54, 135.33, 132.3, 135.0]], // 05/06/19
  [1557234060000, [135.35, 135.97, 132.76, 133.44]], // 05/07/19
  [1557320460000, [133.5, 135.7, 133.31, 134.99]], // 05/08/19
  [1557406860000, [135.03, 136.48, 132.84, 133.59]], // 05/09/19
  [1557493260000, [133.01, 134.32, 131.23, 134.04]], // 05/10/19

  [1557752460000, [131.5, 132.66, 130.55, 131.34]], // 05/13/19
  [1557838860000, [133.52, 134.66, 132.05, 133.2]], // 05/14/19
  [1557925260000, [132.55, 135.21, 132.04, 134.68]], // 05/15/19
  [1558011660000, [135.29, 136.4, 134.81, 135.5]], // 05/16/19
  [1558098060000, [134.26, 135.98, 134.03, 135.04]], // 05/17/19

  [1558357260000, [134.25, 134.4, 133.25, 133.91]], // 05/20/19
  [1558443660000, [134.57, 134.57, 133.11, 134.09]], // 05/21/19
  [1558530060000, [133.82, 134.17, 133.39, 133.85]], // 05/22/19
  [1558616460000, [132.71, 133.55, 131.95, 132.73]], // 05/23/19
  [1558702860000, [133.1, 133.29, 132.22, 132.79]], // 05/24/19

  [1559048460000, [133.21, 134.04, 132.59, 132.62]], // 05/28/19
  [1559134860000, [131.96, 132.15, 130.7783, 131.57]], // 05/29/19
  [1559221260000, [131.88, 132.68, 131.335, 132.2]], // 05/30/19
  [1559307660000, [130.96, 132.93, 130.78, 132.04]], // 05/31/19
  [1559566860000, [132.02, 132.95, 131.49, 132.47]], // 06/03/19

  [1559653260000, [133.45, 134.88, 132.92, 134.82]], // 06/04/19
  [1559739660000, [135.41, 136.0, 134.9399, 135.94]], // 06/05/19
  [1559826060000, [136.51, 137.44, 135.73, 137.21]], // 06/06/19
  [1559912460000, [137.6, 138.76, 137.33, 138.04]], // 06/07/19
  [1560171660000, [138.88, 138.88, 136.071, 137.07]], // 06/10/19

  [1560258060000, [137.59, 137.745, 134.94, 135.08]], // 06/11/19
  [1560344460000, [135.09, 136.28, 134.8245, 135.72]], // 06/12/19
  [1560430860000, [137.95, 141.85, 137.61, 141.74]], // 06/13/19
  [1560517260000, [142.05, 142.95, 140.53, 141.65]], // 06/14/19
  [1560776460000, [140.81, 141.48, 139.11, 140.97]], // 06/17/19

  [1560862860000, [141.99, 143.51, 138.97, 139.24]], // 06/18/19
  [1560949260000, [139.51, 141.07, 138.58, 140.92]], // 06/19/19
  [1561035660000, [141.975, 142.2285, 139.91, 142.02]], // 06/20/19
  [1561122060000, [141.95, 142.0, 140.0, 140.23]], // 06/21/19
  [1561381260000, [140.12, 140.47, 137.8, 139.22]], // 06/24/19

  [1561467660000, [139.02, 140.41, 138.67, 139.94]], // 06/25/19
  [1561554060000, [140.36, 140.74, 139.5109, 140.4]], // 06/26/19
  [1561640460000, [141.0, 141.74, 138.92, 139.3]], // 06/27/19
  [1561726860000, [139.41, 140.21, 138.61, 139.64]], // 06/28/19
  [1561986060000, [140.45, 141.95, 139.22, 141.65]], // 07/01/19

  [1562072460000, [141.4, 142.86, 141.2697, 142.53]], // 07/02/19
  [1562158860000, [142.7, 143.0, 142.0007, 142.98]], // 07/03/19
  [1562331660000, [141.42, 142.89, 140.7, 142.45]], // 07/05/19
  [1562590860000, [142.18, 142.23, 140.97, 141.02]], // 07/08/19
  [1562677260000, [140.06, 141.72, 139.75, 141.61]], // 07/09/19

  [1562763660000, [142.4, 144.25, 142.01, 143.54]], // 07/10/19
  [1562850060000, [144.01, 145.34, 143.54, 143.56]], // 07/11/19
  [1562936460000, [144.15, 145.43, 144.0, 144.88]], // 07/12/19
  [1563195660000, [145.13, 145.36, 143.97, 145.06]], // 07/15/19
  [1563282060000, [144.75, 144.99, 143.81, 144.3]], // 07/16/19

  [1563368460000, [144.6, 144.68, 142.37, 142.57]], // 07/17/19
  [1563454860000, [142.46, 142.46, 140.17, 141.63]], // 07/18/19
  [1563541260000, [142.24, 142.24, 139.74, 139.85]], // 07/19/19
  [1563800460000, [141.25, 141.44, 140.01, 140.84]], // 07/22/19
  [1563886860000, [141.65, 142.54, 140.27, 141.26]], // 07/23/19

  [1563973260000, [141.4, 141.59, 140.4, 141.29]], // 07/24/19
  [1564059660000, [141.4, 143.23, 141.045, 143.21]], // 07/25/19
  [1564146060000, [143.74, 145.19, 143.05, 144.65]], // 07/26/19
  [1564405260000, [145.59, 147.15, 145.17, 146.39]], // 07/29/19
];

let chartData2 = [
  [1546434060000, 9.72], // 01/02/19
  [1546520460000, 10.59], // 01/03/19
  [1546606860000, 10.12], // 01/04/19
  [1546866060000, 6.71], // 01/07/19
  [1546952460000, 8.73], // 01/08/19

  [1547038860000, 5.93], // 01/09/19
  [1547125260000, 6.16], // 01/10/19
  [1547211660000, 4.82], // 01/11/19
  [1547470860000, 6.98], // 01/14/19
  [1547557260000, 9.8], // 01/15/19

  [1547643660000, 5.9], // 01/16/19
  [1547730060000, 6.39], // 01/17/19
  [1547816460000, 8.55], // 01/18/19
  [1548162060000, 6.99], // 01/22/19
  [1548248460000, 6.85], // 01/23/19

  [1548334860000, 6.72], // 01/24/19
  [1548421260000, 5.71], // 01/25/19
  [1548680460000, 6.18], // 01/28/19
  [1548766860000, 5.25], // 01/29/19
  [1548853260000, 7.85], // 01/30/19

  [1548939660000, 8.35], // 01/31/19
  [1549026060000, 6.56], // 02/01/19
  [1549285260000, 7.04], // 02/04/19
  [1549371660000, 13.62], // 02/05/19
  [1549458060000, 14.23], // 02/06/19

  [1549544460000, 8.66], // 02/07/19
  [1549630860000, 6.4], // 02/08/19
  [1549890060000, 11.09], // 02/11/19
  [1549976460000, 7.61], // 02/12/19
  [1550062860000, 6.92], // 02/13/19

  [1550149260000, 6.32], // 02/14/19
  [1550235660000, 8.2], // 02/15/19
  [1550581260000, 8.17], // 02/19/19
  [1550667660000, 7.08], // 02/20/19
  [1550754060000, 9.48], // 02/21/19

  [1550840460000, 8.74], // 02/22/19
  [1551099660000, 9.33], // 02/25/19
  [1551186060000, 8.96], // 02/26/19
  [1551272460000, 7.25], // 02/27/19
  [1551358860000, 6.72], // 02/28/19

  [1551445260000, 7.0], // 03/01/19
  [1551704460000, 6.01], // 03/04/19
  [1551790860000, 5.23], // 03/05/19
  [1551877260000, 7.35], // 03/06/19
  [1551963660000, 6.32], // 03/07/19

  [1552050060000, 6.55], // 03/08/19
  [1552309260000, 6.95], // 03/11/19
  [1552395660000, 9.92], // 03/12/19
  [1552482060000, 17.99], // 03/13/19
  [1552568460000, 17.41], // 03/14/19

  [1552654860000, 14.93], // 03/15/19
  [1552914060000, 21.77], // 03/18/19
  [1553000460000, 45.38], // 03/19/19
  [1553086860000, 35.59], // 03/20/19
  [1553173260000, 27.44], // 03/21/19

  [1553259660000, 24.13], // 03/22/19
  [1553518860000, 18.19], // 03/25/19
  [1553605260000, 16.69], // 03/26/19
  [1553691660000, 10.79], // 03/27/19
  [1553778060000, 11.75], // 03/28/19

  [1553864460000, 16.36], // 03/29/19
  [1554123660000, 10.79], // 04/01/19
  [1554210060000, 9.23], // 04/02/19
  [1554296460000, 10.53], // 04/03/19
  [1554382860000, 14.38], // 04/04/19

  [1554469260000, 10.91], // 04/05/19
  [1554728460000, 11.05], // 04/08/19
  [1554814860000, 17.34], // 04/09/19
  [1554901260000, 14.09], // 04/10/19
  [1554987660000, 12.78], // 04/11/19

  [1555074060000, 65.25], // 04/12/19
  [1555333260000, 32.77], // 04/15/19
  [1555419660000, 14.56], // 04/16/19
  [1555506060000, 14.25], // 04/17/19
  [1555592460000, 11.89], // 04/18/19

  [1555938060000, 10.2], // 04/22/19
  [1556024460000, 12.16], // 04/23/19
  [1556110860000, 11.45], // 04/24/19
  [1556197260000, 16.38], // 04/25/19
  [1556283660000, 14.17], // 04/26/19

  [1556542860000, 25.75], // 04/29/19
  [1556629260000, 15.25], // 04/30/19
  [1556715660000, 8.91], // 05/01/19
  [1556802060000, 16.58], // 05/02/19
  [1556888460000, 8.87], // 05/03/19

  [1557147660000, 9.96], // 05/06/19
  [1557234060000, 10.97], // 05/07/19
  [1557320460000, 15.42], // 05/08/19
  [1557406860000, 15.3], // 05/09/19
  [1557493260000, 9.86], // 05/10/19

  [1557752460000, 11.39], // 05/13/19
  [1557838860000, 12.0], // 05/14/19
  [1557925260000, 9.73], // 05/15/19
  [1558011660000, 9.69], // 05/16/19
  [1558098060000, 8.96], // 05/17/19

  [1558357260000, 8.01], // 05/20/19
  [1558443660000, 7.05], // 05/21/19
  [1558530060000, 5.09], // 05/22/19
  [1558616460000, 6.74], // 05/23/19
  [1558702860000, 4.57], // 05/24/19

  [1559048460000, 8.94], // 05/28/19
  [1559134860000, 7.75], // 05/29/19
  [1559221260000, 5.27], // 05/30/19
  [1559307660000, 7.42], // 05/31/19
  [1559566860000, 7.9], // 06/03/19

  [1559653260000, 8.25], // 06/04/19
  [1559739660000, 6.84], // 06/05/19
  [1559826060000, 6.03], // 06/06/19
  [1559912460000, 7.03], // 06/07/19
  [1560171660000, 8.48], // 06/10/19

  [1560258060000, 6.35], // 06/11/19
  [1560344460000, 5.54], // 06/12/19
  [1560430860000, 17.94], // 06/13/19
  [1560517260000, 11.13], // 06/14/19
  [1560776460000, 8.54], // 06/17/19

  [1560862860000, 11.23], // 06/18/19
  [1560949260000, 6.88], // 06/19/19
  [1561035660000, 8.49], // 06/20/19
  [1561122060000, 14.15], // 06/21/19
  [1561381260000, 10.5], // 06/24/19

  [1561467660000, 14.68], // 06/25/19
  [1561554060000, 8.84], // 06/26/19
  [1561640460000, 6.47], // 06/27/19
  [1561726860000, 20.08], // 06/28/19
  [1561986060000, 9.0], // 07/01/19

  [1562072460000, 7.56], // 07/02/19
  [1562158860000, 4.15], // 07/03/19
  [1562331660000, 5.6], // 07/05/19
  [1562590860000, 4.99], // 07/08/19
  [1562677260000, 7.4], // 07/09/19

  [1562763660000, 9.53], // 07/10/19
  [1562850060000, 10.47], // 07/11/19
  [1562936460000, 8.51], // 07/12/19
  [1563195660000, 5.29], // 07/15/19
  [1563282060000, 5.85], // 07/16/19

  [1563368460000, 5.3], // 07/17/19
  [1563454860000, 8.04], // 07/18/19
  [1563541260000, 6.11], // 07/19/19
  [1563800460000, 7.71], // 07/22/19
  [1563886860000, 7.51], // 07/23/19

  [1563973260000, 5.9], // 07/24/19
  [1564059660000, 7.29], // 07/25/19
  [1564146060000, 8.14], // 07/26/19
  [1564405260000, 11.67], // 07/29/19
];

let chartConfig = {
  type: 'mixed',
  title: {
    text: 'Disney Stock & Volume',
    fontFamily: 'Garamond',
  },
  subtitle: {
    text: 'Source: http://quotes.wsj.com/DIS/historical-prices',
    fontWeight: 'normal',
  },
  plot: {
    tooltip: {
      visible: false,
    },
    aspect: 'candlestick',
    barWidth: '50%',
  },
  plotarea: {
    marginLeft: '10%',
  },
  scaleX: {
    item: {
      fontSize: '10px',
    },
    maxItems: 10,
    minValue: 1546434060000,
    step: 'day',
    transform: {
      type: 'date',
      all: '%D,<br>%M %d',
    },
  },
  scaleY: {
    values: '90:150:20',
    format: '$%v',
    guide: {
      lineStyle: 'solid',
    },
    item: {
      fontSize: '10px',
    },
    label: {
      text: 'Prices',
    },
    offsetStart: '35%', // to adjust scale offsets
  },
  scaleY2: {
    values: '0:70:35',
    blended: true, // to bind the scale to "scale-y"
    format: '%vM',
    guide: {
      lineStyle: 'solid',
    },
    item: {
      fontSize: '10px',
    },
    label: {
      text: 'Volume',
    },
    offsetEnd: '75%', // to adjust scale offsets
    placement: 'default', // to move scale to default (left) side
  },
  crosshairX: {
    plotLabel: {
      multiple: true,
    },
    scaleLabel: {
      text: '%v',
      transform: {
        type: 'date',
        all: '%D,<br>%M %d, %Y',
      },
    },
  },
  series: [
    {
      type: 'stock',
      values: chartData,
      guideLabel: {
        // for crosshair plot labels
        text: 'Open: $%open<br>High: $%high<br>Low: $%low<br>Close: $%close',
        decimals: 2,
      },
      scales: 'scale-x,scale-y',
      trendUp: {
        backgroundColor: '#0099ff',
        borderColor: '#0099ff',
        lineColor: '#0099ff',
      },
      trendDown: {
        backgroundColor: 'none',
        borderColor: '#ff99ff',
        lineColor: '#ff99ff',
      },
    },
    {
      type: 'bar',
      values: chartData2,
      backgroundColor: '#00cc99',
      guideLabel: {
        // for crosshair plot labels
        text: 'Shares Sold: %vM',
        decimals: 2,
      },
      rules: [
        {
          lineColor: '#0099ff',
          rule: '%open < %close',
        },
        {
          lineColor: '#ff99ff',
          rule: '%open > %close',
        },
      ],
      scales: 'scale-x,scale-y-2',
    },
  ],
};

zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: '100%',
  width: '100%',
});

.chart--container {
  width: 100%;
  height: 100%;
  min-height: 530px;
}

.zc-ref {
  display: none;
}

Tech Rankings Rankflow Chart 182/281 Open-High-Low-Close Chart with Preview and Interactive Crosshairs

Stock and Volume Chart with Blended Scales and Interactive Crosshairs

Related Documentation: