html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

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

  // https://cdn.anychart.com/csv-data/msft-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

​

  // create stock chart

  var chart = anychart.stock();

  chart.padding(0);

  chart.tooltip(false);

​

  // create first plot on the chart

  var firstPlot = chart.plot(0);

​

  // get y-scale and set scale ticks settings

  var yScale = firstPlot.yScale();

  yScale.ticks().count(10);

​

  // get y-axis and set labels position and padding

  var yAxis = firstPlot.yAxis();

  yAxis.labels().position('inside').padding().left(20);

​

  // disable drawing of first label and axis line with ticks

  yAxis.drawFirstLabel(false).stroke(null).ticks().enabled(false);

​

  // configure plot legend margin

  firstPlot.legend().margin().bottom(20);

​

  // get x-axis

  var xAxis = firstPlot.xAxis();

​

  // set x-axis labels position and padding

  xAxis.labels().position('inside').padding().bottom(20);

​

  // set x-axis minor labels position and padding

  xAxis.minorLabels().position('inside').padding().bottom(20);

​

  // set x-axis height

  xAxis.height(0);

​

  // disable x-axis helper label

  xAxis.showHelperLabel(false);

​

  // set crosshair x-label position and padding

  firstPlot

    .crosshair()

    .xLabel()

    .enabled(true)

    .anchor('center-bottom')

    .padding(4, 15, 4, 20);

​

  // set crosshair x-label appearance

  firstPlot

    .crosshair()

    .xLabel()

    .fontColor('#7c868e')

    .fontSize(11)

    .background()

    .fill(anychart.color.lighten('orange'))

    .stroke('orange');

​

  firstPlot.crosshair().yStroke(null);

​

  // set crosshair y-label position and padding

  firstPlot

    .crosshair()

    .yLabel()

    .anchor('left-center')

    .padding(4, 15, 4, 20);

​

  // set crosshair y-label text format and appearance

  firstPlot

    .crosshair()

    .yLabel()

    .format('{%Value}{decimalsCount:1,zeroFillDecimals:true}')

    .fontColor('#7c868e')

    .fontSize(11);

​

  // set crosshair y-label appearance

  firstPlot

    .crosshair()

    .yLabel()

    .background()

    .corners(0, 10, 10, 0)

    .cornerType('cut')

    .fill(anychart.color.lighten('orange'))

    .stroke('orange');

​

  // get price indicator and set it value

  var indicator = firstPlot.priceIndicator();

  indicator.value('last-visible');

​

  // set price indicator label position and padding

  indicator.label().anchor('left-center').padding(4, 15, 4, 20);

​

  // set price indicator text format and color

  indicator

    .label()

    .format('{%Value}{decimalsCount:1,zeroFillDecimals:true}');

  indicator.label().fontColor('#7c868e');

​

  // set price indicator appearance

  indicator

    .label()

    .background()

    .corners(0, 10, 10, 0)

    .cornerType('cut')

    .fill(anychart.color.lighten('orange', 0.9))

    .stroke('orange');

  indicator.stroke(null);

​

  // create area series on the first plot

  var msftSeries = firstPlot.area(msftDataTable.mapAs({ value: 4 }));

  msftSeries.name('MSFT');

  msftSeries.color('orange');

  msftSeries.fill(function () {

    return anychart.color.setOpacity(this.sourceColor, 0.3, true);

  });

​

  msftSeries.hovered().markers().enabled(true);

​

  chart.scroller(false);

​

  // set container id for the chart

  chart.container('container');

  // initiate chart drawing

  chart.draw();

});