Configuring scales

scales is an array of scale lines where each object has a set of properties.

Adding scales and changing main properties

You can specify any number of scales by setting the scale objects in the scales array. To configure scales, change the scales parameters values.

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

const scales = [
  { unit: "month", step: 1, format: "MMMM yyy" },
  { unit: "day", step: 1, format: "d" },
];

function Component() {
  const data = getData();
  return <Gantt tasks={data.tasks} scales={scales} />;
}

export default Component;

Setting the start and end dates of the timescale

You can set the date range by using the start and end properties during initialization:

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

const App = () => {
  const data = getData();
  const start = new Date(2022, 2, 5);
  const end = new Date(2023, 3, 1);

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

export default App;

info

If the date range is not set, Gantt uses the dates of the loaded tasks and adds offsets before the first and after the last task in the scale. The offset is equal to one minimal unit of the current scale. The timescale changes dynamically when the tasks' dates are changed. But if the start and end values are set, the date range is fixed.

Styling cells

To style the cells of the time scale, use the css attribute in the corresponding scale object.

import { getData } from "../data";
import { Gantt } from "../../src/";

const data = getData();

const dayStyle = (a) => {
  const day = a.getDay() === 5 || a.getDay() === 6;
  return day ? "sday" : "";
};

const complexScales = [
  { unit: "year", step: 1, format: "yyyy" },
  { unit: "month", step: 2, format: "MMMM yyy" },
  { unit: "week", step: 1, format: "w" },
  { unit: "day", step: 1, format: "d", css: dayStyle },
];

function App() {
  return (
    <Gantt
      {...skinSettings}
      tasks={data.tasks}
      links={data.links}
      scales={complexScales}
      start={new Date(2020, 2, 1)}
      end={new Date(2020, 3, 12)}
      cellWidth={60}
    />
  );
}

export default App;

Configuring the scale height

To configure the height of scales, apply the scaleHeight property and change its value in pixels:

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

const GanttComponent = () => {
  const data = getData();
  const scaleHeightRef = useRef(50);

  return <Gantt tasks={data.tasks} scaleHeight={scaleHeightRef.current} />;
};

export default GanttComponent;