can't update an annotation file dynamically

[soupmoth]

for context I'm using ChartJS React 2, and am trying to present a "threshold" for a chart, that changes based upon the number of elements in another piece of data. Here's how I'm configuring the options.

`const options = { responsive: true, plugins: { legend: { display: false, position: 'top', }, title: { display: true, text: 'Round 1', },

    annotation: {
      annotations: {
        line1: {
          type: 'line',
          yScale:  "y-axis-1",
          yMin: getThreshold(),
          yMax: getThreshold(),
          borderColor: 'rgb(255, 99, 132)',
          borderWidth: 2,
        }
      },
    }

  },
};` 

GetThreshold() IS returning dynamic values, this is a screenshot of it doing just that

Is there anyway to do this with the framework I'm operating in?

[stockiNail]

@soupmoth I have created a codepen and it seems working: https://codepen.io/stockinail/pen/gOexgjq

Are you able to provide a codepen to have a look?

[stockiNail]

@soupmoth I think I have found a couple of issue in the config you are using.

1. yMax and yMin must be set as scriptable options: yMin: () => getThreshold(),
2. yScale is not a correct option. Should be yScaleID. It works anyway because the plugin is taking the default scale y because not configured in the plugin.
3. I don't see the scale configuration therefore I'm assuming you are using the default scales. The defaults scale ids are x and y therefore "y-axis-1" doesn't seem a correct value (in Chart.js 3).

Have a look to codepen: https://codepen.io/stockinail/pen/gOexgjq

[soupmoth]

Sorry, I posted this when I was extremely tired. The yScale thing was a left over from me trying to find solutions from other issues opened here.

I tried making them scriptable options, and this worked! There was an error in my script too that I noticed because of this, so it was a big help! Thank you very much :)