LightningchartJS open a menu on right click and added functionality

Question

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.

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

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';
      }
    }
  });

Answer 1

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.