Annotated Combination of Multiple Line Chart and Candlestick Chart | Stock Drawing Annotations | src | Gallery

HTMLcopy

 
<div id="container">
  <div class="container-title">
    <p>
      See also
      <a href="https://www.anychart.com/products/anystock/drawing_tools/" target="_blank">Drawing Tools and
        Annotations Demo</a>
    </p>
  </div>
</div>

CSScopy

 
html,
body,
#container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScriptAutocompletecopy

​x
 
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
  // https://cdn.anychart.com/csv-data/csco-daily-short.js
  // https://cdn.anychart.com/csv-data/empty_data(2009-2010).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
​
  var cscoDataTable = anychart.data.table();
  cscoDataTable.addData(get_csco_daily_short_data()); // eslint-disable-line no-undef
  cscoDataTable.addData(get_empty_data()); // eslint-disable-line no-undef
​
  // create stock chart
  var chart = anychart.stock();
​
  // set chart title
  chart.title(
    'Annotated Combination of Multiple Line Chart and Candlestick Chart'
  );
​
  // set chart padding
  chart.padding([15, 50, 57, 50]);
​
  // create plot on the chart
  var plot = chart.plot();
  // grid settings
  plot.yGrid(true).xGrid(true).xMinorGrid(true).yMinorGrid(true);
​
  // format legend items
  plot.legend().itemsFormatter(function (items) {
    items.splice(3, 1);
    // return items array
    return items;
  });
​
  // create plot series with mapped data
  var ORCL = plot.line(
    orclDataTable.mapAs({
      value: 4
    })
  );
  ORCL.name('ORCL').stroke('#3C8AD8');
  ORCL.tooltip().format(function () {
    return tooltipFormatter(this, false);
  });
​
  var CSCO = plot.line(
    cscoDataTable.mapAs({
      value: 4
    })
  );
  CSCO.name('CSCO').stroke('#96a6a6');
  CSCO.tooltip().format(function () {
    return tooltipFormatter(this, false);
  });
​
  var MSFT = plot.candlestick(
    msftDataTable.mapAs({
      open: 1,
      high: 2,
      low: 3,
      close: 4
    })
  );
  MSFT.name('MSFT');
  MSFT.legendItem().iconType('rising-falling');
  MSFT.tooltip().format(function () {
    return tooltipFormatter(this, true);
  });
