html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // The data that have been used for this sample can be taken from the CDN

  // https://cdn.anychart.com/csv-data/msft-daily-short.js

  // https://cdn.anychart.com/csv-data/orcl-daily-short.js

​

  // create data tables on loaded data

  var msftDataTable = anychart.data.table();

  msftDataTable.addData(get_msft_daily_short_data()); // eslint-disable-line no-undef

​

  var orclDataTable = anychart.data.table();

  orclDataTable.addData(get_orcl_daily_short_data()); // eslint-disable-line no-undef

​

  // create stock chart

  var chart = anychart.stock();

​

  // create chart title

  chart.title('Setting-up Scale-Mode (Comparison Modes)');

​

  // create first plot on the chart with column series

  var firstPlot = chart.plot(0);

  // create first plot title

  firstPlot.legend().titleFormat(function () {

    return (

      '<p>Changes comparisonMode="<strong>values</strong>", ' +

      'compareWith="<strong>2014-06-01</strong>"</p>&nbsp;&nbsp;| &nbsp;' +

      anychart.format.dateTime(this.value, 'dd MMM yyyy')

    );

  });

  firstPlot.legend().title().useHtml(true).align('left');

  // create line series on the first plot

  firstPlot

    .line()

    .name('MSFT')

    .data(msftDataTable.mapAs({ value: 1 }))

    .stroke('1 #1976D2');

  firstPlot

    .line()

    .data(orclDataTable.mapAs({ value: 1 }))

    .stroke('1 #FF5F49')

    .name('ORCL');

  // display values

  firstPlot.yScale().comparisonMode('value');

  // comparison begins from the timestamp

  firstPlot.yScale().compareWith('2014-06-01');

​

  // create second plot on the chart with column series

  var secondPlot = chart.plot(1);

  // create second plot title.

  secondPlot.legend().titleFormat(function () {

    return (

      '<p>Changes comparisonMode="<strong>values</strong>", ' +

      'compareWith="<strong>2015-06-01</strong>"</p>&nbsp;&nbsp;| &nbsp;' +

      anychart.format.dateTime(this.value, 'dd MMM yyyy')

    );

  });

  secondPlot.legend().title().useHtml(true).align('center');

  // create line series on the second plot

  secondPlot

    .line()

    .name('MSFT')

    .data(msftDataTable.mapAs({ value: 1 }))

    .stroke('1 #1976D2')

    .tooltip(false);

  secondPlot

    .line()

    .name('ORCL')

    .data(orclDataTable.mapAs({ value: 1 }))

    .stroke('1 #FF5F49')

    .tooltip(false);

  // display changes in percents

  secondPlot.yScale().comparisonMode('value');

  // comparison begins from the timestamp

  secondPlot.yScale().compareWith('2015-06-01');

​

  // create third plot on the chart with column series

  var thirdPlot = chart.plot(2);

  // create third plot title

  thirdPlot.legend().titleFormat(function () {

    return (

      '<p>Changes comparisonMode="<strong>percent</strong>", ' +

      'compareWith="<strong>seriesStart</strong>"</p>&nbsp;&nbsp;| &nbsp;' +

      anychart.format.dateTime(this.value, 'dd MMM yyyy')

    );

  });

  thirdPlot.legend().title().useHtml(true).align('left');

  // create line series on the third plot

  thirdPlot

    .line()

    .name('MSFT')

    .data(msftDataTable.mapAs({ value: 1 }))

    .stroke('1 #1976D2')

    .tooltip(false);

  thirdPlot

    .line()

    .name('ORCL')

    .data(orclDataTable.mapAs({ value: 1 }))

    .stroke('1 #FF5F49')

    .tooltip(false);

  thirdPlot.yScale().comparisonMode('percent');

  // comparison begins from the earliest point of all data sets on the chart

  thirdPlot

    .yScale()

    .compareWith('series-start')

    // force chart to stack values by Y scale.

    .stackMode('percent');

  thirdPlot.yAxis().labels().format('{%Value} %'); // percent axis

​

  // create four plot on the chart with column series

  var fourthPlot = chart.plot(3);

  // create four plot title

  fourthPlot.legend().titleFormat(function () {

    return (

      '<p>Changes comparisonMode="<strong>percent</strong>", ' +

      'compareWith="<strong>firstVisible</strong>"</p>&nbsp;&nbsp;| &nbsp;' +

      anychart.format.dateTime(this.value, 'dd MMM yyyy')

    );

  });

  fourthPlot.legend().title().useHtml(true).align('left');

  // create line series on the third plot

  fourthPlot

    .line()

    .name('MSFT')

    .data(msftDataTable.mapAs({ value: 1 }))

    .stroke('1 #1976D2')

    .tooltip(false);

  fourthPlot

    .line()

    .name('ORCL')

    .data(orclDataTable.mapAs({ value: 1 }))

    .stroke('1 #FF5F49')

    .tooltip(false);

  fourthPlot

    .yScale()

    .comparisonMode('percent')

    // comparison begins from the earliest point of visible dates

    .compareWith('first-visible');

  // force chart to stack values by Y scale.

  fourthPlot.yScale().stackMode('percent');

  fourthPlot.yAxis().labels().format('{%Value} %'); // percent axis

​

  // set chart selected date/time range

  chart.selectRange('2014-04-30', '2015-10-09');

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

});