Morris.js click event on tooltip need to be called

Question

I am new to morris.js and have used it for graphs. Everything is working fine, the tooltip is also showing but I want to make it clickable as well with hover functionality: when user hovers on a bar, the tooltip should be shown and when he clicks on that tooltip I have to generate an alert. I already have function that made bars clickable but I want tooltip as well.

Here is the function that made bars clickable:

var InitiateBarChartCustom2 = function () {
    return {
        init: function () {
            var chart = Morris.Bar({
                element: 'bar-chart2',
                data: volumeData,
                xkey: 'y',
                ykeys: ['a', 'b'],
                labels: volumeLabels,
                hideHover: 'auto',
                barColors: ['#005a2b', '#B10933'],
                overlapped: '1',
                showBarLabels: false,
                xLabelMargin: 7
            });

            var thisDate, thisData;

            $("#bar-chart2 svg rect").on('click', function () {
                thisDate = $(".morris-hover-row-label").html();
                thisDataHtml = $(".morris-hover-point").html().split(":");
                thisData = thisDataHtml[0].trim();
                showdetails(thisDate);
            });

Here is the tooltip that I need to make clickable:

`

Here is the code for label:

chart.options.labels.foreach(function (label, i) {
    var legendlabel = $('<span style="display: inline-block;">' + label + '</span>');
    var legenditem = $('<div class="mbox"></div>').css('background-color', chart.options.barcolors[i]).append(legendlabel);
    $('#legend').innerhtml = '';
    $('#legend').append(legenditem);
})

Here is my div that is being dynamically generated:

tooltip: true,
tooltipOpts: {
    defaultTheme: false,
    content: "<div class='morris-hover morris-default-style' ><div class='morris-hover-row-label'>xtick</div><div style='color: rgb(177, 9, 51)' class='morris-hover-point'>  Enquiries:  %1y </div><div style='color: rgb(177, 9, 51)' class='morris-hover-point'>  Sales / Enquiries Ratio:  %2y% </div></div>",
}

I already have visited the following links that didn't help:

and a few more like these.

Can someone show the path to the man who lost himself in these charts?

krlzlx · Answer 1 · 2017-10-06T09:10:31.743

Please try the following snippet.

On mouse hover a bar, it displays the tooltip with the data
On click on the tooltip, it displays an alert with the data

var InitiateBarChartCustom2 = function () {
    return {
        init: function () {
            var chart = Morris.Bar({
                element: 'bar-chart2',
                data: [
                    {date: "March", actual: 2, forecast: 22},
                    {date: "April", actual: 48, forecast: 41},
                    {date: "May", actual: 3, forecast: 10},
                    {date: "June", actual: 34, forecast: 65},
                    {date: "July", actual: 67, forecast: 13}
                ],
                xkey: 'date',
                ykeys: ['actual', 'forecast'],
                labels: ["Actual", "Forecast"],
                hideHover: 'auto',
                barColors: ['#005a2b', '#B10933'],
                overlapped: '1',
                showBarLabels: false,
                xLabelMargin: 7
            });

            $(".morris-hover").on("click", function() {
                date = $(".morris-hover-row-label").html();
                dataHtml = $(".morris-hover-point");
                data = "";

                // Get the data
                $(dataHtml).each(function () {
                    data += "\n" + this.innerText;
                });

                // Display an alert with the date & data
                showdetails(date, data);
            });

            function showdetails(date, data) {
                alert("[Date]\n" + date + "\n\n[Data]" + data);
            }
        }
    }
}

InitiateBarChartCustom2().init();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" />

<div id="bar-chart2"></div>

score 1 · Accepted Answer · edited Oct 30 '19 at 13:34

In morris.js file, you have to add the following lines of code under the Hover function.

fuction Hover(options)

here is code you have to edit

    this.el.on('click', function () {
    var thisDate, thisData;
    thisDate = $(".morris-hover-row-label").html();
    thisDataHtml = $(".morris-hover-point").html().split(":");
    thisData = thisDataHtml[0].trim();
    showdetails(thisDate);
    showdetails(thisDate);

Morris.js click event on tooltip need to be called

2 Answers2