Home Forums Chart Support How to handle mouse click event on both strip lines and data point

How to handle mouse click event on both strip lines and data point

Viewing 2 posts - 1 through 2 (of 2 total)
  • #31707

    I have included data points click event function, in that made to show context menu
    Datapint click we get context menu

    Also we have include strip lines with start and end date to it , for that added EventListener(solution provided by live chat team unable to find that js fiddle path) to get strip line popup

    function LTEq_addEventListenertoCanvasChart() {
        $("#LTEq_chartContainer .canvasjs-chart-canvas").last().on("mousedown", function (e) {
            var tempAxisXStrippes = LTEq_canvasChart.axisX[0].stripLines;
            var phaseInfo;
            var pStDt, pEndDt;
            LTEq_isUserRightClickedOnPhaseBand = false;
            if (tempAxisXStrippes.length > 0) {
                for (var i = 0; i < tempAxisXStrippes.length; i++) {
                    var parentOffset = $(this).parent().offset();
                    var xPos = e.pageX - parentOffset.left,
                        yPos = e.pageY - parentOffset.top,
                        bounds = LTEq_canvasChart.axisX[0].stripLines[i].bounds;
                    if ((bounds != undefined && bounds.x1 != undefined && bounds.x2 != undefined && bounds.y1 != undefined && bounds.y2 != undefined) &&
                        ((bounds.x1 <= xPos && xPos <= bounds.x2) && (bounds.y1 <= yPos && yPos <= bounds.y2))) {
                        phaseInfo = tempAxisXStrippes[i].options.tag;
                        var jsParsePh = JSON.parse(phaseInfo);
                        pStDt = new Date(jsParsePh.PhaseStDt);
                        pEndDt = new Date(jsParsePh.PhaseEndDt);
                        LTEq_isUserRightClickedOnPhaseBand = true;
            if (phaseInfo != undefined) {
                LTEq_constructPhaseUpdatePopup(phaseInfo, pStDt, pEndDt);

    Issue we are facing that when user wants to click datapoint to get context menu , they are getting striplines popup.
    So we tried to get strip line popup when right click on stripline ( e.which==3 in addEventListener function ) but we get browser context menu also along with that. Can you people provide solution to avoid browser context menu or disable back & reload functionality of browser context menu.

    We tried to prevent browser context menu , this caused our custom context menu not working
    Then we tried to disable back functionality , found solution to prevents back, but it refreshes current page which is not our requirement



    You can restrict click event from being fired for both stripLine and dataPoint simultaneously as shown in this JSFiddle.

    Indranil Deo
    Team CanvasJS

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.