Google gantt chart not updating height

Question

I am using the react component of Google's Gantt chart. The chart data is part of my component's state, I am updating it based on user action. I am calcuating the Gantt chart height based on the number of rows and pass this as the height prop.

<Chart
      chartType="Gantt"
      data={[columns, ...this.state.data_rows]}
      width="100%"
      height={(this.state.data_rows.length + 1) * 42}
      legendToggle
    />

Unfortunately, it seems like the update to the chartData prop is considered, but the height is not updated.

I have built a sandbox to show this:

https://codesandbox.io/s/l59199w8zl

If you click the "add row" button, a row is added, but the height remains constant. What can I do to make the Gantt chart grow as needed?

Answer 1

You should try to update the SVG height; I have modified the code to get height dynamically and set SVG height whenever a row is added.

https://codesandbox.io/s/7jy25q8mj

class App extends React.Component {
  state = {
    data_rows: [
      [
        "Research",
        "Find sources",
        new Date(2015, 0, 1),
        new Date(2015, 0, 5),
        null,
        100,
        null
      ],
      [
        "Write",
        "Write paper",
        null,
        new Date(2015, 0, 9),
        daysToMilliseconds(3),
        25,
        "Research,Outline"
      ],
      [
        "Cite",
        "Create bibliography",
        null,
        new Date(2015, 0, 7),
        daysToMilliseconds(1),
        20,
        "Research"
      ],
      [
        "Complete",
        "Hand in paper",
        null,
        new Date(2015, 0, 10),
        daysToMilliseconds(1),
        0,
        "Cite,Write"
      ],
      [
        "Outline",
        "Outline paper",
        null,
        new Date(2015, 0, 6),
        daysToMilliseconds(1),
        100,
        "Research"
      ]
    ]
  };

  onAddRow() {
    let newState = Object.assign({}, this.state);
    newState.data_rows.push([
      "Task" + newState.data_rows.length,
      "Some new task",
      null,
      new Date(2015, 0, 6),
      daysToMilliseconds(1),
      100,
      "Research"
    ]);
    this.data_rows++;
    this.setState(newState);
  }

  getHeight() {
    if (document.getElementsByTagName("svg")[0]) {
      document
        .getElementsByTagName("svg")[0]
        .setAttribute("height", (this.state.data_rows.length + 1) * 42);
      document
        .getElementsByTagName("svg")[1]
        .setAttribute("height", (this.state.data_rows.length + 1) * 42);
    }

    return (this.state.data_rows.length + 1) * 42;
  }

  render() {
    return (
      <div className="App">
        <span
          style={{ backgroundColor: "#0f0", cursor: "pointer" }}
          onClick={() => this.onAddRow()}
        >
          add row
          </span>
        <div id="chart_div">
          <Chart
            chartType="Gantt"
            data={[columns, ...this.state.data_rows]}
            width="100%"
            height={this.getHeight()}
            legendToggle
          />
        </div>
        <div>

        </div>
      </div>
    );
  }
}