如何在Chart.js柱状图鼠标悬停时为每个柱子显示边框？

Hey there! Great questions—these are simple but impactful tweaks to make your bar charts feel more interactive. Let's break this down step by step.

1. Adding a Border When Hovering Over Bars #

To show a border on hover, you just need to use the hoverBorderWidth property in your dataset configuration. This defines how thick the border should be when the mouse lands on a bar.

Here's a quick working example:

const ctx = document.getElementById('myBarChart').getContext('2d');
const myBarChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
            label: 'Monthly Sales',
            data: [1200, 1900, 3000, 2100],
            backgroundColor: 'rgba(54, 162, 235, 0.5)',
            // Set the thickness of the hover border
            hoverBorderWidth: 3,
            // Optional: Set a default border color for all bars (if you don't need per-bar customization)
            hoverBorderColor: '#222'
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

Now when you hover over any bar, it'll display a 3px thick border—no extra plugins needed!

2. Setting Unique Hover Border Colors for Each Bar #

If you want each bar to have its own distinct hover border color, just pass an array to hoverBorderColor instead of a single color value. Each index in the array matches the bar at the same position in your data array.

Let's update the example to add per-bar hover colors:

const ctx = document.getElementById('myBarChart').getContext('2d');
const myBarChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
            label: 'Monthly Sales',
            data: [1200, 1900, 3000, 2100],
            backgroundColor: 'rgba(54, 162, 235, 0.5)',
            hoverBorderWidth: 3,
            // Array of colors corresponding to each bar
            hoverBorderColor: ['#ff4444', '#00C851', '#33b5e5', '#ffbb33']
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

Now hovering over January's bar shows a red border, February's shows green, March's blue, and April's yellow. You can match these colors to your brand or data categories for better visual context.

Quick Tip #

If your data is dynamic (like loaded from an API), you can generate the hoverBorderColor array on the fly. For example, loop through your data and assign colors based on value ranges or category labels.

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