Shadow

const config = { type: 'line', data, options: { scales: { y: { beginAtZero: true, max: 120, min: 0 } }, plugins: { annotation: { annotations: { annotation1, annotation2, annotation3, annotation4, annotation5 } } } } };

const config = {
  type: 'line',
  data,
  options: {
    scales: {
      y: {
        beginAtZero: true,
        max: 120,
        min: 0
      }
    },
    plugins: {
      annotation: {
        annotations: {
          annotation1,
          annotation2,
          annotation3,
          annotation4,
          annotation5
        }
      }
    }
  }
};

const annotation1 = { type: 'polygon', backgroundColor: 'white', backgroundShadowColor: 'black', borderColor: 'red', borderJoinStyle: 'round', borderWidth: 7, radius: 40, rotation: 180, shadowBlur: 3, shadowOffsetX: 3, shadowOffsetY: 10, xValue: (ctx) => value(ctx, 0, 2, 'x'), yValue: (ctx) => value(ctx, 0, 2, 'y') };

const annotation1 = {
  type: 'polygon',
  backgroundColor: 'white',
  backgroundShadowColor: 'black',
  borderColor: 'red',
  borderJoinStyle: 'round',
  borderWidth: 7,
  radius: 40,
  rotation: 180,
  shadowBlur: 3,
  shadowOffsetX: 3,
  shadowOffsetY: 10,
  xValue: (ctx) => value(ctx, 0, 2, 'x'),
  yValue: (ctx) => value(ctx, 0, 2, 'y')
};

const annotation2 = { type: 'polygon', backgroundColor: 'white', backgroundShadowColor: 'black', borderColor: 'red', borderJoinStyle: 'round', borderWidth: 7, radius: 40, shadowBlur: 3, shadowOffsetX: 3, shadowOffsetY: 10, xValue: (ctx) => value(ctx, 0, 4, 'x'), yValue: (ctx) => value(ctx, 0, 4, 'y') };

const annotation2 = {
  type: 'polygon',
  backgroundColor: 'white',
  backgroundShadowColor: 'black',
  borderColor: 'red',
  borderJoinStyle: 'round',
  borderWidth: 7,
  radius: 40,
  shadowBlur: 3,
  shadowOffsetX: 3,
  shadowOffsetY: 10,
  xValue: (ctx) => value(ctx, 0, 4, 'x'),
  yValue: (ctx) => value(ctx, 0, 4, 'y')
};

const annotation3 = { type: 'label', color: 'black', content: '!', font: { size: 40, family: 'Arial', weight: 'bold' }, xValue: (ctx) => value(ctx, 0, 4, 'x'), yValue: (ctx) => value(ctx, 0, 4, 'y') };

const annotation3 = {
  type: 'label',
  color: 'black',
  content: '!',
  font: {
    size: 40,
    family: 'Arial',
    weight: 'bold'
  },
  xValue: (ctx) => value(ctx, 0, 4, 'x'),
  yValue: (ctx) => value(ctx, 0, 4, 'y')
};

const annotation4 = { type: 'polygon', backgroundColor: 'red', backgroundShadowColor: 'black', borderColor: 'white', borderWidth: 4, radius: 40, rotation: 22.5, shadowBlur: 3, shadowOffsetX: 3, shadowOffsetY: 10, sides: 8, xValue: (ctx) => value(ctx, 0, 6, 'x'), yValue: (ctx) => value(ctx, 0, 6, 'y') };

const annotation4 = {
  type: 'polygon',
  backgroundColor: 'red',
  backgroundShadowColor: 'black',
  borderColor: 'white',
  borderWidth: 4,
  radius: 40,
  rotation: 22.5,
  shadowBlur: 3,
  shadowOffsetX: 3,
  shadowOffsetY: 10,
  sides: 8,
  xValue: (ctx) => value(ctx, 0, 6, 'x'),
  yValue: (ctx) => value(ctx, 0, 6, 'y')
};

const annotation5 = { type: 'label', color: 'white', content: 'STOP', font: { size: 24 }, xValue: (ctx) => value(ctx, 0, 6, 'x'), yValue: (ctx) => value(ctx, 0, 6, 'y') };

const annotation5 = {
  type: 'label',
  color: 'white',
  content: 'STOP',
  font: {
    size: 24
  },
  xValue: (ctx) => value(ctx, 0, 6, 'x'),
  yValue: (ctx) => value(ctx, 0, 6, 'y')
};

function value(ctx, datasetIndex, index, prop) { const meta = ctx.chart.getDatasetMeta(datasetIndex); const parsed = meta.controller.getParsed(index); return parsed ? parsed[prop] : NaN; }

function value(ctx, datasetIndex, index, prop) {
  const meta = ctx.chart.getDatasetMeta(datasetIndex);
  const parsed = meta.controller.getParsed(index);
  return parsed ? parsed[prop] : NaN;
}

const DATA_COUNT = 8; const MIN = 10; const MAX = 100; Utils.srand(5); const labels = []; for (let i = 0; i < DATA_COUNT; ++i) { labels.push('' + i); } const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX}; const data = { labels: labels, datasets: [{ data: Utils.numbers(numberCfg) }, { data: Utils.numbers(numberCfg) }, { data: Utils.numbers(numberCfg) }] };

const DATA_COUNT = 8;
const MIN = 10;
const MAX = 100;
Utils.srand(5);
const labels = [];
for (let i = 0; i < DATA_COUNT; ++i) {
  labels.push('' + i);
}
const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};
const data = {
  labels: labels,
  datasets: [{
    data: Utils.numbers(numberCfg)
  }, {
    data: Utils.numbers(numberCfg)
  }, {
    data: Utils.numbers(numberCfg)
  }]
};