html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  anychart.data.loadCsvFile(

    // The data used in this sample can be obtained from the CDN

    'https://cdn.anychart.com/samples-data/stock-tech-indicators/rank-correlation-index/data.csv',

    function (data) {

      // create data table on loaded data

      var dataTable = anychart.data.table();

      dataTable.addData(data);

​

      // map data for the ohlc series

      var mapping = dataTable.mapAs({

        open: 1,

        high: 2,

        low: 3,

        close: 4

      });

​

      // map data for scroller series

      var valueMapping = dataTable.mapAs({ value: 6 });

​

      // create stock chart

      var chart = anychart.stock();

​

      // create ohlc series

      chart.plot(0).ohlc(mapping).name('T.US').zIndex(10);

​

      // create volume series

      var volumeSeries = chart.plot(0).column(valueMapping);

​

      // set volume series settings

      volumeSeries.zIndex(100).maxHeight('25%').bottom(0).name('Volume');

​

      // create a logarithmic scale

      var customScale = anychart.scales.log();

      // sets y-scale

      volumeSeries.yScale(customScale);

​

      // set volume rising and falling stroke settings

      volumeSeries.risingStroke('red .5');

      volumeSeries.fallingStroke('green .5');

​

      // set volume rising and falling fill settings

      volumeSeries.risingFill('red .3');

      volumeSeries.fallingFill('green .3');

​

      // create rank correlation index indicator

      var rciIndicator = chart.plot(1).height('30%').rci(mapping);

​

      // set RCI indicator series stroke settings

      rciIndicator.series().stroke('2 #1f73b4');

​

      // create scroller series

      chart.scroller().area(valueMapping);

​

      // set chart selected date/time range

      chart.selectRange('2000-01-01', '2019-01-01');

​

      // set container id for the chart

      chart.container('container');

      // initiate chart drawing

      chart.draw();

​

      // create range picker

      var rangePicker = anychart.ui.rangePicker();

      // init range picker

      rangePicker.render(chart);

​

      // create range selector

      var rangeSelector = anychart.ui.rangeSelector();

      // init range selector

      rangeSelector.render(chart);

    }

  );

});