Absolutely! You can absolutely add a custom right-click context menu for data points in Chart.js — it just requires hooking into canvas events and using Chart.js's built-in methods to detect clicks on data points. Here's a step-by-step breakdown with a working example:

1. Set up your HTML structure #

First, create the canvas for your chart and a hidden context menu that will pop up on right-click:

<canvas id="salesChart"></canvas>
<!-- Custom context menu -->
<div id="chartContextMenu" style="display: none; position: absolute; background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 1000;">
  <div style="cursor: pointer; padding: 4px 8px;" id="viewData">View Data Point Details</div>
  <div style="cursor: pointer; padding: 4px 8px; margin-top: 4px;" id="removeData">Remove This Data Point</div>
</div>

2. Initialize your Chart.js line chart #

Next, set up your basic line chart with sample data:

const ctx = document.getElementById('salesChart').getContext('2d');
const salesChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [{
      label: 'Monthly Sales',
      data: [4500, 3800, 5200, 4900, 6100],
      borderColor: '#2196F3',
      backgroundColor: 'rgba(33, 150, 243, 0.1)',
      tension: 0.3,
      pointRadius: 6
    }]
  },
  options: {
    responsive: true,
    plugins: {
      tooltip: {
        mode: 'index',
        intersect: false
      }
    }
  }
});

3. Add right-click event handling #

Now, add event listeners to detect right-clicks on data points, show the menu, and handle menu actions:

const contextMenu = document.getElementById('chartContextMenu');
const chartCanvas = document.getElementById('salesChart');

// Listen for right-click on the chart canvas
chartCanvas.addEventListener('contextmenu', (e) => {
  e.preventDefault(); // Block the default browser right-click menu
  
  // Use Chart.js's method to get elements at the click position
  const clickedElements = salesChart.getElementsAtEventForMode(
    e,
    'nearest',
    { intersect: true },
    true
  );

  if (clickedElements.length > 0) {
    // Extract data about the clicked point
    const clickedPoint = clickedElements[0];
    const datasetIndex = clickedPoint.datasetIndex;
    const pointIndex = clickedPoint.index;
    const pointLabel = salesChart.data.labels[pointIndex];
    const pointValue = salesChart.data.datasets[datasetIndex].data[pointIndex];

    // Position the context menu near the click
    contextMenu.style.left = `${e.pageX}px`;
    contextMenu.style.top = `${e.pageY}px`;
    contextMenu.style.display = 'block';

    // Handle "View Details" click
    document.getElementById('viewData').onclick = () => {
      alert(`Data Point: ${pointLabel}\nSales Value: $${pointValue.toLocaleString()}`);
      contextMenu.style.display = 'none';
    };

    // Handle "Remove Data Point" click
    document.getElementById('removeData').onclick = () => {
      // Remove the point from the dataset and labels
      salesChart.data.datasets[datasetIndex].data.splice(pointIndex, 1);
      salesChart.data.labels.splice(pointIndex, 1);
      salesChart.update(); // Refresh the chart
      contextMenu.style.display = 'none';
    };
  } else {
    // Hide menu if clicked outside a data point
    contextMenu.style.display = 'none';
  }
});

// Hide the menu when clicking anywhere else on the page
document.addEventListener('click', () => {
  contextMenu.style.display = 'none';
});

Key Notes: #

• The getElementsAtEventForMode method is critical here — it lets you detect exactly which data point was clicked, even if the chart is responsive.
• You can customize the context menu's styling (colors, padding, etc.) to match your app's design.
• Extend the menu with more actions (like editing the data point value, exporting the point to CSV, etc.) by adding more menu items and corresponding click handlers.

This approach works for line charts, and you can adapt it to other Chart.js chart types (bar, scatter, etc.) with minimal changes!

内容的提问来源于stack exchange，提问作者darewreck