Use click event of MorrisJs with Angular 6

Question

I use this wrapper of MorrisJs Chart in one project. This works very well, but I cannot find a way to get the result of click event.

With the original Morris.js using jQuery, it is possible to get the click event like this:

Morris.Line({ 
    ...
}).on('click', function(i, row) { 
    console.log(i);
    console.log(row);
});

Do you know how to intercept that click with Angular? Thanks!

Answer 1

Today I found the solution. 3 changes should be brought to the directive:

1. import Output, EventEmitter
2. initialize the output to be an event emitter @Output() clickChart = new EventEmitter();
3. Bind the Morris chart click event with the directive output: let my_this = this; this.chartInstance.on('click', function(i, row) { my_this.clickChart.emit({ event, i, row }); });

Then the click event can be caught in the component through the method (clickChart). Example:

<div    mk-morris-js
        type='Bar'
        [options]='options'
        [data]='datas'
        (clickChart)='test($event)'
></div>

The full source of the directive can be seen in my pull request.