Home Forums Report Bugs By default the height of the chart is 400 in react

By default the height of the chart is 400 in react

Viewing 4 posts - 1 through 4 (of 4 total)
  • #59936

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

    #59941

    @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

    #60156

    @vishwas it does not work when the height gets updated

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

    #60170

    @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 methodchart.set("height", 100). Please refer to this Codesandbox link for updated code.


    Vishwas R
    Team CanvasJS

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.