chart does not update on class change

[titaniumbones]

I'm rewriting a vanilla HTML/js project in react, in which charts are hidden at time of creation and shown using a toggle button which adds a class to the parent of a <ChartistGraph/> ocmponent.

I'm having trouble forcing an update on the chart component when the display value of the component container changes from none to block.

in vanilla JS, I could trigger this update as follows:

  // trigger chartist update event on tab -- mostly for first click, otherwise it doesn't
  // know its size (b/c display:none on start. )
  document.querySelector(`#${tabName} figure`).__chartist__.update()

in React, I don't seem to be able to accomplish this. If I create the chart hwen its parent is displayed, it renders properly:

I can then hide it:

But when I go to redisplay it, the chart has been resized to width=height=0:

So, I guess the chart size is updated when I hide the component, but not when I re-show it. The parent component (code here) is clearly re-rendering when the display class changes. But I do not seem to be able to trigger an appropriate update of the chart myself.

I've tried adding a ref to the <ChartistGraph /> component, and then triggering chartist''s own update() function in the render:

    if (this.chartRef.current) {
      console.log('CHARTREF2', this.chartRef.current.chart.__chartist__.update)
      this.chartRef.current.chart.__chartist__.update(series)
    }

But this does not fix the problem for me as it did in the vanilla JS version.

I see there are a couple of possibly-related issues, e.g. #73, but I think this one is distinct and I would love to get some guidance. Thanks!