Configuring chart sizes

How to configure scales, see Configuring scales

Setting the cell width and height

To set the cell width, use the cellWidth property. The default value is 100.

import { getData } from "./data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import { useState } from "react";

function GanttComponent() {
  const data = getData();
  const [cellWidth, setCellWidth] = useState(150);

  return <Gantt tasks={data.tasks} scales={data.scales} cellWidth={cellWidth} />;
}

export default GanttComponent;

To set the cell height, use the cellHeight property. The default value is 38.

import { getData } from "./data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import { useRef } from "react";

function App() {
  const data = getData();
  const cellHeight = useRef(38);

  return (
    <Gantt tasks={data.tasks} scales={data.scales} cellHeight={cellHeight.current} />
  );
}

export default App;

Setting the task length unit

You can use the lengthUnit property to set the minimal unit of task length displayed in a chart, which is day by default. The lengthUnit should be equal to or smaller than the scales unit. Possible lengthUnit values: hour, day, week, month, quarter.

Example:

import { getData } from "./data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import { useState } from "react";

function GanttComponent() {
  const data = getData();
  const [lengthUnit, setLengthUnit] = useState("hour");

  return (
    <Gantt
      tasks={data.tasks}
      lengthUnit={lengthUnit}
    />
  );
}

export default GanttComponent;