Facebook Pixel

AnyGantt - JS ガントチャート

強力な HTML5 ガントチャート、リソースチャートおよび PERT チャート

The very first version of AnyChart hit the shelves more than 10 years ago, check out what our products went through and see what's new in the most recent update.

Version 8.x History

Bug fixes:

  • DVF-4667

    — Resource labels crop/overlap issue fixed

<strong>DVF-4638</strong> — Baseline milestones} | Robust JavaScript/HTML5 charts | AnyChart
DVF-4638 — Baseline milestones

Now you can put milestones on both Actual and Baseline elements making your project tracking with AnyGantt even more flexible than it was.

Bug fixes:

  • DVF-4635

    — Datagrid labels issue fixed


  • DVF-4561

    — Preview milestones show only when collapsed option

Bug fixes:

  • DVF-4606

    — Tooltip issue fixed

<strong>DVF-4373</strong> — Labels text length} | Robust JavaScript/HTML5 charts | AnyChart
DVF-4373 — Labels text length

Added an option to limit the number of characters in labels for easier control over the chart display.

<strong>DVF-4383</strong> — Client-side CSV/XLSX export} | Robust JavaScript/HTML5 charts | AnyChart
DVF-4383 — Client-side CSV/XLSX export

CSV/XLSX can now be exported on client-side, without the help of an export server.

<strong>DVF-4359</strong> — Labels overlap} | Robust JavaScript/HTML5 charts | AnyChart
DVF-4359 — Labels overlap

New option to hide labels when they overlap.


  • DVF-4444

    — Pixel gaps support added

  • DVF-4460

    — Visible range printing added

  • DVF-4470

    — Item info now provided in the context menu

Bug fixes:

  • DVF-4429, DVF-4430

    — Client-side exports issues fixed

  • DVF-4469

    — Resource period offset and height can now be set from the data

  • DVF-4477

    — Resource tooltip issue fixed

  • DVF-4434

    — Labels issue fixed

API changes:

