Animation

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

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

const line = { type: 'line', borderColor: 'red', borderWidth: 3, label: { display: true, content: 'Limit', rotation: 90 }, scaleID: 'x', value: 50 };

const line = {
  type: 'line',
  borderColor: 'red',
  borderWidth: 3,
  label: {
    display: true,
    content: 'Limit',
    rotation: 90
  },
  scaleID: 'x',
  value: 50
};

document.getElementById('update').addEventListener('input', update); function update() { const newValue = +document.querySelector('input[type=range]').value; const chart = Object.values(Chart.instances).find(c => c.options._sampleId === uniqueId); chart.data.datasets[0].data[1].x = newValue; chart.data.datasets[0].data[2].x = newValue; chart.options.plugins.annotation.annotations.line.value = newValue; chart.update(); }

document.getElementById('update').addEventListener('input', update);
function update() {
  const newValue = +document.querySelector('input[type=range]').value;
  const chart = Object.values(Chart.instances).find(c => c.options._sampleId === uniqueId);
  chart.data.datasets[0].data[1].x = newValue;
  chart.data.datasets[0].data[2].x = newValue;
  chart.options.plugins.annotation.annotations.line.value = newValue;
  chart.update();
}

const uniqueId = new Date().getTime(); const data = { datasets: [{ backgroundColor: 'rgba(63, 184, 175, 0.3)', borderColor: 'rgba(255, 0, 0, 0.0)', pointRadius: 0, // no dots tension: 0, // straight lines showLine: true, fill: true, data: [ {x: 0, y: 0}, {x: 50, y: 0}, {x: 50, y: 1}, {x: 100, y: 1} ] }] };

const uniqueId = new Date().getTime();
const data = {
  datasets: [{
    backgroundColor: 'rgba(63, 184, 175, 0.3)',
    borderColor: 'rgba(255, 0, 0, 0.0)',
    pointRadius: 0, // no dots
    tension: 0, // straight lines
    showLine: true,
    fill: true,
    data: [
      {x: 0, y: 0},
      {x: 50, y: 0},
      {x: 50, y: 1},
      {x: 100, y: 1}
    ]
  }]
};