javascriptlightningchart

LightningchartJS open a menu on right click and added functionality


I am following this example

https://lightningchart.com/js-charts/interactive-examples/edit/lcjs-example-1400-histogramGaussian.html?isList=true

I need to know if there is a way to have the user right-click with the mouse to open a menu, for him to choose actions.

then, I need to know if I can set an option that will change the color of that specific bar to red color for example.

enter image description here

const lightningChartObject = lightningChart({
  license: license,
  licenseInformation: {
    appTitle: 'appTitle',
    company: 'company',
  },
  overrideInteractionMouseButtons: {
    chartXYPanMouseButton: 2, // LMB
    chartXYRectangleZoomFitMouseButton: 2, // RMB
    axisXYPanMouseButton: 2, // LMB
    axisXYZoomMouseButton: 2, // RMB
  },
});

after setting to 2 it does not works, repeat it does not work

I need that on this event onSeriesBackgroundMouseClick to enable for the user this menu enter image description here

but it only works for left click :( and I need it for right click

  RMSChart.onSeriesBackgroundMouseClick((_, e) => {
    const text = document.getElementById(`text${electrodeNumber}`);
    if (RMSChart && text) {
      // Adjust for the chart's position
      const x = e.clientX;
      const y = e.clientY;
      text.style.left = `${x}px`;
      text.style.top = `${y}px`;

      // Toggle visibility
      if (text.style.visibility === 'visible') {
        text.style.visibility = 'hidden';
      } else {
        text.style.visibility = 'visible';
      }
    }
  });

Solution

  • Generally right click events in JS are detected using contextmenu event. Currently there is no event API for that on LCJS components.

    As a workaround you can listen to mousedown and mouseup events and detect the RMB click with some custom logic like this:

    let rightMbPress
    chart.onSeriesBackgroundMouseDown((_, e) => {
        if (event.button !== 2) return
        rightMbPress = performance.now()
    });
    chart.onSeriesBackgroundMouseUp((_, e) => {
        if (!rightMbPress || performance.now() - rightMbPress > 500) return
        rightMbPress = undefined
        // Clicked with right mouse button
        console.log('RMB click', e)
    })
    

    To detect RMB click on a specific bar of a BarChart, you would have to listen to mouseup and mousedown events on every bar separately:

    barChart.getBars().forEach((bar) => {
        let rightMbPress
        bar.onMouseDown((_, e) => {
            if (event.button !== 2) return
            rightMbPress = performance.now()
        });
        bar.onMouseUp((_, e) => {
            if (!rightMbPress || performance.now() - rightMbPress > 500) return
            rightMbPress = undefined
            // Clicked with right mouse button
            console.log('RMB click', e, bar)
        })
    })
    

    Make sure getBars() is used only after the data is loaded to the BarChart.