Line Chart

const config = { type: 'line', data, options: { scales: { x: { type: 'linear', bounds: 'data' } }, plugins: { annotation: { annotations: { annotation1, annotation2, annotation3 } } }, } };

const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        type: 'linear',
        bounds: 'data'
      }
    },
    plugins: {
      annotation: {
        annotations: {
          annotation1,
          annotation2,
          annotation3
        }
      }
    },
  }
};

const annotation1 = { type: 'line', scaleID: 'x', borderWidth: 3, borderColor: 'black', value: 5, label: { rotation: 'auto', content: 'Line at x=5', enabled: true }, };

const annotation1 = {
  type: 'line',
  scaleID: 'x',
  borderWidth: 3,
  borderColor: 'black',
  value: 5,
  label: {
    rotation: 'auto',
    content: 'Line at x=5',
    enabled: true
  },
};

const annotation2 = { type: 'line', scaleID: 'x', borderWidth: 3, borderColor: 'black', value: 90, label: { rotation: 'auto', position: 'start', backgroundColor: 'black', content: 'Line at x=90', enabled: true } };

const annotation2 = {
  type: 'line',
  scaleID: 'x',
  borderWidth: 3,
  borderColor: 'black',
  value: 90,
  label: {
    rotation: 'auto',
    position: 'start',
    backgroundColor: 'black',
    content: 'Line at x=90',
    enabled: true
  }
};

const annotation3 = { type: 'box', xMin: 75, xMax: 85, yMin: 80, yMax: 90, backgroundColor: 'rgba(250,250,0,0.4)', borderColor: 'rgba(0,150,0,0.2)', drawTime: 'beforeDatasetsDraw', borderWidth: 0, borderRadius: 0, };

const annotation3 = {
  type: 'box',
  xMin: 75,
  xMax: 85,
  yMin: 80,
  yMax: 90,
  backgroundColor: 'rgba(250,250,0,0.4)',
  borderColor: 'rgba(0,150,0,0.2)',
  drawTime: 'beforeDatasetsDraw',
  borderWidth: 0,
  borderRadius: 0,
};

const DATA_COUNT = 8; const MIN = 10; const MAX = 100; Utils.srand(8); const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX}; const data = { labels: [10, 20, 30, 40, 50, 60, 70, 80], 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(8);
const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};
const data = {
  labels: [10, 20, 30, 40, 50, 60, 70, 80],
  datasets: [{
    data: Utils.numbers(numberCfg),
  }, {
    data: Utils.numbers(numberCfg),
  }, {
    data: Utils.numbers(numberCfg),
  }]
};