jsgantt-improved: a dependency-free Gantt chart component in plain JavaScript

Two files and no dependencies

jsgantt-improved is a fully featured Gantt chart component built entirely in JavaScript, CSS and AJAX, and the readme stresses that it is lightweight with no need of external libraries or additional images.

That last point is the design constraint and it explains the whole shape of the project. A Gantt chart rendered as a table with a set of absolutely positioned bars needs no canvas and no images, so the component is plain DOM, plain CSS and a bit of XMLHttpRequest. There is nothing to load, nothing to configure and no build step required on the consuming side.

The installation is correspondingly trivial. You can start using it by including the files jsgantt.js and jsgantt.css that are inside the dist folder, or install it from npm.

<link href="jsgantt.css" rel="stylesheet" type="text/css"/>
<script src="jsgantt.js" type="text/javascript"></script>

Or install it from npm with npm install jsgantt-improved, and import it in JavaScript with import {JSGantt} from 'jsgantt-improved'.

Both routes are documented, and the difference between them is worth noting. The script-tag route gives you a global JSGantt object, while the npm route gives you a named export. The package metadata shows the module entry point is dist/index.js, and the dist script itself is produced by browserify with the standalone flag set to JSGantt, which is what makes the global available.

The project has wrapper packages for the common frameworks, and the readme points at them: ng-gantt for Angular, react-jsgantt for React, and a StackBlitz example for Vue, plus a .NET documentation page. That is a sensible arrangement, because the underlying component is framework-agnostic and each wrapper handles the binding.

The primary language is TypeScript, the homepage is jsganttimproved.github.io/jsgantt-improved, the default branch is master, and the last push was on 2026-04-14. The licence field in the package metadata is ISC, while the recorded licence for the repository is a custom one that GitHub cannot classify, with the terms in the LICENSE file.

The project is based on the original Google Code jsgantt project, which the readme credits with a link, and there is a Travis build badge.

The API shape, from a constructor to a draw call

The usage example in the readme shows the whole lifecycle of a chart, and it is a plain constructor, an options object, data, and a draw.

The markup is a single div with the gantt class and an id.

<div style="position:relative" class="gantt" id="GanttChartDIV"></div>

The chart is then constructed with that element and a scale unit.

var g = new JSGantt.GanttChart(document.getElementById('GanttChartDIV'), 'day');

The second argument is the base time unit, and it is one of the dynamic formats the feature list mentions: Hour, Day, Week, Month, Quarter.

Options are set through a single call with a set of v-prefixed keys. The example sets the caption type to Complete, the quarter column width to 36, and three date display formats, one for the tooltip box, one for the Major header of the Day view and one for the Minor header of the Week view. It sets the language to en, toggles the task info link and the end week date, adds two additional table columns through vAdditionalHeaders, sets vUseSingleCell to 10000 as the threshold cell per table row, and lists the formats in vFormatArr as Day, Week, Month and Quarter.

Two of those deserve comment. The vAdditionalHeaders object adds a category column and a sector column to the table, with a title each, and the same keys appear on the task objects, so a task can carry a category and a sector. And vUseSingleCell is a performance threshold, with the readme noting it helps performance for large data, alongside a caution that even with single-cell mode using the Hour format on such a large chart can cause issues in some browsers.

Data can arrive in two ways. JSGantt.parseJSON loads tasks from a JSON URL, and AddTaskItemObject adds a task manually with a set of p-prefixed properties.

g.AddTaskItemObject({
  pID: 1,
  pName: "Define Chart <strong>API</strong>",
  pStart: "2017-02-25",
  pEnd: "2017-03-17",
  pPlanStart: "2017-04-01",
  pPlanEnd: "2017-04-15 12:00",
  pClass: "ggroupblack",
  pLink: "",
  pMile: 0,
  pRes: "Brian",
  pComp: 0,
  pGroup: 0,
  pParent: 0,
  pOpen: 1,
  pDepend: "",
  pCaption: "",
  pCost: 1000,
  pNotes: "Some Notes text",
  category: "My Category",
  sector: "Finance"
});

g.Draw();

The p-prefixed names are a little cryptic but they are conventional: pID, pName, pStart, pEnd, pPlanStart, pPlanEnd, pClass, pLink, pMile, pRes, pComp, pGroup, pParent, pOpen, pDepend, pCaption, pCost and pNotes.

Two of them show the model. pGroup and pParent are what make collapsible task groups work, with pOpen controlling whether a group starts expanded. And pPlanStart and pPlanEnd are what make the planned-versus-executed view possible, since a task can carry its actual dates and its planned dates side by side.

The pName value also shows that task labels accept HTML, which the feature list describes as task styling or as HTML tags.

Finally g.Draw() renders. The data is added before the draw, so a chart is populated and then rendered, which is what makes dynamic loading of tasks possible.

The feature list, and what it costs you

The feature list is long enough that it is worth grouping by what it actually gives you.

Task management covers tasks and collapsible task groups, dependencies with highlighting when you hover a task, editing data in the Gantt table with a list of responsible people, task completion, a table with additional columns, task styling or HTML tags, milestones, resources, costs, and plan start and end dates. There is also a Gantt with planned versus executed, and dynamic loading of tasks.