View deprecates table
Method Use instead
column.format() column.labels().format()
column.cellTextSettings() column.labels()
column.cellTextSettingsOverrider() column.labelsOverrider()
column.buttonCursor() dataGrid.buttons().cursor()
timeline.baseFill() timeline.elements().fill()
timeline.baseStroke() timeline.elements().stroke()
timeline.baselineFill() timeline.baselines().fill()
timeline.baselineStroke() timeline.baselines().stroke()
timeline.milestoneFill() timeline.milestones().fill()
timeline.milestoneStroke() timeline.milestones().stroke()
timeline.parentFill() timeline.groupingTasks().fill()
timeline.parentStroke() timeline.groupingTasks().stroke()
timeline.progressFill() <timeline element>.progress().fill()
timeline.progressStroke() <timeline element>.progress().stroke()
timeline.selectedElementFill() <timeline element>.selected().fill()
timeline.selectedElementStroke() <timeline element>.selected().stroke()
timeline.baseLabels() timeline.elements().labels()
timeline.baselineLabels() timeline.baselines().labels()
timeline.parentLabels() timeline.groupingTasks().labels()
timeline.milestoneLabels() timeline.milestones().labels()
timeline.progressLabels() <timeline element>.progress().labels()
timeline.baselineAbove() timeline.baselines().above()
timeline.baseBarHeight() timeline.elements().height()
timeline.baseBarAnchor() timeline.elements().anchor()
timeline.baseBarPosition() timeline.elements().position()
timeline.baseBarOffset() timeline.elements().offset()
timeline.parentBarHeight() timeline.groupingTasks().height()
timeline.parentBarAnchor() timeline.groupingTasks().anchor()
timeline.parentBarPosition() timeline.groupingTasks().position()
timeline.parentBarOffset() timeline.groupingTasks().offset()
timeline.baselineBarHeight() timeline.baselines().height()
timeline.baselineBarAnchor() timeline.baselines().anchor()
timeline.baselineBarPosition() timeline.baselines().position()
timeline.baselineBarOffset() timeline.baselines().offset()
timeline.progressBarHeight() <timeline element>.progress().height()
timeline.progressBarAnchor() <timeline element>.progress().anchor()
timeline.progressBarPosition() <timeline element>.progress().position()
timeline.progressBarOffset() <timeline element>.progress().offset()
timeline.milestoneHeight() timeline.milestones().height()
timeline.milestoneAnchor() timeline.milestones().anchor()
timeline.milestonePosition() timeline.milestones().position()
timeline.milestoneOffset() timeline.milestones().offset()
timeline.connectorFill() timeline.connectors().fill()
timeline.connectorStroke() timeline.connectors().stroke()
timeline.selectedConnectorStroke() timeline.connectors().selected().stroke()
timeline.connectorPreviewStroke() timeline.connectors().previewStroke()
timeline.editPreviewFill() <timeline element>.edit().fill()
timeline.editPreviewStroke() <timeline element>.edit().stroke()
timeline.editProgressFill() <timeline element>.progress().edit().fill()
timeline.editProgressStroke() <timeline element>progress().edit().stroke()
timeline.editIntervalThumbFill() timeline.<timeline element with live edit thumbs>.edit().thumbs().fill()
timeline.editIntervalThumbStroke() timeline.<timeline element with live edit thumbs>.edit().thumbs().stroke()
timeline.editConnectorThumbFill() timeline.<timeline element with connectors>().edit().connectorThumbs().fill()
timeline.editConnectorThumbStroke() timeline.<timeline element with connectors>().edit().connectorThumbs().stroke()
timeline.editStartConnectorMarkerType() timeline.<timeline element with connectors>().edit().start().connectorThumb().type()
timeline.editStartConnectorMarkerSize() timeline.<timeline element with connectors>().edit().start().connectorThumb().size()
timeline.editStartConnectorMarkerHorizontalOffset() timeline.<timeline element with connectors>().edit().start().connectorThumb().horizontalOffset()
timeline.editStartConnectorMarkerVerticalOffset() timeline.<timeline element with connectors>().edit().start().connectorThumb().verticalOffset()
timeline.editFinishConnectorMarkerType() timeline.<timeline element with connectors>().edit().end().connectorThumb().type()
timeline.editFinishConnectorMarkerSize() timeline.<timeline element with connectors>().edit().end().connectorThumb().size()
timeline.editFinishConnectorMarkerHorizontalOffset() timeline.<timeline element with connectors>().edit().end().connectorThumb().horizontalOffset()
timeline.editFinishConnectorMarkerVerticalOffset() timeline.<timeline element with connectors>().edit().end().connectorThumb().verticalOffset()
timeline.editIntervalWidth() timeline.<timeline element with thumbs>().edit().thumbs().size()
resourceChartHeader.topLevel() resourceChartHeader.level(2)
resourceChartHeader.midLevel() resourceChartHeader.level(1)
resourceChartHeader.lowLevel() resourceChartHeader.level(0)
resourceChartHeader.backgroundFill() resourceChartHeader.background().fill()
resourceChartHeader.levelsSeparationStroke() resourceChartHeader.stroke()
resourceChartHeaderLevel.labels().<label settings>() resourceChartHeaderLevel.<label settings>()
resourceChartHeaderLevel.tileFill() resourceChartHeaderLevel.fill()
resourceChartHeaderLevel.tilesSeparationStroke() resourceChartHeaderLevel.stroke()
dataGrid.editing() and timeline.editing() dataGrid.edit() or timeline.edit()
timeline.editStructurePreviewFill() timeline.edit().fill()
timeline.editStructurePreviewStroke() timeline.edit().stroke()
timeline.editStructurePreviewDashStroke() timeline.edit().placementStroke()
chart.editing() chart.edit()
<strong>DVF-4370</strong> — Weekends, Holidays and Nonworking Time Coloring} | Robust JavaScript/HTML5 charts | AnyChart
DVF-4370 — Weekends, Holidays and Nonworking Time Coloring

