Styling

You can customize styles of the Gantt interface to meet your project requirements. The library provides a wide range of css variables with the next built-in themes:

Willow
WillowDark

Theme settings

Willow theme settings:

.wx-willow-theme {
    --wx-gantt-border: 1px solid #1d1e261a;
    --wx-gantt-form-header-border: none;
    --wx-gantt-icon-color: #9fa1ae;

    /* bars */
    --wx-gantt-bar-font: var(--wx-font-weight) var(--wx-font-size)
        var(--wx-font-family);
    --wx-gantt-bar-border-radius: 3px;
    --wx-gantt-milestone-border-radius: 3px;

    --wx-gantt-task-color: #3983eb;
    --wx-gantt-task-font-color: #fff;
    --wx-gantt-task-fill-color: #1f6bd9;
    --wx-gantt-task-border-color: #1f6bd9;
    --wx-gantt-task-border: 1px solid transparent;

    --wx-gantt-project-color: #00ba94;
    --wx-gantt-project-font-color: #ffffff;
    --wx-gantt-project-fill-color: #099f81;
    --wx-gantt-project-border-color: #099f81;
    --wx-gantt-project-border: 1px solid transparent;

    --wx-gantt-milestone-color: #ad44ab;

    --wx-gantt-select-color: #eaedf5;
    --wx-gantt-link-color: #9fa1ae;
    --wx-gantt-link-marker-background: #eaedf5;
    --wx-gantt-link-marker-color: #9fa1ae;

    --wx-gantt-bar-shadow: 0px 1px 2px rgba(44, 47, 60, 0.06),
        0px 3px 10px rgba(44, 47, 60, 0.12);

    --wx-gantt-progress-marker-height: 26px;
    --wx-gantt-progress-border-color: #c0c3ce;

    --wx-gantt-baseline-border-radius: 2px;

    /* grid */
    --wx-grid-header-font: var(--wx-font-weight-md) var(--wx-font-size)
        var(--wx-font-family);
    --wx-grid-header-font-color: var(--wx-color-font);
    --wx-grid-header-text-transform: capitalize;
    --wx-grid-header-shadow: none;

    --wx-grid-body-font: var(--wx-font-weight) var(--wx-font-size)
        var(--wx-font-family);
    --wx-grid-body-font-color: var(--wx-color-font);
    --wx-grid-body-row-border: var(--wx-gantt-border);
    --wx-grid-body-cell-border: 1px solid transparent;

    /* timescale */
    --wx-timescale-font: var(--wx-font-weight-md) var(--wx-font-size-sm)
        var(--wx-font-family);
    --wx-timescale-font-color: var(--wx-color-font);
    --wx-timescale-text-transform: uppercase;
    --wx-timescale-shadow: none;
    --wx-timescale-border: var(--wx-gantt-border);

    /* grid and timescale */
    --wx-gantt-holiday-background: #f0f6fa;
    --wx-gantt-holiday-color: #9fa1ae;

    /* markers */
    --wx-gantt-marker-font: var(--wx-font-weight-md) var(--wx-font-size-sm)
        var(--wx-font-family);
    --wx-gantt-marker-font-color: #fff;
    --wx-gantt-marker-color: rgba(6, 189, 248, 0.77);

    /* tooltips */
    --wx-tooltip-font: var(--wx-font-weight) var(--wx-font-size)
        var(--wx-font-family);
    --wx-tooltip-font-color: #e6e6e6;
    --wx-tooltip-background: #4f525a;

    /* sidebar */
    --wx-sidebar-close-icon: #c0c3ce;
}

WillowDark theme settings:

