Angular Highcharts Tooltip同时展示多系列数据的实现方案咨询

Hey there! I’ve run into this exact scenario before—getting the tooltip to display all series data for the same time point is super straightforward once you know the right config. Here’s how to fix it:

Step 1: Enable Shared Tooltip #

The key setting you’re missing is shared: true in your tooltip configuration. This tells Highcharts to gather all points that share the same x-axis value (like your "11PM" or "5PM" time labels) and display them together in the tooltip.

Step 2: Adjust Tooltip Format (Optional) #

While the default shared tooltip will work out of the box, you can tweak the formatting to match your original style. Here’s how to update your tooltip config:

tooltip: {
  shared: true,
  headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>',
  pointFormat: '<span style="color:{point.color}">\u25CF</span> {point.series.name}: {point.y:0f}<br/>'
}

• headerFormat adds the time label (e.g., "11PM") at the top of the tooltip for context.
• pointFormat retains your original data display style, plus a colored bullet to make it easier to distinguish between the Thunder and Hurricane series.

Full Working Example #

Here’s how your full chart config would look with these changes, using your existing graphData:

const graphData = [
  {name:"Thunder", data:[['11PM',3726],['5PM',2344]]},
  {name:"Hurricane", data:[['11PM',5736],['5PM',5244]]}
];

Highcharts.chart('your-chart-container', {
  series: graphData,
  tooltip: {
    shared: true,
    headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>',
    pointFormat: '<span style="color:{point.color}">\u25CF</span> {point.series.name}: {point.y:0f}<br/>'
  },
  // Add your other chart config (xAxis, yAxis, title, etc.) here
});

Alternative: Full Customization with Formatter #

If you want even more control over the tooltip content, you can use a formatter function instead of pre-defined formats:

tooltip: {
  shared: true,
  formatter: function() {
    let tooltipContent = `<span style="font-size: 10px">${this.x}</span><br/>`;
    this.points.forEach(point => {
      tooltipContent += `<span style="color:${point.color}">\u25CF</span> ${point.series.name}: ${point.y.toFixed(0)}<br/>`;
    });
    return tooltipContent;
  }
}

This lets you modify the HTML, styling, or data display logic however you need.

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