Project and Resource Gantt Charts now have an option to color holidays, weekends, and nonworking time.
Use anychart.core.ui.Timeline#weekendsFill, anychart.core.ui.Timeline#holidaysFill and anychart.core.ui.Timeline#workingFill methods you can set how weekends, holidays and nonworking time defined by anychart.core.gantt.Calendar#holidays and anychart.core.gantt.Calendar#schedule methods.

<strong>DVF-4397</strong> — Start/End Markers} | Robust JavaScript/HTML5 charts | AnyChart
DVF-4397 — Start/End Markers

Project Gantt Chart got an option to show start/end markers for actual, baseline, and progress bars with the startMarker() and endMarker() methods.

<strong>DVF-4405</strong> — Milestones on Resource chart} | Robust JavaScript/HTML5 charts | AnyChart
DVF-4405 — Milestones on Resource chart

You can now display Milestones on the Resource Gantt Chart, this provides you with an option to show multiple milestones with individual tooltips in one line.

<strong>DVF-4376</strong> — Zoom onMouseWheel} | Robust JavaScript/HTML5 charts | AnyChart
DVF-4376 — Zoom onMouseWheel

Change how the chart behaves when the mouse wheel is used: zoom or scroll. Use the zoomOnMouseWheel() to change it.

<strong>DVF-4386</strong> — Text shadow effect} | Robust JavaScript/HTML5 charts | AnyChart
DVF-4386 — Text shadow effect

Most of the text elements got an option to tune text shadow with the textShadow() method.
Shadow effect can help with text display on certain background colors or give your visualizations more wow-effect.

<strong>DVF-4399</strong> — Fiscal Year Shift} | Robust JavaScript/HTML5 charts | AnyChart
DVF-4399 — Fiscal Year Shift

Now you can set the start of the fiscal year to any of the months in this or next year. This allows you to display a timeline properly in the world of financial or budget years.


  • DVF-4404

    — Grouping tasks no longer incorrectly get settings from the task section. Note: this may change how your charts look if you relied on this setting, please test if you are upgrading.

Bug fixes:

  • DVF-4358

    — LliveEdit Issues fixed

  • DVF-4378

    — Milestone progress issues fixed

  • DVF-4388

    — Padding settings issues fixed

  • DVF-4389

    — Grouping Task disabling issue fixed

  • DVF-4401

    , DVF-4414 — Datagrid disabling issues fixed

Bug fixes:

  • DVF-4315, DVF-4325

    — Client-side export issue

  • DVF-4319

    — Hover cursor on legend

  • DVF-4341

    — Selection Marquee issue

  • DVF-4226

    — ResourceChart weekend range issue

  • DVF-4316

    — Timeline chart range series issue

  • DVF-4324

    — Progress value label issue

  • DVF-4357

    — Ticks count issue

  • DVF-4360

    — Datagrid issue


  • DVF-4320

    — Disable credits over theme

  • DVF-4336

    — toolbar expand/collapse icons change

  • DVF-4356

    — milestone preview own tooltip

<strong>DVF-4247</strong> — Client-Side Export} | Robust JavaScript/HTML5 charts | AnyChart
DVF-4247 — Client-Side Export

We've added the client-side export feature to all our JavaScript charting libraries - AnyChart, AnyStock, AnyGantt, and AnyMap. This will allow you to have your data visualizations saved as images (SVG, PNG, and JPG) and PDF documents without a roundtrip to the server, by leveraging the built-in browser features for a seamless JS chart export, fast and secure.

<strong>DVF-4235</strong> — Milestone Preview on Parent Task Bar} | Robust JavaScript/HTML5 charts | AnyChart
DVF-4235 — Milestone Preview on Parent Task Bar

Milestone preview on the parent task bar is now available in the AnyGantt library. This new feature will allow the viewer of a Gantt chart to quickly understand what milestones such a task has and then expand it to learn the details if needed.

