diff --git a/docs/gantt.md b/docs/gantt.md
index 521e0b27a..9d2124469 100755
--- a/docs/gantt.md
+++ b/docs/gantt.md
@@ -302,3 +302,48 @@ Param | Descriotion | Default value
--- | --- | ---
mirrorActor|Turns on/off the rendering of actors below the diagram as well as above it|false
bottomMarginAdj|Adjusts how far down the graph ended. Wide borders styles with css could generate unwantewd clipping which is why this config param exists.|1
+
+## Interaction
+
+It is possible to bind a click event to a task, the click can lead to either a javascript callback or to a link which will be opened in the current browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
+
+```
+click taskId call callback(arguments)
+click taskId href URL
+```
+
+* taskId is the id of the task
+* callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified..
+
+Beginners tip, a full example using interactive links in an html context:
+```
+
+
+ gantt
+ dateFormat YYYY-MM-DD
+
+ section Clickable
+ Visit mermaidjs :active, cl1, 2014-01-07, 3d
+ Print arguments :cl2, after cl1, 3d
+ Print task :cl3, after cl2, 3d
+
+ click cl1 href "https://mermaidjs.github.io/"
+ click cl2 call printArguments("test1", "test2", test3)
+ click cl3 call printTask()
+
+
+
+
+```
diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js
index 6eae11449..de86c916d 100644
--- a/src/diagrams/gantt/ganttDb.js
+++ b/src/diagrams/gantt/ganttDb.js
@@ -502,6 +502,11 @@ const setClickFun = function(id, functionName, functionArgs) {
}
}
+ /* if no arguments passed into callback, default to passing in id */
+ if (argList.length === 0) {
+ argList.push(id);
+ }
+
let rawTask = findTaskById(id);
if (typeof rawTask !== 'undefined') {
pushFun(id, () => {
diff --git a/src/diagrams/gantt/parser/gantt.spec.js b/src/diagrams/gantt/parser/gantt.spec.js
index 51d2c0884..650c7563f 100644
--- a/src/diagrams/gantt/parser/gantt.spec.js
+++ b/src/diagrams/gantt/parser/gantt.spec.js
@@ -106,4 +106,34 @@ describe('when parsing a gantt diagram it', function() {
}
});
});
+ it('should parse callback specifier with no args', function() {
+ spyOn(ganttDb, 'setClickEvent');
+ const str =
+ 'gantt\n' +
+ 'dateFormat YYYY-MM-DD\n' +
+ 'section Clickable\n' +
+ 'Visit mermaidjs :active, cl1, 2014-01-07, 3d\n' +
+ 'Calling a callback :cl2, after cl1, 3d\n\n' +
+ 'click cl1 href "https://mermaidjs.github.io/"\n' +
+ 'click cl2 call ganttTestClick()\n';
+
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(ganttDb.setClickEvent).toHaveBeenCalledWith('cl2', 'ganttTestClick', null);
+ });
+ it('should parse callback specifier with arbitrary number of args', function() {
+ spyOn(ganttDb, 'setClickEvent');
+ const str =
+ 'gantt\n' +
+ 'dateFormat YYYY-MM-DD\n' +
+ 'section Clickable\n' +
+ 'Visit mermaidjs :active, cl1, 2014-01-07, 3d\n' +
+ 'Calling a callback :cl2, after cl1, 3d\n\n' +
+ 'click cl1 href "https://mermaidjs.github.io/"\n' +
+ 'click cl2 call ganttTestClick("test0", test1, test2)\n';
+
+ expect(parserFnConstructor(str)).not.toThrow();
+ const args = '"test1", "test2", "test3"';
+ expect(ganttDb.setClickEvent).toHaveBeenCalledWith('cl2', 'ganttTestClick', '"test0", test1, test2');
+ });
+
});