.wx-willow-dark-theme {
    color-scheme: dark;

    --wx-gantt-border: var(--wx-border);
    --wx-gantt-form-header-border: none;
    --wx-gantt-icon-color: #9fa1ae;

    /* bars */
    --wx-gantt-bar-font: var(--wx-font-weight) var(--wx-font-size) var(--wx-font-family);
    --wx-gantt-bar-border-radius: 3px;
    --wx-gantt-milestone-border-radius: 3px;

    --wx-gantt-task-color: #37a9ef;
    --wx-gantt-task-font-color: #ffffffe5;
    --wx-gantt-task-fill-color: #098cdc;
    --wx-gantt-task-border-color: #098cdc;
    --wx-gantt-task-border: 1px solid transparent;

    --wx-gantt-project-color: #00ba94;
    --wx-gantt-project-font-color: #ffffffe5;
    --wx-gantt-project-fill-color: #099f81;
    --wx-gantt-project-border-color: #099f81;
    --wx-gantt-project-border: 1px solid transparent;

    --wx-gantt-progress-marker-height: 26px;
    --wx-gantt-progress-border-color: #4b5359;

    --wx-gantt-baseline-border-radius: 2px;

    /* temp*/
    --wx-gantt-bar-shadow: 0px 1px 2px rgba(44, 47, 60, 0.06), 0px 3px 10px rgba(44, 47, 60, 0.12);

    --wx-gantt-milestone-color: #ad44ab;

    --wx-gantt-select-color: #384047;
    --wx-gantt-link-color: #9fa1ae;
    --wx-gantt-link-marker-background: #384047;
    --wx-gantt-link-marker-color: #9fa1ae;

    /* grid */
    --wx-grid-header-font: var(--wx-font-weight-md) var(--wx-font-size) var(--wx-font-family);
    --wx-grid-header-font-color: var(--wx-color-font);
    --wx-grid-header-text-transform: capitalize;
    --wx-grid-header-shadow: none;

    --wx-grid-body-font: var(--wx-font-weight) var(--wx-font-size) var(--wx-font-family);
    --wx-grid-body-font-color: var(--wx-color-font);
    --wx-grid-body-row-border: var(--wx-border);
    --wx-grid-body-cell-border: 1px solid transparent;

    /* timescale */
    --wx-timescale-font: var(--wx-font-weight-md) var(--wx-font-size-sm) var(--wx-font-family);
    --wx-timescale-font-color: var(--wx-color-font);
    --wx-timescale-text-transform: uppercase;
    --wx-timescale-shadow: none;
    --wx-timescale-border: var(--wx-border);

    /* grid and timescale */
    --wx-gantt-holiday-background: #303539;
    --wx-gantt-holiday-color: #878994;

    /* markers */
    --wx-gantt-marker-font: var(--wx-font-weight-md) var(--wx-font-size-sm) var(--wx-font-family);
    --wx-gantt-marker-font-color: #fff;
    --wx-gantt-marker-color: rgba(6, 189, 248, 0.77);

    /* tooltips */
    --wx-tooltip-font: var(--wx-font-weight) var(--wx-font-size) var(--wx-font-family);
    --wx-tooltip-font-color: #e6e6e6;
    --wx-tooltip-background: #4f525a;

    /* sidebar */
    --wx-sidebar-close-icon: #384047;
}

Applying a theme

Apply the desired theme by importing the theme and wrapping Gantt into the required theme tag:

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

const data = getData();

function GanttComponent() {
  return (
    <Willow>
      <Gantt tasks={data.tasks} 
      //other settings 
      />
    </Willow>
  );
}

export default GanttComponent;

If you need to apply different themes to multiple charts, wrap each Gantt tag into the required theme tag.

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

const data = getData();

function App() {
  return (
    <>
      <Willow>
        <Gantt
          tasks={data.tasks}
          links={data.links}
          scales={data.scales}
          columns={simpleColumns}
          start={new Date(2021, 2, 1)}
          end={new Date(2021, 3, 1)}
        />
      </Willow>

      <WillowDark>
        <Gantt
          tasks={data.newtasks}
          links={data.newlinks}
          scales={data.newscales}
          columns={data.columns}
          start={new Date(2023, 2, 1)}
          end={new Date(2023, 3, 1)}
        />
      </WillowDark>
    </>
  );
}

export default App;

Customizing theme settings

To change the themes settings, create a CSS class by changing values of the required CSS variables and apply it to Gantt.

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

const data = getData();

function Demo() {
  return (
    <div className="demo" style={{ padding: "20px" }}>
      <div>
        <Gantt 
          tasks={data.tasks}
          links={data.links}
          scales={data.scales} />
      </div>
    </div>
  );
}

export default Demo;

.demo {
  --wx-gantt-border: 1px solid #a8ae69;
  --wx-gantt-form-header-border: solid;
  --wx-gantt-icon-color: #9d95bc;
  --wx-gantt-task-color: #9d95bc;
}

info

You can also style cells of the timescale: Styling cells

Styling

Theme settings​

Applying a theme​

Customizing theme settings​

Theme settings

Applying a theme

Customizing theme settings