Combined annotations

const config = { type: 'bar', data, options: { scale: { y: { beginAtZero: true, max: 120, min: 0 } }, plugins: { annotation: { common: { drawTime: 'beforeDraw' }, annotations: { annotation1, annotation2, annotation3, annotation4 } } } } };

const config = {
  type: 'bar',
  data,
  options: {
    scale: {
      y: {
        beginAtZero: true,
        max: 120,
        min: 0
      }
    },
    plugins: {
      annotation: {
        common: {
          drawTime: 'beforeDraw'
        },
        annotations: {
          annotation1,
          annotation2,
          annotation3,
          annotation4
        }
      }
    }
  }
};

const annotation1 = { type: 'line', borderColor: 'green', borderDash: [6, 6], borderWidth: 3, label: { display: true, backgroundColor: 'lightGreen', borderRadius: 0, color: 'green', content: 'Project timeline' }, arrowHeads: { end: { display: true, fill: true, borderDash: [], borderColor: 'green' } }, xMax: 10.5, xMin: 2.5, xScaleID: 'x', yMax: 110, yMin: 110, yScaleID: 'y' };

const annotation1 = {
  type: 'line',
  borderColor: 'green',
  borderDash: [6, 6],
  borderWidth: 3,
  label: {
    display: true,
    backgroundColor: 'lightGreen',
    borderRadius: 0,
    color: 'green',
    content: 'Project timeline'
  },
  arrowHeads: {
    end: {
      display: true,
      fill: true,
      borderDash: [],
      borderColor: 'green'
    }
  },
  xMax: 10.5,
  xMin: 2.5,
  xScaleID: 'x',
  yMax: 110,
  yMin: 110,
  yScaleID: 'y'
};

const annotation2 = { type: 'line', borderColor: 'green', borderDash: [6, 6], borderWidth: 1, xMax: 2.5, xMin: 2.5, xScaleID: 'x', yMax: 0, yMin: 110, yScaleID: 'y' };

const annotation2 = {
  type: 'line',
  borderColor: 'green',
  borderDash: [6, 6],
  borderWidth: 1,
  xMax: 2.5,
  xMin: 2.5,
  xScaleID: 'x',
  yMax: 0,
  yMin: 110,
  yScaleID: 'y'
};

const annotation3 = { type: 'line', borderColor: 'green', borderDash: [6, 6], borderWidth: 1, xMax: 10.5, xMin: 10.5, xScaleID: 'x', yMax: 0, yMin: 110, yScaleID: 'y' };

const annotation3 = {
  type: 'line',
  borderColor: 'green',
  borderDash: [6, 6],
  borderWidth: 1,
  xMax: 10.5,
  xMin: 10.5,
  xScaleID: 'x',
  yMax: 0,
  yMin: 110,
  yScaleID: 'y'
};

const annotation4 = { type: 'point', backgroundColor: 'green', borderWidth: 0, xValue: 2.5, xScaleID: 'x', yValue: 110, yScaleID: 'y' };

const annotation4 = {
  type: 'point',
  backgroundColor: 'green',
  borderWidth: 0,
  xValue: 2.5,
  xScaleID: 'x',
  yValue: 110,
  yScaleID: 'y'
};

const DATA_COUNT = 12; const MIN = 10; const MAX = 100; Utils.srand(8); const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX}; const data = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], datasets: [{ data: Utils.numbers(numberCfg) }, { data: Utils.numbers(numberCfg) }] };

const DATA_COUNT = 12;
const MIN = 10;
const MAX = 100;
Utils.srand(8);
const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};
const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  datasets: [{
    data: Utils.numbers(numberCfg)
  }, {
    data: Utils.numbers(numberCfg)
  }]
};