Callout

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

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

const annotation1 = { type: 'line', borderColor: 'rgb(100, 149, 237)', borderDash: [6, 6], borderDashOffset: 0, borderWidth: 3, label: { display: true, backgroundColor: 'rgb(100, 149, 237)', content: (ctx) => 'Average: ' + average(ctx).toFixed(2) }, scaleID: 'y', value: (ctx) => average(ctx) };

const annotation1 = {
  type: 'line',
  borderColor: 'rgb(100, 149, 237)',
  borderDash: [6, 6],
  borderDashOffset: 0,
  borderWidth: 3,
  label: {
    display: true,
    backgroundColor: 'rgb(100, 149, 237)',
    content: (ctx) => 'Average: ' + average(ctx).toFixed(2)
  },
  scaleID: 'y',
  value: (ctx) => average(ctx)
};

const annotation2 = { type: 'line', borderColor: 'rgba(102, 102, 102, 0.5)', borderDash: [6, 6], borderDashOffset: 0, borderWidth: 3, label: { display: true, backgroundColor: 'rgba(102, 102, 102, 0.5)', borderWidth: 1, borderColor: 'rgba(102, 102, 102, 0.5)', callout: { display: true, borderColor: 'rgba(102, 102, 102, 0.5)', borderDash: [6, 6], borderWidth: 2, margin: 0 }, color: 'black', content: (ctx) => (average(ctx) + standardDeviation(ctx)).toFixed(2), position: 'start', xAdjust: 100, yAdjust: -50 }, scaleID: 'y', value: (ctx) => average(ctx) + standardDeviation(ctx) };

const annotation2 = {
  type: 'line',
  borderColor: 'rgba(102, 102, 102, 0.5)',
  borderDash: [6, 6],
  borderDashOffset: 0,
  borderWidth: 3,
  label: {
    display: true,
    backgroundColor: 'rgba(102, 102, 102, 0.5)',
    borderWidth: 1,
    borderColor: 'rgba(102, 102, 102, 0.5)',
    callout: {
      display: true,
      borderColor: 'rgba(102, 102, 102, 0.5)',
      borderDash: [6, 6],
      borderWidth: 2,
      margin: 0
    },
    color: 'black',
    content: (ctx) => (average(ctx) + standardDeviation(ctx)).toFixed(2),
    position: 'start',
    xAdjust: 100,
    yAdjust: -50
  },
  scaleID: 'y',
  value: (ctx) => average(ctx) + standardDeviation(ctx)
};

const annotation3 = { type: 'line', borderColor: 'rgba(102, 102, 102, 0.5)', borderDash: [6, 6], borderDashOffset: 0, borderWidth: 3, label: { display: true, backgroundColor: 'rgba(102, 102, 102, 0.5)', borderWidth: 1, borderColor: 'rgba(102, 102, 102, 0.5)', callout: { display: true, borderColor: 'rgba(102, 102, 102, 0.5)', borderDash: [6, 6], borderWidth: 2, margin: 0 }, color: 'black', content: (ctx) => (average(ctx) - standardDeviation(ctx)).toFixed(2), position: 'end', xAdjust: -100, yAdjust: 50 }, scaleID: 'y', value: (ctx) => average(ctx) - standardDeviation(ctx) };

const annotation3 = {
  type: 'line',
  borderColor: 'rgba(102, 102, 102, 0.5)',
  borderDash: [6, 6],
  borderDashOffset: 0,
  borderWidth: 3,
  label: {
    display: true,
    backgroundColor: 'rgba(102, 102, 102, 0.5)',
    borderWidth: 1,
    borderColor: 'rgba(102, 102, 102, 0.5)',
    callout: {
      display: true,
      borderColor: 'rgba(102, 102, 102, 0.5)',
      borderDash: [6, 6],
      borderWidth: 2,
      margin: 0
    },
    color: 'black',
    content: (ctx) => (average(ctx) - standardDeviation(ctx)).toFixed(2),
    position: 'end',
    xAdjust: -100,
    yAdjust: 50
  },
  scaleID: 'y',
  value: (ctx) => average(ctx) - standardDeviation(ctx)
};

function average(ctx) { const values = ctx.chart.data.datasets[0].data; return values.reduce((a, b) => a + b, 0) / values.length; } function standardDeviation(ctx) { const values = ctx.chart.data.datasets[0].data; const n = values.length; const mean = average(ctx); return Math.sqrt(values.map(x => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / n); }

function average(ctx) {
  const values = ctx.chart.data.datasets[0].data;
  return values.reduce((a, b) => a + b, 0) / values.length;
}
function standardDeviation(ctx) {
  const values = ctx.chart.data.datasets[0].data;
  const n = values.length;
  const mean = average(ctx);
  return Math.sqrt(values.map(x => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / n);
}

const DATA_COUNT = 16; const MIN = 20; const MAX = 100; Utils.srand(8); 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) }] };

const DATA_COUNT = 16;
const MIN = 20;
const MAX = 100;
Utils.srand(8);
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)
  }]
};