Skip to main content

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 { useState } from "react";
import { getData } from "./data";
import { Gantt } from "@svar-ui/react-gantt";

export default function ExampleCellWidth() {
  const data = getData();

  const [cellWidth, setCellWidth] = useState(150);

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

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

import { useState } from "react";
import { getData } from "./data";
import { Gantt } from "@svar-ui/react-gantt";

export default function ExampleCellHeight() {
  const data = getData();

  const [cellHeight, setCellHeight] = useState(38);

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

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 { useState } from "react";
import { getData } from "./data";
import { Gantt } from "@svar-ui/react-gantt";

export default function ExampleLengthUnit() {
  const data = getData();

  const [lengthUnit, setLengthUnit] = useState("hour");

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

Related sample: Chart sizes