Point

const config = { type: 'line', data, options: { layout: { padding: { right: 10 }, }, scales: { y: { beginAtZero: true, max: 120, min: 0 } }, plugins: { annotation: { clip: false, annotations: { annotation1, annotation2 } } } } };

const config = {
  type: 'line',
  data,
  options: {
    layout: {
      padding: {
        right: 10
      },
    },
    scales: {
      y: {
        beginAtZero: true,
        max: 120,
        min: 0
      }
    },
    plugins: {
      annotation: {
        clip: false,
        annotations: {
          annotation1,
          annotation2
        }
      }
    }
  }
};

const annotation1 = { type: 'label', backgroundColor: 'rgba(245,245,245, 0.5)', content: (ctx) => 'Maximum value is ' + maxValue(ctx).toFixed(2), font: { size: 16 }, padding: { top: 6, left: 6, right: 6, bottom: 12 }, point: { enabled: true, backgroundColor: 'transparent', borderColor: (ctx) => ctx.chart.data.datasets[0].borderColor, pointStyle: 'rectRounded', radius: 10 }, position: { x: (ctx) => maxIndex(ctx) <= 3 ? 'start' : maxIndex(ctx) >= 10 ? 'end' : 'center', y: 'end' }, xValue: (ctx) => maxLabel(ctx), yAdjust: -6, yValue: (ctx) => maxValue(ctx) };

const annotation1 = {
  type: 'label',
  backgroundColor: 'rgba(245,245,245, 0.5)',
  content: (ctx) => 'Maximum value is ' + maxValue(ctx).toFixed(2),
  font: {
    size: 16
  },
  padding: {
    top: 6,
    left: 6,
    right: 6,
    bottom: 12
  },
  point: {
    enabled: true,
    backgroundColor: 'transparent',
    borderColor: (ctx) => ctx.chart.data.datasets[0].borderColor,
    pointStyle: 'rectRounded',
    radius: 10
  },
  position: {
    x: (ctx) => maxIndex(ctx) <= 3 ? 'start' : maxIndex(ctx) >= 10 ? 'end' : 'center',
    y: 'end'
  },
  xValue: (ctx) => maxLabel(ctx),
  yAdjust: -6,
  yValue: (ctx) => maxValue(ctx)
};

const annotation2 = { type: 'point', backgroundColor: 'transparent', borderColor: (ctx) => ctx.chart.data.datasets[0].borderColor, pointStyle: 'rectRounded', radius: 10, xValue: (ctx) => maxLabel(ctx), yValue: (ctx) => maxValue(ctx) };

const annotation2 = {
  type: 'point',
  backgroundColor: 'transparent',
  borderColor: (ctx) => ctx.chart.data.datasets[0].borderColor,
  pointStyle: 'rectRounded',
  radius: 10,
  xValue: (ctx) => maxLabel(ctx),
  yValue: (ctx) => maxValue(ctx)
};

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

function maxValue(ctx) { let max = 0; const dataset = ctx.chart.data.datasets[0]; dataset.data.forEach(function(el) { max = Math.max(max, el); }); return max; } function maxIndex(ctx) { const max = maxValue(ctx); const dataset = ctx.chart.data.datasets[0]; return dataset.data.indexOf(max); } function maxLabel(ctx) { return ctx.chart.data.labels[maxIndex(ctx)]; }

function maxValue(ctx) {
  let max = 0;
  const dataset = ctx.chart.data.datasets[0];
  dataset.data.forEach(function(el) {
    max = Math.max(max, el);
  });
  return max;
}
function maxIndex(ctx) {
  const max = maxValue(ctx);
  const dataset = ctx.chart.data.datasets[0];
  return dataset.data.indexOf(max);
}
function maxLabel(ctx) {
  return ctx.chart.data.labels[maxIndex(ctx)];
}