html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // get data from https://cdn.anychart.com/solutions-data/acme-corp-price/data.js

  var data = acme_corp_data(); // eslint-disable-line no-undef

  // create stage

  var stage = anychart.graphics.create('container');

  // create data set on loaded data

  var dataSet = anychart.data.set(data);

​

  // map data for the range spline area series

  var firstSeriesData = dataSet.mapAs({ x: 0, low: 1, high: 2 });

  // map data for the candlestick series

  var secondSeriesData = dataSet.mapAs({

    x: 0,

    open: 3,

    high: 4,

    low: 5,

    close: 6

  });

  // map data for the spline series

  var thirdSeriesData = dataSet.mapAs({ x: 0, value: 7 });

​

  // create chart

  var chartFirst = anychart.area();

  // set title

  chartFirst.title('ACME Corp. Stock Prices: 11.05.07 - 07.08.07');

  // set position for the first stage

  chartFirst.bounds(0, 0, '100%', '70%');

  // create range spline area series

  chartFirst.rangeSplineArea(firstSeriesData).name('Range Spline Area');

  // create candlestick series

  chartFirst.candlestick(secondSeriesData).name('Candlestick');

  // create spline series

  chartFirst.spline(thirdSeriesData).markers(null).name('Spline');

​

  // set xScale settings

  var xScale = chartFirst.xScale();

  xScale.inverted(true);

​

  // set xTicks settings

  xScale.ticks().interval(7);

​

  // set xAxis settings

  chartFirst

    .xAxis()

    .drawFirstLabel(false)

    .labels()

    .format(function () {

      var options = { year: 'numeric', month: 'long', day: 'numeric' };

      return new Date(this.value).toLocaleDateString('en-US', options);

    });

​

  // set tooltip settings

  chartFirst

    .tooltip()

    .displayMode('union')

    .titleFormat(function () {

      return anychart.format.dateTime(

        this.points[0].x,

        'dd/MM/yyyy',

        null,

        null

      );

    })

    .unionFormat(function () {

      return (

        this.points[0].seriesName +

        '\nHigh: ' +

        this.points[0].high.toFixed(2) +

        '\nLow: ' +

        this.points[0].low.toFixed(2) +

        '\n\n' +

        this.points[1].seriesName +

        '\nOpen: ' +

        this.points[1].open +

        '\nHigh: ' +

        this.points[1].high +

        '\nLow: ' +

        this.points[1].low +

        '\nClose: ' +

        this.points[1].close +

        '\n\n' +

        this.points[2].seriesName +

        '\nValue: ' +

        this.points[2].value.toFixed(2)

      );

    });

  // set stage for the chart

  chartFirst.container(stage);

  // initiate chart drawing

  chartFirst.draw();

​

  // map data for the column series

  var columnData = dataSet.mapAs({ x: 0, value: 8 });

​

  // create column chart

  var chartSecond = anychart.column(columnData);

  chartSecond

    .bounds(0, '70%', '100%', '30%')

    .interactivity()

    .hoverMode('by-x');

​

  chartSecond

    .tooltip()

    .titleFormat(function () {

      return anychart.format.dateTime(this.x, 'dd/MM/yyyy', null, null);

    })

    .format('${%Value}{groupsSeparator: }  stocks bought');

​

  chartSecond.getSeries(0).hovered().fill('orange').stroke('#EF6C00');

​

  chartSecond.xScale().inverted(true);

​

  // adjust axes labels view

  chartSecond.xAxis().labels(false);

​

  chartSecond

    .yAxis()

    .labels()

    .format('${%Value}{scale:(1000000)(1)|( mln)}');

​

  // adjust x axis internal

  chartSecond.xScale().ticks().interval(11);

  // set stage for the chart

  chartSecond.container(stage);

  // initiate chart drawing

  chartSecond.draw();

});