/* Simple demo showing some interactivity options of Highcharts Gantt. More custom behavior can be added using event handlers and API calls. See http://api.highcharts.com/gantt. */ var today = new Date(), day = 1000 * 60 * 60 * 24, each = Highcharts.each, reduce = Highcharts.reduce, btnShowDialog = document.getElementById('btnShowDialog'), btnRemoveTask = document.getElementById('btnRemoveSelected'), btnAddTask = document.getElementById('btnAddTask'), btnCancelAddTask = document.getElementById('btnCancelAddTask'), addTaskDialog = document.getElementById('addTaskDialog'), inputName = document.getElementById('inputName'), selectDepartment = document.getElementById('selectDepartment'), selectDependency = document.getElementById('selectDependency'), chkMilestone = document.getElementById('chkMilestone'), isAddingTask = false; // Set to 00:00:00:000 today today.setUTCHours(0); today.setUTCMinutes(0); today.setUTCSeconds(0); today.setUTCMilliseconds(0); today = today.getTime(); // Update disabled status of the remove button, depending on whether or not we // have any selected points. function updateRemoveButtonStatus() { var chart = this.series.chart; // Run in a timeout to allow the select to update setTimeout(function () { btnRemoveTask.disabled = !chart.getSelectedPoints().length || isAddingTask; }, 10); } // Create the chart var chart = Highcharts.ganttChart('container', { chart: { spacingLeft: 1 }, title: { text: 'Interactive Gantt Chart' }, subtitle: { text: 'Drag and drop points to edit' }, lang: { accessibility: { axis: { xAxisDescriptionPlural: 'The chart has a two-part X axis showing time in both week numbers and days.' } } }, accessibility: { point: { descriptionFormat: '{#if milestone}' + '{name}, milestone for {yCategory} at {x:%Y-%m-%d}.' + '{else}' + '{name}, assigned to {yCategory} from {x:%Y-%m-%d} to {x2:%Y-%m-%d}.' + '{/if}' } }, plotOptions: { series: { animation: false, // Do not animate dependency connectors dragDrop: { draggableX: true, draggableY: true, dragMinY: 0, dragMaxY: 2, dragPrecisionX: day / 3 // Snap to eight hours }, dataLabels: { enabled: true, format: '{point.name}', style: { cursor: 'default', pointerEvents: 'none' } }, allowPointSelect: true, point: { events: { select: updateRemoveButtonStatus, unselect: updateRemoveButtonStatus, remove: updateRemoveButtonStatus } } } }, yAxis: { type: 'category', categories: ['Tech', 'Marketing', 'Sales'], accessibility: { description: 'Organization departments' }, min: 0, max: 2 }, xAxis: { currentDateIndicator: true }, tooltip: { xDateFormat: '%a %b %d, %H:%M' }, series: [{ name: 'Project 1', data: [{ start: today + 2 * day, end: today + day * 5, name: 'Prototype', id: 'prototype', y: 0 }, { start: today + day * 6, name: 'Prototype done', milestone: true, dependency: 'prototype', id: 'proto_done', y: 0 }, { start: today + day * 7, end: today + day * 11, name: 'Testing', dependency: 'proto_done', y: 0 }, { start: today + day * 5, end: today + day * 8, name: 'Product pages', y: 1 }, { start: today + day * 9, end: today + day * 10, name: 'Newsletter', y: 1 }, { start: today + day * 9, end: today + day * 11, name: 'Licensing', id: 'testing', y: 2 }, { start: today + day * 11.5, end: today + day * 12.5, name: 'Publish', dependency: 'testing', y: 2 }] }] }); /* Add button handlers for add/remove tasks */ btnRemoveTask.onclick = function () { var points = chart.getSelectedPoints(); each(points, function (point) { point.remove(); }); }; btnShowDialog.onclick = function () { // Update dependency list var depInnerHTML = '<option value=""></option>'; each(chart.series[0].points, function (point) { depInnerHTML += '<option value="' + point.id + '">' + point.name + ' </option>'; }); selectDependency.innerHTML = depInnerHTML; // Show dialog by removing "hidden" class addTaskDialog.className = 'overlay'; isAddingTask = true; // Focus name field inputName.value = ''; inputName.focus(); }; btnAddTask.onclick = function () { // Get values from dialog var series = chart.series[0], name = inputName.value, undef, dependency = chart.get( selectDependency.options[selectDependency.selectedIndex].value ), y = parseInt( selectDepartment.options[selectDepartment.selectedIndex].value, 10 ), maxEnd = reduce(series.points, function (acc, point) { return point.y === y && point.end ? Math.max(acc, point.end) : acc; }, 0), milestone = chkMilestone.checked || undef; // Empty category if (maxEnd === 0) { maxEnd = today; } // Add the point series.addPoint({ start: maxEnd + (milestone ? day : 0), end: milestone ? undef : maxEnd + day, y: y, name: name, dependency: dependency ? dependency.id : undef, milestone: milestone }); // Hide dialog addTaskDialog.className += ' hidden'; isAddingTask = false; }; btnCancelAddTask.onclick = function () { // Hide dialog addTaskDialog.className += ' hidden'; isAddingTask = false; };
Install with NPM
The official Highcharts NPM package comes with support for CommonJS and contains Highcharts, and its Stock, Maps and Gantt packages.
npm install highcharts --save
See more installation optionsDownload our library
The zip archive contains Javascript files and examples. Unzip the zip package and open index.html in your browser to see the examples.
DownloadBuy a license
You can download and try out all Highcharts products for free. Once your project/product is ready for launch, purchase a commercial license.
See License Pricing