JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.flotcharts.org/javascript/jquery.flot.min.js"></script>
<br/><br/>
<div id="placeholder" style="width:400px;height:300px;"></div>

JavaScript

$(function () {

    var plot = $.plot($("#placeholder"),[ 
        { data: [[0,0],[1,1],[2,2]], label: "Line One"},
        { data: [[0,2],[1,1],[2,0]], label: "Line Two"},
        { data: [[0,0],[0.5,1],[1,1],[2,3]], label: "Line Three"} 
    ], {
        series: {
            lines: { show: true },
            points: { show: true }
        },
        grid: { hoverable: true, clickable: true }
    });

    var currentPoint = null;
    $("#placeholder").bind("plothover", function (event, pos, item) {
        if (item) {
            currentPoint = item;
        } else {
            currentPoint = null;               
        }
    });
    
    $('#placeholder').mousedown(function(event) {
       if (currentPoint)
       {
          switch (event.which) {
            case 1:
                alert('Left mouse button pressed on ' + currentPoint.series.label);
                break;
            case 2:
                alert('Middle mouse button pressed on ' + currentPoint.series.label);
                break;
            case 3:
                alert('Right mouse button pressed on ' + currentPoint.series.label);
                break;
            default:
                alert('You have a strange mouse on ' + currentPoint.series.label);
          }
       }
    });
});