Question related to weird issue, chart.value is null

[FCnski]

Hey guys!

First of all, i'm loving these charts, they are very nice looking and smooth, props to the creators!

Secondly, i've been running into some issues, is there any problems when validating dates? i got an issue where the console indicates chart.value is null when it really isn't, in fact, if i remove updateOptions() the chart will render just fine with all the data i need, this is happening in just one chart that i happen to be validating some dates, my other charts are all working fine, some of them even have the same date validations i'm using in the problematic chart, could this be a db related issue?

Problem is happening in this section:

watch(() => ([...manuais.value]), (val) => {
      val.forEach((l) => {
        const n = formatDate(Date.now(), 'MM/DD/YYYY')
        const z = formatDate(l.validade, 'MM/DD/YYYY')
        if (z > n) {
          dadosManuais.value.push({ value: true })
        } else {
          dadosManuais.value.push({ value: false })
        }
      })
      const totalizadorManuais = [...dadosManuais.value].reduce((t, l) => {
        t[l.value] = t[l.value] || 0
        t[l.value]++
        return t
      }, [])
      seriesManuais.value = Object.values(totalizadorManuais)
      chartOptionsManuais.value.labels = ['Vencido', 'Em Aberto']
      // BUG - chart.value.updateOptions(chartOptionsManuais.value)
    })

Has anyone ever stumbled into a similar problem?

[FCnski]

Found out a couple of things after a while.

val.forEach((l)... statement has to wrap the entirety of the watcher in order for chart to be not null, everything works fine if this page is the first to be opened, and if its opened subsequently and you refresh it, it will render with no problems whatsoever, this chart follows the same pattern i've used in 4 other charts, it is almost entirely equal to them, just variable names change, i'll keep fiddling with it, hopefully i find a solution soon, if i do, i'll post it here for the sake of others that might run into a similar issue

[FCnski]

I've found the solution, this chart was initialized before the other charts, and when you would leave the page, it wasn't destroyed properly, so when you tried to access it again, it would try to render it again over an existing one causing its value to be null, to solve this, simply add a bool to check if it is really loaded or not, like so:

// Bool to check if its loaded
const loaded = ref(false)

    watch(() => ([...manuais.value]), (val) => {
      if (val !== undefined && val !== null) {
        val.forEach((l) => {
          if (formatDate(l.validade, 'MM/DD/YYYY') > formatDate(Date.now(), 'MM/DD/YYYY')) {
            dadosManuais.value.push({ data: true })
          } else {
            dadosManuais.value.push({ data: false })
          }

          const totalizadorManuais = [...dadosManuais.value].reduce((t, l) => {
            t[l.data] = t[l.data] || 0
            t[l.data]++
            return t
          }, [])
          seriesManuais.value = Object.values(totalizadorManuais)
          // Bool is true = Loaded
          loaded.value = true
        })
      }
    })

[FCnski]

Credits to my boss for finding this one out lol, i had a similar idea to this, but thought updateOptions() should be doing all this