<strong>DVF-4269</strong> — Custom Marker for Milestone} | Robust JavaScript/HTML5 charts | AnyChart
DVF-4269 — Custom Marker for Milestone

In release 8.7.0, we've also added an option to customize milestone markers on Gantt charts by type and color. So now you can easily differentiate between the milestones of non-identical nature within the same project by depicting them in different ways.

<strong>DVF-4270</strong> — Custom Basic Year} | Robust JavaScript/HTML5 charts | AnyChart
DVF-4270 — Custom Basic Year

Previously, our Gantt charts only supported the calendar year as the basic year period. Now, it is possible to define a custom one. For example, you can go ahead and set a fiscal (financial) year, or an academic year, or any other year depending on what point of reference you actually need in this regard; quarters will be formed accordingly.


  • DVF-4277

    — Legend. Add some icons support

  • DVF-4244

    — All elements has own tooltip settings

  • DVF-4236

    — Tooltbar improvements

Bug fixes:

  • DVF-4201

    — Legend issues


Bug fixes:

  • DVF-4210

    — Editing issues fixed.

  • DVF-4215

    — Row deselection issue fixed.

  • DVF-3944

    — Resize event issues fixed.

  • DVF-4187

    — Charts disposing improved.

Bug fixes:

  • DVF-3618

    — fixed issue with tooltip on live edit

  • DVF-4040

    — fixed rowMouseOver event firing after rowClick event

  • DVF-4087

    — fixed performance issue with gantt markers

New features:

  • DVF-4015

    Datagrid Text Improvements: Working with texts in Datagrid has been significantly improved to boost the performance.


  • DVF-3323

    — scrollTo for Gantt charts improvement: The scrollTo method now works both as getter and setter. The returned value is in pixels.

Bug fixes:

  • DVF-3957

    — Gantt header locale problem fixed.

  • DVF-3958

    — Datagrid in SVG fixed for proper support of Internet Explorer.

  • DVF-3974

    — Empty Gantt serialization issue fixed.


  • DVF-3323

    — ScrollTo() Improvement

Bug fixes:

  • DVF-3957

    — Timeline's header labels format issue

Bug fixes:

  • DVF-3958

    — Datagrid in SVG fixed for proper support of Internet Explorer.

  • DVF-3974

    — Gantt serialization issues fixed.

<strong>DVF-3857</strong> — Performance issues} | Robust JavaScript/HTML5 charts | AnyChart
DVF-3857 — Performance issues

We have significantly improved the performance.

Bug fixes:

  • DVF-3899

    — Now the data grid is rendered correctly when resized with the splitter.

  • DVF-3835

    — Fixed the issue with tree search.

  • DVF-3807

    — Tokens now work correctly when used to format the timeline header.

  • DVF-2473

    — Fixed the PERT CRUD issue.

HTML Tooltips Support} | Robust JavaScript/HTML5 charts | AnyChart
HTML Tooltips Support

Tooltip customization is way easier now. Full support of HTML is available. You can write your own HTML code and customize tooltip visualization using CSS classes.

Gantt Editing API Improvements} | Robust JavaScript/HTML5 charts | AnyChart
Gantt Editing API Improvements

Gantt charts editing API is thoroughly revised and improved.


Bug fixes:

New features::

  • DVF-3656

    — The filter() method added.

Bug fixes::

  • DVF-3673

    — Formatting fuctions context issues fixed.

Data Grid Live Editor} | Robust JavaScript/HTML5 charts | AnyChart
Data Grid Live Editor

Grid cells of the Gantt Chart can now be edited in the Live Edit mode. If the input data is valid, all the changes can be saved or aborted if otherwise.

Brand New Timeline} | Robust JavaScript/HTML5 charts | AnyChart
Brand New Timeline

Release 8.2.0 has brought significant improvements to the timeline header in Gantt charts. From now on, the number of its levels and their format can be set manually, which further increases the timeline's flexibility. In addition, automatic formatting of dates in response to zoomIn and zoomOut has become even better.

