Highcharts分组柱状图列截断及相关配置问题咨询

Hey there! I see you've already sorted out the first three Highcharts issues—great work! Let's break down all the details, including a solution for your remaining crosshair problem.

Recap of Your Solved Problems #

Here's a quick reference to the fixes you already implemented:

• Truncated columns in June & August
  Adjusted x-axis padding and disabled decimal values to ensure all columns fit properly:

  xAxis: {
    minPadding: 0.15,
    maxPadding: 0.15,
    allowDecimals: false
  }
  

• Short month format on x-axis
  Updated the label format to display only the 3-letter month abbreviation (instead of Jun'20):

  labels: {
    format: '{value:%b}'
  }
  

• Retrieve date object on column click
  Accessed the category directly from the click event's point to get the corresponding date object:

  plotOptions: {
    column: {
      point: {
        events: {
          click: function(event) {
            const categoryDate = event.point.category;
            // Use the date object as needed (e.g., console.log(categoryDate))
          }
        }
      }
    }
  }
  

Solution for Crosshair Covering Entire Grouped Column #

By default, Highcharts aligns the crosshair to the center of each x-axis category (the thin line you mentioned). To make it span the full width of the grouped columns, we'll use a custom crosshair that calculates the group width and draws a rectangle over the entire group:

xAxis: {
  // Keep your existing x-axis settings here (minPadding, labels, etc.)
  crosshair: {
    custom: true,
    snap: false,
    zIndex: 1,
    func: function(pixelX) {
      const chart = this.chart;
      const xAxis = chart.xAxis[0];
      // Find the closest point to the mouse position
      const targetPoint = chart.series[0].points.find(point => {
        const pointCenter = point.plotX + chart.plotLeft;
        const halfGroupWidth = xAxis.transA / 2;
        return pixelX >= pointCenter - halfGroupWidth && pixelX <= pointCenter + halfGroupWidth;
      });

      if (targetPoint) {
        const groupWidth = xAxis.transA; // Width of the entire category group
        const groupCenter = targetPoint.plotX + chart.plotLeft;
        const crosshairStartX = groupCenter - groupWidth / 2;
        const crosshairEndX = groupCenter + groupWidth / 2;

        // Draw a semi-transparent rectangle covering the full group width
        chart.renderer.rect(
          crosshairStartX,
          chart.plotTop,
          crosshairEndX - crosshairStartX,
          chart.plotHeight
        ).attr({
          fill: 'rgba(0, 0, 0, 0.05)', // Adjust opacity/color as needed
          zIndex: 1
        }).add();
      }
    }
  }
}

How this works: #

1. custom: true tells Highcharts we'll handle drawing the crosshair ourselves
2. The func method calculates the exact width of each category group using xAxis.transA (Highcharts' built-in value for category width)
3. We find which group the mouse is hovering over, then draw a rectangle that spans from the start to end of that group
4. Adjust the fill value to change the crosshair's color or opacity to match your chart style

内容的提问来源于stack exchange，提问作者Mohammed Aamir K