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

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • #31711


    We have included data point click event ,in that made to show context menu

    Also we included strip line defined with start and end date to it. To canvas chart we included add event linsener mouse down to get strip line pop up base on clicked position.

    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 is that when plot contains data points and strip line , when user wanted to click data point to get context menu, instead they get strip line pop up.
    We tried to resolve this issue by getting strip line pop up on right click , for that included if statement e.which==3 to LTEq_addEventListenertoCanvasChart function. This resolved issue , able to get strip line pop up when right clicked on strip lines and data point contest menu on left click on data point . But we were getting browser context menu on right click along with that strip line pop up.

    Please provide solution to avoid browser context menu or disable back and reload functionality of browser context menu .

    1.Tried to prevent browser context menu but it also prevented data point custom context menu
    2. Then tried to disable back functionality of browser context menu , solution from stackoverflow which prevent previews page load functionality, but it refreshes current page which is not our requirement, we don’t want to refresh current page


    data point click we context menu image


    when user click data poinr with strip lines behind


    plot with strip lines image

    when user tries to click data point with strip lines behind, image



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

    Considering this thread as a duplicate of How to handle mouse click event on both strip lines and data point and hence closing the same.

    Indranil Deo
    Team CanvasJS

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

You must be logged in to reply to this topic.