By default the height of the chart is 400 in react

[SCompliance]

By default the height of the chart is 400 in react instead of taking the height of the container.

[Vishwas R]

@scompliance,

In case of React Charts, you can set the height and width of the chart-container by passing it as containerProps as shown in the code-snippet below.
<CanvasJSChart options={options} containerProps={{ width: '100%', height: '300px' }} />

Please refer to React Charts documentation for more information.

—
Vishwas R
Team CanvasJS

[SCompliance]

@vishwas it does not work when the height gets updated

https://codesandbox.io/p/sandbox/chart-js-react-forked-9lnjtz

[Vishwas R]

@scompliance,

To ensure that the chart adjusts to the updated height, you can use a key prop on the CanvasJSChart component. When the height state changes, updating the key prop will force React to treat the component as a new one, which will apply the updated height. Please find the updated code-snippet below.

return (
  <div>
    <CanvasJSChart
      options={options}
      containerProps={{ width: "100%", height }}
      key={height}  // This forces re-mount when the height changes
    />
  </div>
);

Another option is to directly update the chart’s height using the set method – chart.set("height", 100). Please refer to this Codesandbox link for updated code.

—
Vishwas R
Team CanvasJS