html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

​

.anychart-tooltip {

  width: 300px;

  background: white;

  color: black;

  box-shadow: 5px 5px 18px #333;

}

​

.anychart-tooltip h3 {

  text-align: center;

}

​

.anychart-tooltip img {

  max-height: 50px;

  display: block;

  margin: 0 auto 10px;

}

​

.anychart-tooltip table {

  width: 100%;

}

​

.anychart-tooltip table tr td:last-child {

  text-align: right;

}

​

.anychart-tooltip .k-square {

  color: #67b6f4;

}

​

.anychart-tooltip .d-square {

  color: #428cd6;

}

​

.anychart-tooltip .j-square {

  color: #ed6c20;

}

anychart.onDocumentReady(function () {

  // 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 data for the candlestick series

      var ohlcMapping = dataTable.mapAs({

        open: 1,

        high: 2,

        low: 3,

        close: 4

      });

​

      // map data for scroller and volume series

      var valueMapping = dataTable.mapAs({

        value: 5

      });

​

      // create stock chart

      var chart = anychart.stock();

​

      var plot = chart.plot(0);

​

      // create and setup candlestick series on the first plot

      var ohlcSeries = plot.candlestick(ohlcMapping);

      ohlcSeries.name('AAPL');

      ohlcSeries.legendItem().iconType('risingfalling');

​

      // create volume series on the first plot

      var volumeSeries = plot.column(valueMapping);

      volumeSeries.name('Volume');

​

      // set max height of volume series and attach it to the bottom of plot

      volumeSeries.maxHeight('30%').bottom(0);

​

      // create indicator plot

      var indicatorPlot = chart.plot(1);

​

      // set indicator plot height

      indicatorPlot.height('25%');

​

      // create KDJ indicator

      indicatorPlot.kdj(ohlcMapping);

​

      // get tooltip

      var tooltip = chart.tooltip();

​

      // setup formatters for the title and content of the tooltip using HTML

      tooltip.useHtml(true);

      tooltip.titleFormat(function () {

        return (

          '<h3>' +

          anychart.format.dateTime(this.x, 'dd MMMM yyyy') +

          '</h3>'

        );

      });

      tooltip.unionFormat(function () {

        return (

          '<img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg"/>' +

          '<table>' +

          '<tr><td>Open</td><td>$' +

          anychart.format.number(this.points[0].open, 2) +

          '</td></tr>' +

          '<tr><td>High</td><td>$' +

          anychart.format.number(this.points[0].high, 2) +

          '</td></tr>' +

          '<tr><td>Low</td><td>$' +

          anychart.format.number(this.points[0].low, 2) +

          '</td></tr>' +

          '<tr><td>Close</td><td>$' +

          anychart.format.number(this.points[0].close, 2) +

          '</td></tr>' +

          '<tr><td>Volume</td><td>$' +

          anychart.format.number(this.points[1].value, 2) +

          '</td></tr>' +

          '<tr><td><span class="k-square">&#9724;</span>%K(14, 5)</td><td>$' +

          anychart.format.number(this.points[2].value, 2) +

          '</td></tr>' +

          '<tr><td><span class="d-square">&#9724;</span>%D(5)</td><td>$' +

          anychart.format.number(this.points[3].value, 2) +

          '</td></tr>' +

          '<tr><td><span class="j-square">&#9724;</span>%J</td><td>$' +

          anychart.format.number(this.points[4].value, 2) +

          '</td></tr>' +

          '</table>'

        );

      });

​

      // create scroller series with mapped data

      chart.scroller().line(ohlcMapping);

      // set container id for the chart

      chart.container('container');

      // initiate chart drawing

      chart.draw();

​

      // set values for selected range

      chart.selectRange('qtd', 1, 'last-date');

​

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

    }

  );

});