Custom Drawing} | Robust JavaScript/HTML5 charts | AnyChart
Custom Drawing

We've made it possible to override drawing of any Gantt timeline element (baseline, milestone, etc.). There are no limits to how they can look, you can create any custom visualization based on your imagination.


  • New Gantt API for Timeline elements

  • Data Grid Expand/Collapse buttons customization

API changes:

Method Use instead
timeline.elements().fill() timeline.baseFill()
timeline.elements().stroke() timeline.baseStroke()
timeline.baselines().fill() timeline.baselineFill()
timeline.baselines().stroke() timeline.baselineStroke()
tl.milestones().stroke() timeline.milestoneFill()
timeline.milestones().stroke() timeline.milestoneStroke()
timeline.groupingTasks().fill() timeline.parentFill()
timeline.groupingTasks().stroke() timeline.parentStroke()
timeline.elements().selected().fill() timeline.selectedElementFill()
timeline.elements().selected().stroke() timeline.selectedElementStroke()
timeline.elements().labels() timeline.baseLabels()
timeline.baselines().labels() timeline.baselineLabels()
timeline.groupingTasks().labels() timeline.parentLabels()
timeline.milestones().labels() timeline.milestoneLabels()
timeline.baselines().above() timeline.baselineAbove()
timeline.elements().height() timeline.baseBarHeight()
timeline.elements().anchor() timeline.baseBarAnchor()
timeline.elements().position() timeline.baseBarPosition()
timeline.elements().offset() timeline.baseBarOffset()
timeline.groupingTasks().height() timeline.parentBarHeight()
timeline.groupingTasks().anchor() timeline.parentBarAnchor()
timeline.groupingTasks().position() timeline.parentBarPosition()
timeline.groupingTasks().offset() timeline.parentBarOffset()
timeline.baselines().height() timeline.baselineBarHeight()
timeline.baselines().anchor() timeline.baselineBarAnchor()
timeline.baselines().position() timeline.baselineBarPosition()
timeline.baselines().offset() timeline.baselineBarOffset()
timeline.milestones().height() timeline.milestoneHeight()
timeline.milestones().anchor() timeline.milestoneAnchor()
timeline.milestones().position() timeline.milestonePosition()
timeline.milestones().offset() timeline.milestoneOffset()
timeline.connectors().fill() timeline.connectorFill()
timeline.connectors().stroke() timeline.connectorStroke()
timeline.connectors().selected().stroke() timeline.selectedConnectorStroke()
column.labels() column.cellTextSettings()
column.labelsOverrider() column.cellTextSettingsOverrider()
Conditional Coloring} | Robust JavaScript/HTML5 charts | AnyChart
Conditional Coloring

Now it's possible to apply colors to the elements of Gantt charts using functions. Each of the functions contains a comprehensive set of data about an element to be colored. Below is the list of methods now supporting such functions: rowHoverFill(), rowSelectedFill(), connectorFill(), connectorStroke(), selectedConnectorStroke(), baseFill(), baseStroke(), baselineFill(), baselineStroke(), milestoneFill(), milestoneStroke(), parentFill(), parentStroke(), progressFill(), progressStroke(), selectedElementFill(), selectedElementStroke().

Element Size and Position settings} | Robust JavaScript/HTML5 charts | AnyChart
Element Size and Position settings

To improve the visual perception of Gantt Charts and make it easier to customize them according to a style, we've added a lot of settings for adjusting the size and the position of all elements in a Gantt Chart. Here's the complete list of such methods: baseBarHeight(), baseBarAnchor(), baseBarPosition(), baseBarOffset(), baselineBarHeight(), baselineBarAnchor(), baselineBarPosition(), baselineBarOffset(), parentBarHeight(), parentBarAnchor(), parentBarPosition(), parentBarOffset(), progressBarHeight(), progressBarAnchor(), progressBarPosition(), progressBarOffset(), milestoneHeight(), milestoneAnchor(), milestonePosition(), milestoneOffset().

