examples/stock.html

<!doctype html>
<html>

  <head>
    <script src="../node_modules/anychart/dist/js/anychart-base.min.js"></script>
    <script src="../node_modules/anychart/dist/js/anychart-stock.min.js"></script>
    <script src="../node_modules/anychart/dist/js/anychart-ui.min.js"></script>
    <script src="../node_modules/anychart/dist/js/anychart-exports.min.js"></script>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../dist/anychart-jquery.min.js"></script>
    <link rel="stylesheet" href="../node_modules/anychart/dist/css/anychart-ui.min.css" />
    <link rel="stylesheet" href="../node_modules/anychart/dist/fonts/css/anychart-font.min.css" />

    <script src="assets/msft-daily-short.js"></script>
    <script src="assets/orcl-daily-short.js"></script>
    <script src="assets/csco-daily-short.js"></script>
    <script src="assets/ibm-daily-short.js"></script>

    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }

      #container {
        width: 800px;
        height: 600px;
      }

    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      var chart = $('#container').anychart('stock').anychart();

      var msftDataTable = anychart.data.table();
      msftDataTable.addData(get_msft_daily_short_data());
      var orclDataTable = anychart.data.table();
      orclDataTable.addData(get_orcl_daily_short_data());
      var cscoDataTable = anychart.data.table();
      cscoDataTable.addData(get_csco_daily_short_data());
      var ibmDataTable = anychart.data.table();
      ibmDataTable.addData(get_ibm_daily_short_data());
      var firstPlot = chart.plot(0);
      firstPlot.area(msftDataTable.mapAs({ 'value': 4 })).name('MSFT');
      var secondPlot = chart.plot(1);
      secondPlot.splineArea(orclDataTable.mapAs({ 'value': 4 })).fill('#1976d2 0.65').stroke('1.5 #1976d2').name('ORCL');
      var thirdPlot = chart.plot(2);
      thirdPlot.stepArea(cscoDataTable.mapAs({ 'value': 4 })).fill('#ef6c00 0.65').stroke('1.5 #ef6c00').name('CSCO');
      var forthPlot = chart.plot(3);
      forthPlot.line(msftDataTable.mapAs({ 'value': 4 })).name('MSFT').tooltip(null);
      forthPlot.spline(orclDataTable.mapAs({ 'value': 4 })).name('ORCL').tooltip(null);
      forthPlot.stepLine(cscoDataTable.mapAs({ 'value': 4 })).name('CSCO').tooltip(null);
      chart.scroller().area(msftDataTable.mapAs({ 'value': 4 }));
      chart.selectRange('2005-01-03', '2005-11-20');
    </script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.3/iframeResizer.contentWindow.min.js"></script>
  </body>

</html>