html, body, #container 

{

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // load data

  anychart.data.loadCsvFile("https://static.anychart.com/git-storage/word-press/data/candlestick-chart-tutorial/EUR_USDHistoricalData2year.csv", function (data) {

    // create a data table

    var dataTable = anychart.data.table(0, 'MMM d, yyyy');

    dataTable.addData(data);

​

    // map data

    var mapping = dataTable.mapAs({ 'open': 2, 'high': 3, 'low': 4, 'close': 1 });

    // set the chart type

    var chart = anychart.stock();

​

    // set the series

    var series = chart.plot(0).candlestick(mapping);

    series.name("EUR USD Trade Data");

​

    // set the chart title

    chart.title("EUR USD Historical Trade Data");

​

    // create a plot

    var plot = chart.plot(0);

    // create an EMA indicator with period 20

    var ema20 = plot.ema(mapping, 20).series();

    // set the EMA color

    ema20.stroke('#bf360c');

    // modify the color of candlesticks making them black and white

    series.fallingFill("black");

    series.fallingStroke("black");

    series.risingFill("white");

    series.risingStroke("black");

    // disable the scroller axis

    chart.scroller().xAxis(false);

    // map "open" values for the scroller

    openValue = dataTable.mapAs();

    openValue.addField('value', 2);

    // create a scroller series with the mapped data

    chart.scroller().column(openValue);

    // set the container id

    chart.container('container');

    // draw the chart

    chart.draw();

​

  });

});