Adaptive Text Formatting} | Robust JavaScript/HTML5 charts | AnyChart
Adaptive Text Formatting

Now you can adjust the format of Gantt Timeline labels manually using the new measureWithText() method.


Bug fixes:

  • Fixed bug with DataGrid drag&drop.

  • Fixed issues with extra small and extra large values formatting.

  • Fixed issues with unicode symbols in String Tokens (desk case #3833, TS-415).

  • Fixed bug with Indian locale (desk case #3283, TS-201).

  • Fixed issues with inappropriate chart rendering into containers with flex layout in Firefox.

  • Fixed scrolling issues in Firefox.

  • Fixed context menu bug that appeared after clicking on collapse/expand buttons.

Modular System} | Robust JavaScript/HTML5 charts | AnyChart
Modular System

Modular System is the core of AnyChart 8. It allows you to significantly reduce the size of the JavaScript running on your web page by connecting only those chart types and features that you actually use. The modular based AnyChart is perfectly compatible with popular bundling tools such as Webpack, Browserify, and so on. Use our JS Builder to easily generate a custom build.

Custom JavaScript Builds} | Robust JavaScript/HTML5 charts | AnyChart
Custom JavaScript Builds

Custom JavaScript Builder is designed for assembling a JavaScript file that contains only the features and chart types you are really going to use. The AnyGantt version 8.0.0 contains 30 modules and 16 themes . You can also build a file that contains your license key .

Node.js Server-side Rendering} | Robust JavaScript/HTML5 charts | AnyChart
Node.js Server-side Rendering

Node.js server is a lightweight web server that provides API for generating vector graphics (PDF, SVG, or PS), bitmap images (PNG, JPG, or TIFF), PDF reports, and data in CSV and XLSX (Excel). It uses the JavaScript code as well as JSON and XML configurations as input data. The server is very easy to install and customize, you can run it on any major platform: Linux, Windows, and macOS. It is ideal for creating report systems that send charts via email or social network sharing tools.

No Data Label Feature} | Robust JavaScript/HTML5 charts | AnyChart
No Data Label Feature

No Data Label Feature is an API designed to notify the chart viewer that data is not available. Data can be missing due to its absence by default or if it has been removed by means of the Data Updating API, Exclude Data Point feature, or through the interactivity.

CSV/Excel Export Reworked} | Robust JavaScript/HTML5 charts | AnyChart
CSV/Excel Export Reworked

By popular demand, we've remastered the algorithm for preparing CSV/Excel data for charts. Now it takes into account the chart type specific features and allows you to use multiple data sets for different series.

Chart Export Settings} | Robust JavaScript/HTML5 charts | AnyChart
Chart Export Settings

Now you can customize the export settings for each chart: links and descriptions for sharing on Facebook, image export options, and so on.

Context Menu Customization API} | Robust JavaScript/HTML5 charts | AnyChart
Context Menu Customization API

We've significantly simplified the process of the context menu customization. Now each item of the context menu is assigned with an ID that can be called to access the corresponding fields and settings as well as to add custom ones. We've also added the option to localize the context menu.

General API Improvements} | Robust JavaScript/HTML5 charts | AnyChart
General API Improvements

We've substantially improved the AnyChart JS Charts API specifically for the 8th generation of our JavaScript charting libraries. Appearance settings, Grids settings , Data Mapping settings can now be made much easier. To facilitate and streamline the transition from AnyChart 7 to AnyChart 8, we've created the Migration Tool that will allow the majority of users to switch over to the new version in semi-automatic mode.

Timeline Labels Settings} | Robust JavaScript/HTML5 charts | AnyChart
Timeline Labels Settings

Gantt Timeline text formatting properties are now flexible to the greatest possible extent. To achieve that, we've added the following methods: baseLabels(), baselineLabels(), parentLabels(), milestoneLabels(), progressLabels(). We've also remastered method labels() so it can be utilized to set the defaults for any type of label.

Bug fixes:

  • Fixed Data Grid Splitter bug (TS-215, TS-225)