Label visibility

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

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

const annotation = { type: 'line', borderColor: 'lightGreen', borderDashOffset: 0, borderWidth: 10, drawTime: 'beforeDatasetsDraw', label: { enabled: false, backgroundColor: 'green', borderWidth: 0, drawTime: 'afterDatasetsDraw', color: 'white', content: (ctx) => ['Average of dataset', 'is: ' + average(ctx).toFixed(3)], textAlign: 'center' }, scaleID: 'y', value: (ctx) => average(ctx), enter(ctx, event) { toggleLabel(ctx, event); }, leave(ctx, event) { toggleLabel(ctx, event); } };

const annotation = {
  type: 'line',
  borderColor: 'lightGreen',
  borderDashOffset: 0,
  borderWidth: 10,
  drawTime: 'beforeDatasetsDraw',
  label: {
    enabled: false,
    backgroundColor: 'green',
    borderWidth: 0,
    drawTime: 'afterDatasetsDraw',
    color: 'white',
    content: (ctx) => ['Average of dataset', 'is: ' + average(ctx).toFixed(3)],
    textAlign: 'center'
  },
  scaleID: 'y',
  value: (ctx) => average(ctx),
  enter(ctx, event) {
    toggleLabel(ctx, event);
  },
  leave(ctx, event) {
    toggleLabel(ctx, event);
  }
};

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

function average(ctx) { const values = ctx.chart.data.datasets[0].data; return values.reduce((a, b) => a + b, 0) / values.length; } function toggleLabel(ctx, event) { const oneThirdWidth = ctx.element.width / 3; const chart = ctx.chart; const annotationOpts = chart.options.plugins.annotation.annotations.annotation; annotationOpts.label.enabled = !annotationOpts.label.enabled; annotationOpts.label.position = (event.x / ctx.chart.chartArea.width * 100) + '%'; chart.update(); }

function average(ctx) {
  const values = ctx.chart.data.datasets[0].data;
  return values.reduce((a, b) => a + b, 0) / values.length;
}
function toggleLabel(ctx, event) {
  const oneThirdWidth = ctx.element.width / 3;
  const chart = ctx.chart;
  const annotationOpts = chart.options.plugins.annotation.annotations.annotation;
  annotationOpts.label.enabled = !annotationOpts.label.enabled;
  annotationOpts.label.position = (event.x / ctx.chart.chartArea.width * 100) + '%';
  chart.update();
}