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({

        open: 1,

        high: 2,

        low: 3,

        close: 4,

        value: {

            column: 6,

            type: 'sum'

        }

    });

​

    // create stock chart

    var chart = anychart.stock(true);

    // set chart padding

    chart.padding().right(60);

​

    // create plot on the chart

    var plot = chart.plot(0);

    // enabled x-grid/y-grid

    plot.xGrid(true)

            .yGrid(true);

​

    // set orientation y-axis to the right side

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

​

    // create custom palette

    var palette = anychart.palettes.distinctColors();

    palette.items(['red', 'green']);

​

    // create candlestick series on the plot

    var aaplSeries = plot.candlestick(mapping);

    // set series settings

    aaplSeries.name('AAPL')

            .zIndex(50);

    aaplSeries.risingFill(palette.itemAt(0), 0.5)

            .fallingFill(palette.itemAt(1), 0.5)

            .risingStroke(palette.itemAt(0), 0.5)

            .fallingStroke(palette.itemAt(1), 0.5);

​

    // create volume series on the plot

    var volumeSeries = plot.column(mapping);

    // set series settings

    volumeSeries.name('Volume')

            .zIndex(100)

            .maxHeight('20%')

            .bottom(0);

​

    // create a logarithmic scale

    var customScale = anychart.scales.log();

    // sets y-scale

    volumeSeries.yScale(customScale);

​

    // set volume fill settings

    volumeSeries.risingFill(palette.itemAt(0), 0.25)

            .fallingFill(palette.itemAt(1), 0.25)

            .risingStroke(palette.itemAt(0), 0.25)

            .fallingStroke(palette.itemAt(1), 0.25);

​

  volumeSeries.fill(function() {

    if(this.iterator.get('open') <  this.iterator.get('close')) {

        return palette.itemAt(0) + ' 0.4';

    } else {

        return palette.itemAt(1) + ' 0.4';

    }

  });

  volumeSeries.stroke(function() {

    if(this.iterator.get('open') <  this.iterator.get('close')) {

        return palette.itemAt(0) + ' 0.4';

    } else {

        return palette.itemAt(1) + ' 0.4';

    }

  });

​

    // set container id for the chart

    chart.container('container').draw()

});