html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

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

// https://cdn.anychart.com/csv-data/aapl-daily.csv

anychart.data.loadCsvFile(

  'https://cdn.anychart.com/csv-data/aapl-daily.csv',

  function (data) {

    // create data table on loaded data

    var dataTable = anychart.data.table();

    dataTable.addData(data);

​

    // map loaded data

    var mapping = dataTable.mapAs({value: 4});

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

​

    // create stock chart

    var chart = anychart.stock();

    // set chart padding

    chart.padding().right(60);

​

    // create plot on the chart

    var plot0 = chart.plot(0);

​

    // enabled x-grid/y-grid

    plot0.xGrid(true).yGrid(true);

​

    // set orientation y-axis to the right side

    plot0.yAxis().orientation('right');

​

    // create candlestick series on the plot

    var aaplSeries = plot0.column(mapping);

    // set series settings

    aaplSeries.name('AAPL').zIndex(50);

​

    var previousValue = NaN;

    chart.grouping().enabled(false);

    var selectable = mapping.createSelectable();

    var lastKey = selectable.search(999999999999999999, 'exact-or-prev').getKey();

​

    aaplSeries.fill(function() {

      //debugger;

      if (isNaN(previousValue)) {

        previousValue = +this.iterator.get('value');

        return 'green';

      }

​

      var currentValue = +this.iterator.get('value');

      var color;

      if (currentValue >= previousValue) {

        previousValue = +this.iterator.get('value');

        color = 'green';

      } else {

        color = 'red';

      }

​

      if (lastKey === this.iterator.getKey()) {

        previousValue = NaN;

      }

      return color;

    });

​

    // create volume series on the plot

    var plot1 = chart.plot(1);

    var volumeSeries = plot1.column(volumeMapping);

    // set series settings

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

    volumeSeries.legendItem({

      iconEnabled: false,

      textOverflow: ''

    });

    plot1.yScale().minimum(0).maximumGap(0);

    plot1.height('20%');

    plot1.yAxis().labels().format('{%tickValue}{scale:(1)(1000)(1000)(1000)|( d)( K)( M)( B)}');

​

​

​

    // set chart selected date/time range

    chart.selectRange('2016-07-01', '2016-12-30');

​

    // 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);

  }

);