18 Best JavaScript Gantt Chart Components

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • DHTMLX Gantt

    GPL version of Javascript Gantt Chart (by DHTMLX)

    DHTMLX Gantt is a mature and developer-friendly JavaScript library for creating Gantt charts of any complexity and with any number of tasks. With this tool at hand, you can easily add a Gantt chart to any web app and equip it with the right features to cover all of your project management needs. High working loads like 30 000+ tasks and the use of advanced features won’t downgrade the DHTMLX Gantt performance due to dynamic loading and smart rendering.

  • Frappe Gantt

    Open Source Javascript Gantt

    Frappe Gantt is an open source JavaScript library that serves for incorporating simple, interactive Gantt charts into web projects. From the standpoint of functionality, this free-to-use tool does not provide anything fancy, but it still supports some basic features for accurate planning and handling of projects.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • Highcharts JS

    Highcharts JS, the JavaScript charting framework

    Useful resources: documentation, samples, tutorials, YouTube channel, GitHub repository Trial version: HighCharts Gantt Price: for internal use - from $182 (annual license), from $420 (perpetual license), prices for OEM license are available on request

  • fusioncharts-dist

    FusionCharts JavaScript Charting library. Over 95+ charts and 1,400+ maps to choose from, with integrations available for all popular JavaScript frameworks & back-end programming languages.

    FusionCharts is a well-known brand in the field of data visualization. Its flagship product FusionCharts Suite includes a wide variety of simple and complex charts. It also addresses the issue of creating a basic Gantt chart on the web page with the corresponding widget included in the FusionWidgets XT pack.

  • jQueryGantt

    jQuery Gantt editor

    Useful resources: documentation, GitHub repository Package size: 544 kB License: MIT

  • Snap.svg

    The JavaScript library for modern SVG graphics.

    It allows users to create tasks, change their schedule and duration with drag-and-drop, add dependency lines, and review extra information on tasks via tooltips. You can add multiple timescales to the chart. The list of possible options includes Quarter Day, Half Day, Full Day, Week, and Month. There are also some customization opportunities such as changing the tooltip content with custom HTML, modifying the appearance of task bars and dependency lines, and setting the default timescale. It should be noted that Frappe Gantt has two dependencies: momentjs and snapsvg.

  • mermaid

    Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown

    Useful resources: GitHub repository Package size: 24.9 MB License: MIT

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  • moment

    Parse, validate, manipulate, and display dates in javascript.

    It allows users to create tasks, change their schedule and duration with drag-and-drop, add dependency lines, and review extra information on tasks via tooltips. You can add multiple timescales to the chart. The list of possible options includes Quarter Day, Half Day, Full Day, Week, and Month. There are also some customization opportunities such as changing the tooltip content with custom HTML, modifying the appearance of task bars and dependency lines, and setting the default timescale. It should be noted that Frappe Gantt has two dependencies: momentjs and snapsvg.

  • Mermaid

    Edit, preview and share mermaid charts/diagrams. New implementation of the live editor.

    The Gantt appearance is modified by using customizable themes and defining a number of CSS classes. There are 3 rendering options for your Gantt chart: SVG, PNG, or a Markdown link that can be inserted into docs. Even people without any coding background can create a Gantt chart and other diagrams using the Mermaid Live Editor. Interestingly, GitHub added native support for Mermaid in order to help developers quickly generate diagrams in their open source projects.

  • JSCharting for React

    Official JSCharting React Plugin & Examples

    JSCharting is a JavaScript library that offers a way to add different types of charts to a web application, plus Gantt charts (JSGantt).

  • gantt-schedule-timeline-calendar

    Gantt Gantt Gantt Timeline Schedule Calendar [ javascript gantt, js gantt, projects gantt, timeline, scheduler, gantt timeline, reservation timeline, react gantt, angular gantt, vue gantt, svelte gantt, booking manager ]

    The gantt-schedule-timeline-calendar (GSTC) is a JavaScript component that can be used in business apps as a universal planning solution. It brings together four tools commonly used in companies all over the world for arranging their day-to-day activities. At the moment, we are primarily interested in the Gantt part of this product.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts