Google charts, how to add custom points on Gantt Charts?

Question

I'm trying to add some custom points on a Gantt charts. But I don't see any official way to do that.
Any one know how I can make this ?

I tried to add some point like triangle below

Answer 1

there are no standard options to add custom points,
but we can manually add on the chart's 'ready' event.

see following working snippet,
function addMarker will add a triangle to the chart.

pass arguments for row label and date for point placement, eg

addMarker('Find sources', new Date(2019, 0, 3));
addMarker('Outline paper', new Date(2019, 0, 5, 12));
addMarker('Write paper', new Date(2019, 0, 8));

 google.charts.load('current', { packages:['gantt'] }).then(function () { var container = document.getElementById('gantt'); var chart = new google.visualization.Gantt(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn('string', 'Task ID'); dataTable.addColumn('string', 'Task Name'); dataTable.addColumn('string', 'Resource'); dataTable.addColumn('date', 'Start Date'); dataTable.addColumn('date', 'End Date'); dataTable.addColumn('number', 'Duration'); dataTable.addColumn('number', 'Percent Complete'); dataTable.addColumn('string', 'Dependencies'); dataTable.addRows([ ['Research', 'Find sources', null, new Date(2019, 0, 1), new Date(2019, 0, 5), null, 100, null], ['Write', 'Write paper', 'write', null, new Date(2019, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'], ['Cite', 'Create bibliography', 'write', null, new Date(2019, 0, 7), daysToMilliseconds(1), 20, 'Research'], ['Complete', 'Hand in paper', 'complete', null, new Date(2019, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'], ['Outline', 'Outline paper', 'write', null, new Date(2019, 0, 6), daysToMilliseconds(1), 100, 'Research'] ]); var dateRangeStart = dataTable.getColumnRange(3); var dateRangeEnd = dataTable.getColumnRange(4); var formatDate = new google.visualization.DateFormat({ pattern: 'MM/dd/yyyy' }); var rowHeight = 45; var options = { height: ((dataTable.getNumberOfRows() * rowHeight) + rowHeight), gantt: { criticalPathEnabled: true, criticalPathStyle: { stroke: '#e64a19', strokeWidth: 5 } } }; function daysToMilliseconds(days) { return days * 24 * 60 * 60 * 1000; } function drawChart() { chart.draw(dataTable, options); } function addMarker(markerRow, markerDate) { var baseline; var baselineBounds; var chartElements; var marker; var markerSpan; var rowLabel; var svg; var svgNS; var gantt; var ganttUnit; var ganttWidth; var timespan; var xCoord; var yCoord; // initialize chart elements baseline = null; gantt = null; rowLabel = null; svg = null; svgNS = null; chartElements = container.getElementsByTagName('svg'); if (chartElements.length > 0) { svg = chartElements[0]; svgNS = svg.namespaceURI; } chartElements = container.getElementsByTagName('rect'); if (chartElements.length > 0) { gantt = chartElements[0]; } chartElements = container.getElementsByTagName('path'); if (chartElements.length > 0) { Array.prototype.forEach.call(chartElements, function(path) { if ((baseline === null) && (path.getAttribute('fill') !== 'none')) { baseline = path; } }); } chartElements = container.getElementsByTagName('text'); if (chartElements.length > 0) { Array.prototype.forEach.call(chartElements, function(label) { if (label.textContent === markerRow) { rowLabel = label; } }); } if ((svg === null) || (gantt === null) || (baseline === null) || (rowLabel === null) || (markerDate.getTime() < dateRangeStart.min.getTime()) || (markerDate.getTime() > dateRangeEnd.max.getTime())) { return; } // calculate placement ganttWidth = parseFloat(gantt.getAttribute('width')); baselineBounds = baseline.getBBox(); timespan = dateRangeEnd.max.getTime() - dateRangeStart.min.getTime(); ganttUnit = (ganttWidth - baselineBounds.x) / timespan; markerSpan = markerDate.getTime() - dateRangeStart.min.getTime(); // add marker marker = document.createElementNS(svgNS, 'polygon'); marker.setAttribute('fill', 'transparent'); marker.setAttribute('stroke', '#ffeb3b'); marker.setAttribute('stroke-width', '3'); xCoord = (baselineBounds.x + (ganttUnit * markerSpan) - 4); yCoord = parseFloat(rowLabel.getAttribute('y')); marker.setAttribute('points', xCoord + ',' + (yCoord - 10) + ' ' + (xCoord - 5) + ',' + yCoord + ' ' + (xCoord + 5) + ',' + yCoord); svg.insertBefore(marker, rowLabel.parentNode); } google.visualization.events.addListener(chart, 'ready', function () { // add marker for current date addMarker('Find sources', new Date(2019, 0, 3)); addMarker('Outline paper', new Date(2019, 0, 5, 12)); addMarker('Write paper', new Date(2019, 0, 8)); }); window.addEventListener('resize', drawChart, false); drawChart(); });

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="gantt"></div>

---

UPDATE

the size of the marker is specified in the 'points' attribute of the polygon element.
at the bottom of the addMarker function,
see the line for --> marker.setAttribute('points', ...

the value of 'points' should be three sets of x,y coordinates.
top, left, & right respectively.
note: adding four sets of x,y coordinates would add a rectangle marker.

the variables xCoord & yCoord are the calculated x,y coordinates of where the marker should be placed, and should be the center of the marker.
as such, in order to draw the triangle...
top = xCoord + ',' + (yCoord - 10)
left = (xCoord - 5) + ',' + yCoord
right = (xCoord + 5) + ',' + yCoord

in summary, in order to change the size of the marker,
we change the modifiers made to the variables xCoord & yCoord

to reduce the size of the marker by half,
we would change the coordinates as follows...
top = xCoord + ',' + (yCoord - 5)
left = (xCoord - 2.5) + ',' + yCoord
right = (xCoord + 2.5) + ',' + yCoord

eg

marker.setAttribute('points', xCoord + ',' + (yCoord - 5) + ' ' + (xCoord - 2.5) + ',' + yCoord + ' ' + (xCoord + 2.5) + ',' + yCoord);