I am following this example
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';
}
}
});
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
.