How to make Chart responsive

[JakovGlavac]

Hi, I'm trying to make a responsive chart. So I created a simple example to illustrate my attempt https://codesandbox.io/s/compassionate-ramanujan-kq04y.

In short, I'm using the useWindowDimensions hook to get current window dimensions, which works cuz it logs height and width every time I rescale it.

  const { height, width } = useWindowDimensions();
  console.log({ height, width });

I'm passing those values to the StockChart component.

const StockChart = (height, width)

That is passed to the ChartCanvas component, but the problem is that ChartCanvas is not refreshed when updated data.

<ChartCanvas
  className="graf"
  height={height}   //⬅ here
  ratio={3}
  width={width}   //⬅ here
  margin={margin}
  data={data}
  displayXAccessor={displayXAccessor}
  seriesName="Data"
  xScale={xScale}
  xAccessor={xAccessor}
  xExtents={xExtents}
  zoomAnchor={lastVisibleItemBasedZoomAnchor}
>

This is not my code; I copied it from #561, and I also saw #484 and #559, but they weren't of much help.
What I'm I doing wrong?

[gapetto]

I'm blocked by this as well. What are the possibilites here?

[gapetto]

I came up with a solution. Add this to the chart component:

const [state, setState] = useState(1)

useEffect(() => {
    window.addEventListener('resize', () => {
	    setState(state => state + 1)
    })
}, [])

And set the chart's width so that it's dependent of window.innerWidth, for example

const width = window.innerWidth - 300

Then you pass this width to

The chart will rerender every time you resize the window thanks to event listener and having the width variable will be dependent of the size current window's size