how to get React chartjs to resize back down with window

Question

I have this code, which, for some reason, will grow when I resize a window, but not shrink. I was wondering how to remedy this.

https://codesandbox.io/s/react-chartjs-2-example-1nur4

import React from "react";
import { render } from "react-dom";
import LineDemo from "./LineDemo";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const App = () => (
  <div style={styles}>
    <table style={{ width: "100vw", borderCollapse: "collapse" }}>
      <tbody>
        {Array.from({ length: 4 }, el => "foo")
          .concat(<LineDemo />)
          .map(el => (
            <td style={{ border: "solid" }}>{el}</td>
          ))}
      </tbody>
    </table>
  </div>
);

render(<App />, document.getElementById("root"));

Bruno Andrade · Accepted Answer · 2021-12-01 21:35:15Z

12

What worked for me was to add chart container a width style:

<div style={{width: '99%'}}>
    <Bar options={options} data={data} />
</div>

However if I set width 100% it won't work lol

answered Dec 1, 2021 at 21:35

Bruno Andrade

4665 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

117 Over a year ago

i created an account just to let you know this answer resolved about 3 hours of trial. nothing else seemed to work. thank you. ive been googling nonstop, asked chat gpt. nothing did it. but this did

Rounak · Accepted Answer · 2021-07-12 17:49:55Z

9

Have a detailed look at https://www.chartjs.org/docs/latest/configuration/responsive.html. The Important Note section mentions how responsiveness can be achieved. It states that

Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. Responsiveness can then be achieved by setting relative values for the container size.

In your case, the parent container for the line chart is the <div> element. The render function of LineDemo component in LineDemo.js file then can be modified to look like:

render() {
  return (
    <div style={{ position: "relative", margin: "auto", width: "80vw" }}>
      <h2>Line Example</h2>
      <Line ref="chart" data={data} />
    </div>
  );
}

Here is a working example: https://codesandbox.io/s/react-chartjs-2-example-hzygw

edited Jul 12, 2021 at 17:49

answered Aug 7, 2019 at 10:13

Rounak

8147 silver badges16 bronze badges

1 Comment

myahl Over a year ago

For future devs, that documentation page moved here: chartjs.org/docs/latest/configuration/responsive.html

117 · Accepted Answer · 2023-12-18 09:39:49Z

3

another solution that works, for anyone reading in 2023 is this:

canvas {
  width: 100% !important;
}

answered Dec 18, 2023 at 9:39

117

1971 gold badge2 silver badges8 bronze badges

Collectives™ on Stack Overflow

how to get React chartjs to resize back down with window

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related