Step-by-Step Tutorial: Building Your First Chart with AnyGanttAnyGantt is a flexible JavaScript charting library specialized for Gantt charts and other timeline visualizations. This tutorial walks you through building your first interactive Gantt chart using AnyGantt, from setup to customizing appearance and adding interactivity. By the end you’ll have a working chart you can embed in a web page and extend for real-world project scheduling.
What you’ll need
- Basic knowledge of HTML, CSS, and JavaScript.
- A text editor and a browser.
- An internet connection to fetch AnyGantt from a CDN (or you can download local library files).
1. Choose and include AnyGantt
AnyGantt can be used with plain JavaScript or integrated with frameworks (React, Angular, Vue). This tutorial uses plain JavaScript and the AnyChart platform (AnyGantt is part of AnyChart’s product family).
Include the AnyChart bundle that contains AnyGantt via CDN in your HTML head:
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>AnyGantt First Chart</title> <script src="https://cdn.anychart.com/releases/8.12.0/js/anychart-bundle.min.js"></script> <style> html, body { height:100%; margin:0; padding:0; } #container { width:100%; height:700px; } </style> </head> <body> <div id="container"></div> <script src="app.js"></script> </body> </html> Place the chart code in a separate app.js (or inline in a script tag if preferred).
2. Basic Gantt chart structure
AnyGantt uses a data tree where each row represents a task or a group. A minimal example builds a data array with tasks that include start and end dates.
Create app.js with this base structure:
anychart.onDocumentReady(function () { // Sample data var data = [ { id: "1", name: "Project Planning", actualStart: "2025-09-01", actualEnd: "2025-09-07", progressValue: 60 }, { id: "2", name: "Design", actualStart: "2025-09-08", actualEnd: "2025-09-21", progressValue: 30 }, { id: "3", name: "Development", actualStart: "2025-09-22", actualEnd: "2025-10-31", progressValue: 10 } ]; // Create a data tree var treeData = anychart.data.tree(data, "as-table"); // Create Gantt chart var chart = anychart.ganttProject(); // Set data chart.data(treeData); // Set container and draw chart.container("container"); chart.draw(); }); Notes:
- Dates are ISO strings; AnyChart detects them automatically.
- progressValue is optional; it shows a progress bar inside tasks.
3. Grouping tasks and nesting subtasks
To represent phases and subtasks, use parentId to create hierarchy. Example data with groups:
var data = [ { id: "1", name: "Project Setup", actualStart: "2025-09-01", actualEnd: "2025-09-03", isGroup: true }, { id: "1.1", parent: "1", name: "Requirements", actualStart: "2025-09-01", actualEnd: "2025-09-02", progressValue: 100 }, { id: "1.2", parent: "1", name: "Kickoff", actualStart: "2025-09-02", actualEnd: "2025-09-03", progressValue: 100 }, { id: "2", name: "Implementation", actualStart: "2025-09-04", actualEnd: "2025-10-31", isGroup: true }, { id: "2.1", parent: "2", name: "Frontend", actualStart: "2025-09-04", actualEnd: "2025-10-10", progressValue: 20 }, { id: "2.2", parent: "2", name: "Backend", actualStart: "2025-09-10", actualEnd: "2025-10-31", progressValue: 5 } ]; Use isGroup: true to mark group rows (they render as collapsible). The Gantt chart supports expanding/collapsing groups via the UI.
4. Formatting the timeline and scales
You can customize the timeline’s scale and zoom level. For project charts, set the scale to days/weeks/months and configure the minimum cell width.
Example: show weeks with custom labels:
chart.getTimeline().scale().ticks().interval(7); // 7-day ticks for weeks chart.getTimeline().scale().minorGrid(true); chart.getTimeline().scale().majorGrid(true); chart.getTimeline().scale().labels().format(function(value) { return anychart.format.dateTime(value, "MMM dd"); }); Adjust the start and end visible range:
chart.getTimeline().startDate(new Date(2025, 8, 1)); // months are 0-based (Sep = 8) chart.getTimeline().endDate(new Date(2025, 10, 31)); // Oct = 9, Nov = 10 5. Styling tasks and grid
Customize row and task appearance (colors, icons, fonts):
// Task styles chart.tasks().normal().fill("#8ecae6"); chart.tasks().normal().stroke("#219ebc"); // Progress bar color chart.tasks().progress().fill("#ffb703"); // Grid and row text chart.splitterPosition(0.35); // width ratio between grid and timeline chart.grid().stroke("#e9e9e9"); chart.getTimeline().rowHoverFill("#f6f8fa"); Change column settings in the data grid (left-side table):
var dataGrid = chart.dataGrid(); dataGrid.column(0).title("Task"); dataGrid.column(0).width(250); dataGrid.column(1).title("Start"); dataGrid.column(1).format("{%actualStart}{dateTimeFormat:yyyy-MM-dd}"); 6. Adding interactivity: tooltips, selection, and editing
Enable tooltips for tasks:
chart.tooltip().enabled(true); chart.tooltip().format(function() { return "Task: " + this.getData("name") + " Start: " + anychart.format.dateTime(this.getData("actualStart"), "yyyy-MM-dd") + " End: " + anychart.format.dateTime(this.getData("actualEnd"), "yyyy-MM-dd"); }); Allow row selection and handle events:
chart.listen("rowClick", function(e) { var rowId = e.itemId; console.log("Clicked row: " + rowId); }); Enable editing (drag to change dates, resize tasks):
chart.editing(true); chart.editing().allowMove(true); chart.editing().allowResize(true); chart.editing().allowTaskAdd(true); Handle changes after editing:
chart.listen("afterEdit", function(e){ console.log("Edited:", e); }); 7. Dependencies and critical path
To visualize dependencies, add links between tasks. Use “connect” items in data or create links programmatically:
var links = [ { id: "l1", from: "1.1", to: "2.1", type: "finish-start" }, // FS { id: "l2", from: "2.1", to: "2.2", type: "start-start" } // SS ]; chart.links(links); AnyGantt can compute critical path for project views. Call the critical path calculation (API may vary with version):
chart.isCriticalPathEnabled(true); chart.validate(); 8. Loading data from external sources
Fetch JSON from an API and load into the chart:
fetch("/api/project-tasks") .then(res => res.json()) .then(jsonData => { var tree = anychart.data.tree(jsonData, "as-table"); chart.data(tree); chart.draw(); }); Ensure your JSON fields map to AnyGantt’s expected fields (id, parent, actualStart, actualEnd, progressValue, isGroup, etc.). Transform as needed.
9. Exporting and printing
AnyChart supports exporting charts to PNG, PDF, or SVG. Example to export PNG:
chart.saveAsPNG(); Or programmatically:
anychart.exports.saveAs(chart, 'project-gantt.png'); For large charts, consider increasing chart size or using server-side export tools provided by AnyChart.
10. Accessibility and responsiveness
- Make the container responsive by using percentages for width and flexible height (or resize on window events).
- Ensure color contrast for progress bars and backgrounds.
- Provide alternative textual data (e.g., a table) for screen readers if needed.
To make chart responsive:
window.addEventListener("resize", function() { chart.container("container"); chart.draw(); }); 11. Troubleshooting common issues
- Blank chart: ensure container has a height and anychart-bundle is loaded before code runs.
- Date parsing errors: use ISO date strings or Date objects.
- Performance with many tasks: use data paging or virtual scrolling; reduce DOM elements and simplify styles.
12. Next steps and extensions
- Integrate AnyGantt into a React/Angular/Vue app using official wrappers.
- Link chart actions to backend updates (save edits).
- Add resource allocation and custom tooltips with richer HTML.
- Implement zoom controls and preset views (day/week/month).
This tutorial covered setting up AnyGantt, building hierarchical tasks, styling, interactivity, dependencies, data loading, exporting, and best practices. Use the examples as templates and adapt field names and styles to your project needs.
Leave a Reply