how to update annotation value in chartjs 3.7.1

user_2097119 0
Viewed 117

Found a bunch of old posts but couldn't find anything on the newer versions. I'm using Chartjs 3.7.1 and chartjs-plugin-annotation 1.4.0

I can add a new annotation via:

myChart.options.plugins.annotation.annotations['newAnnotation'] = {
  type: 'line',
 xMin: 0,
 xMax: 11,
 yMin: 200000,
 yMax: 200000,
 borderColor: 'rgb(255, 99, 132)',
 borderWidth: 2
 };

 myChart.update();

but how do I access the the existing annotation dynamically in order to change the value afterwards?

Trying something like this didn't work:

myChart.options.plugins.annotation.annotations[0].value = 200000;
chart.js annotations plugins
1 Answers

This can be done as follows:

const annotation = myChart.options.plugins.annotation.annotations.newAnnotation;
annotation.yMin = newValue;
annotation.yMax = newValue;
myChart.update();

Please take a look at the runnable code below. To see how it works, type a new y-value into the input element top of the chart and press Enter

const myChart = new Chart('myChart', {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First Dataset',
      data: [65, 59, 80, 81, 56, 55, 40],
      fill: false,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options: {
    plugins: {
      autocolors: false,
      annotation: {
        annotations: {
          newAnnotation: {
            type: 'line',
            yMin: 60,
            yMax: 60,
            borderColor: 'rgb(255, 99, 132)',
            borderWidth: 2
          }
        }
      }
    }
  }
});

const input = document.getElementById('myInput');
input.addEventListener('keypress', event => {
  if (event.key === 'Enter') {
    event.preventDefault();
    const annotation = myChart.options.plugins.annotation.annotations.newAnnotation;
    annotation.yMin = input.value;
    annotation.yMax = input.value;
    myChart.update();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.min.js"></script>
<label for="salary">Enter new y-value and press enter:</label>
<input id="myInput" type="number">
<canvas id="myChart" height="90"></canvas>

user_23584090
Related