The time axis is dynamic, with the format changeable between Hour, Day, Week, Month and Quarter, and the display formats for each header are separately configurable as the option list shows.

Data loading is from JSON and XML. From external files, including experimental support for MS Project XML files, and from JavaScript strings.

The parts that make it more than a static chart are the three that involve a second data source or a change over time. Dependencies with hover highlighting, plan versus executed, and dynamic loading of tasks are the three features that turn a picture of a schedule into something you interact with.

The cost is the one that a feature list cannot show. The component renders a table with positioned bars, and the browser does the layout. The vUseSingleCell threshold exists precisely because large tables with one cell per task are slow, and the readme warns that even with that mode the Hour format on a very large chart can cause problems in some browsers. In other words, there is a scale at which this approach becomes the bottleneck, and the library tells you about it rather than hiding it.

Internationalization is thorough. The readme lists support for Arabic, Chinese, Czech, Dutch, English, French, Finnish, German, Hebrew, Hungarian, Korean, Indonesian, Italian, Japanese, Portuguese, Polish, Russian, Spanish, Swedish, Turkish and Ukrainian, and the language is set through the vLang option.

Documentation lives in a Documentation.md wiki page and in an included docs/index.html file, and there is a live demo at jsganttimproved.github.io/jsgantt-improved/demo.html plus a CodePen example.

Working on it, and the two test stacks

The collaboration instructions in the readme are older than the tooling in the package, and reading them together is informative.

The development setup lists cloning the repo, installing lib dependencies with npm i, installing global dependencies with npm i -g browserify nodemon onchange tsc, compiling the final js with npm run dist, and running the demo with npm start then opening http://127.0.0.1:8080/docs/demo.html. It also mentions npm run watch, or making a change in src and restarting the command to refresh the changes.

The package metadata is the current version of that. The build script is tsc, the dist script chains the build, the browserify step, the CSS copy and a copy into docs, and the watch scripts use onchange to trigger either the build or the dist target. There is a start script running http-server.

The testing story has two stacks, and this is the most interesting thing in the repository layout.

The unit tests use mocha with chai, run through ts-node with an ESM loader. The metadata shows a test-unit script setting TS_NODE_TRANSPILE_ONLY and NODE_OPTIONS with the ts-node esm loader, a test-file variant, and a .mocharc.cjs file at the top level.

The end-to-end tests use Playwright, with a test-e2e script running npx playwright test and a playwright.config.ts at the top level.

The readme, meanwhile, describes an older end-to-end setup based on webdriver-manager, protractor and selenium, with commands to install the webdriver, update the driver, and apt install chromium and chromium-bsu, and npm run test and npm run watch:test to run the tests. There is an e2e/ directory in the repository.

So the readme documents a Protractor and Selenium setup while the package has moved to Playwright, and the top-level entries confirm the change with a playwright.config.ts and no protractor config. The e2e/ directory remains.

Other entries worth noting: a tslint.json alongside a tsconfig.json, which suggests the linting configuration predates the current setup, and a .npmignore and .travis.yml, with the build badge still pointing at Travis.

For a release, the readme says to increment the version number on package.json and run npm run publishnpm, and the metadata confirms that script runs the dist target and then npm publish, with a prepublishOnly hook in the current package that cleans, checks and builds first.

The wrapper packages, the demo and the documentation split

The readme draws a distinction that matters for anyone choosing this library, between the core component and the framework-specific wrappers.

For Angular the readme points at the ng-gantt component, for React at react-jsgantt, for Vue it points at a StackBlitz example, and for .NET at a separate documentation page. The core is the plain JavaScript component, and each wrapper is a separate repository that binds it to that framework's lifecycle.

That arrangement has a practical consequence. If you are on React, the package you actually install is react-jsgantt, not jsgantt-improved, and the features, the options and the update cadence you get are those of the wrapper. The core is the thing the wrappers are built on, and the two can move at different speeds.

The demos are the fastest way to judge whether the component does what you need. There is a live example page at jsganttimproved.github.io/jsgantt-improved/demo.html, and a live coding example on CodePen. A CodePen is worth more than a screenshot for this kind of component, because it lets you change the options object and see the effect without a build step, which is exactly the kind of experimentation a chart component invites.

The documentation is split in two. There is a Documentation.md file at the repository root and a wiki page with the same name, and the readme points at both, plus an included docs/index.html file for instructions on use. The repository carries a Documentation.md at the top level and a docs/ directory, so the offline copy of the documentation is in the repository and the wiki is the editable version.

The homepage in the package metadata points at the docs subdirectory of the GitHub Pages site rather than the site root, which suggests the published documentation is the primary artifact for anyone evaluating it, and the repository is the source of that documentation rather than the place you read it.

Editorial conclusion

jsgantt-improved fits a team that wants a Gantt chart without pulling in a charting framework and is content to include two files from the dist folder, and it does not fit a modern component-framework project that expects a typed package with a documented API surface, since the readme points to a separate wiki page and separate wrapper packages for Angular, React and Vue. Before upgrading, check the version, because the last published releases listed are the 2.x line from 2019 while the package metadata now reads 3.0.0.

Frequently asked questions

Official sources

1. Issues
2. jsGanttImproved/jsgantt-improved on GitHub
3. Project website
4. README
5. Releases