​
  var annotation = plot.annotations();
  // create annotation horizontalLine
  // bottom dashed line
  annotation
    .horizontalLine({
      // X - part of the first anchor
      xAnchor: '2008-08-31',
      // Y - part of the first anchor
      valueAnchor: 14.18,
      // X - part of the second anchor
      secondXAnchor: '2010-01-01',
      // Y - part of the second anchor
      secondValueAnchor: 14.18,
      // set stroke settings
      stroke: {
        thickness: 1,
        color: '#60727B',
        dash: '10 15'
      }
      // disable interaction with Annotation
    })
    .allowEdit(false);
  // create annotation line
  // top dashed line
  annotation
    .line({
      // X - part of the first anchor
      xAnchor: '2009-03-01',
      // Y - part of the first anchor
      valueAnchor: 31,
      // X - part of the second anchor
      secondXAnchor: '2010-05-09',
      // Y - part of the second anchor
      secondValueAnchor: 31,
      // set stroke settings
      stroke: {
        thickness: 1,
        color: '#60727B',
        dash: '10 15'
      }
      // disable interaction with Annotation
    })
    .allowEdit(false);
  // create annotation line
  // top solid line
  annotation
    .line({
      // X - part of the first anchor
      xAnchor: '2008-08-10',
      // Y - part of the first anchor
      valueAnchor: 28.5,
      // X - part of the second anchor
      secondXAnchor: '2010-01-03',
      // Y - part of the second anchor
      secondValueAnchor: 28.5,
      stroke: '2 #6E9C4E'
      // disable interaction with Annotation
    })
    .allowEdit(false);
  // create annotation line
  // MSTF annotations line
  annotation
    .line({
      // X - part of the first anchor
      xAnchor: '2008-08-10',
      // Y - part of the first anchor
      valueAnchor: 27.86,
      // X - part of the second anchor
      secondXAnchor: '2009-03-01',
      // Y - part of the second anchor
      secondValueAnchor: 15.96,
      stroke: '2 #EF730E'
      // disable interaction with Annotation
    })
    .allowEdit(false);
  // create annotation line
  // CSCO annotations line
  annotation
    .line({
      // X - part of the first anchor
      xAnchor: '2008-08-10',
      // Y - part of the first anchor
      valueAnchor: 24.91,
      // X - part of the second anchor
      secondXAnchor: '2009-03-01',
      // Y - part of the second anchor
      secondValueAnchor: 14.18,
      stroke: '2 #96a6a6'
      // disable interaction with Annotation
    })
    .allowEdit(false);
  // create annotation line
  // ORCL annotations line
  annotation
    .line({
      // X - part of the first anchor
      xAnchor: '2008-08-10',
      // Y - part of the first anchor
      valueAnchor: 23.06,
      // X - part of the second anchor
      secondXAnchor: '2009-03-01',
      // Y - part of the second anchor
      secondValueAnchor: 14.47,
      stroke: '2 #3C8AD8'
      // disable interaction with Annotation
    })
    .allowEdit(false);
  // create annotation triangle
  annotation
    .triangle({
      // X - part of the first anchor
      xAnchor: '2009-06-28',
      // Y - part of the first anchor
      valueAnchor: 23.6,
      // X - part of the second anchor
      secondXAnchor: '2009-06-28',
      // Y - part of the second anchor
      secondValueAnchor: 18.5,
      // X - part of the third anchor
      thirdXAnchor: '2010-01-03',
      // Y - part of the third anchor
      thirdValueAnchor: 28.5,
      // set stroke settings
      stroke: '2 #6E9C4E 0.75',
      // set fill settings
      fill: '#6E9C4E 0.3'
      // disable interaction with Annotation
    })
    .allowEdit(false);
  // create annotation andrewsPitchfork
  annotation.andrewsPitchfork({
    // X - part of the first anchor
    xAnchor: '2010-01-24',
    // Y - part of the first anchor
    valueAnchor: 29.5,
    // X - part of the second anchor
    secondXAnchor: '2010-01-03',
    // Y - part of the second anchor
    secondValueAnchor: 28.5,
    // X - part of the third anchor
    thirdXAnchor: '2010-03-14',
    // Y - part of the third anchor
    thirdValueAnchor: 28.5,
    // set stroke settings
    stroke: {
      thickness: 2,
      color: '#6E9C4E',
      dash: '10 10'
    },
    // set hover stroke settings
    hovered: {
      stroke: {
        thickness: 3,
        color: 'green',
        dash: '10 10'
      }
    }
  });
​
  // create scroller series with mapped data
  chart.scroller().candlestick(
    msftDataTable.mapAs({
      open: 1,
      high: 2,
      low: 3,
      close: 4
    })
  );
  chart.tooltip().useHtml(true);
​
  // set chart selected date/time range
  chart.selectRange('2008-06-29', '2010-06-27');
​
  // 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);
});
​
function tooltipFormatter(item, isOHLC) {
  if (isOHLC) {
    return (
      '<br/><br/><span>' +
      item.seriesName +
      '</span><br/>' +
      '<span style="color: #ccc">Open</span>: ' +
      item.open +
      '<br/><span style="color: #ccc">High</span>: ' +
      item.high +
      '<br/><span style="color: #ccc">Low</span>: ' +
      item.low +
      '<br/><span style="color: #ccc">Close</span>: ' +
      item.close
    );
  }
  if (item.seriesName === 'CSCO') {
    var value = item.value;
    if (isNaN(item.value)) {
      value = 'undefined';
    }
    return (
      '<br/><span style="color: #ccc">' +
      item.seriesName +
      '</span>: ' +
      value +
      '<br/>'
    );
  }
  return (
    '<span style="color: #ccc">' +
    item.seriesName +
    '</span>: ' +
    item.value
  );
}

Sample meta

AnyChart Documentation