Labeling

const config = { type: 'line', data, options: { plugins: { annotation: { annotations: { annotation } } } } };

const config = {
  type: 'line',
  data,
  options: {
    plugins: {
      annotation: {
        annotations: {
          annotation
        }
      }
    }
  }
};

const annotation = { type: 'ellipse', backgroundColor: 'rgba(208, 208, 208, 0.2)', borderWidth: 0, label: { drawTime: 'afterDatasetsDraw', display: true, color: 'rgba(208, 208, 208, 0.6)', content: 'whole year', font: { size: (ctx) => ctx.chart.chartArea.height / 4 }, position: { x: 'center', y: 'end' } } };

const annotation = {
  type: 'ellipse',
  backgroundColor: 'rgba(208, 208, 208, 0.2)',
  borderWidth: 0,
  label: {
    drawTime: 'afterDatasetsDraw',
    display: true,
    color: 'rgba(208, 208, 208, 0.6)',
    content: 'whole year',
    font: {
      size: (ctx) => ctx.chart.chartArea.height / 4
    },
    position: {
      x: 'center',
      y: 'end'
    }
  }
};

const DATA_COUNT = 12; const MIN = 10; const MAX = 100; 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) }] };

const DATA_COUNT = 12;
const MIN = 10;
const MAX = 100;
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)
  }]
};