Column Highchart：显示绝对值但保留负值标识信息

Got it, I’ve run into similar quirks with angular-highcharts before—since we can’t directly mess with Highcharts.seriesTypes like in vanilla Highcharts, we need a workaround that plays nicely with the Angular wrapper. Here’s a solid approach that keeps your negative values’ properties intact while rendering them above the X-axis:

Step 1: Preprocess Your Data #

First, we’ll adjust the display value of negative points to their absolute value (so they show up above the X-axis), but store the original negative value in a custom field (like originalValue) to preserve its identity for styling and hover logic.

// Example: Take your API-fetched values and format them
const rawApiData = [-5, 10, -3, 8];
const chartData = rawApiData.map(val => ({
  y: Math.abs(val), // Use absolute value to render above X-axis
  originalValue: val // Keep the original value for later logic
}));

Step 2: Color Negative Columns Dynamically #

Use the color callback in your series config to mark negative values red, using the originalValue we stored:

import { Chart } from 'angular-highcharts';

// Inside your Angular component
this.chart = new Chart({
  chart: { type: 'column' },
  title: { text: 'Negative Columns Above X-Axis' },
  xAxis: { categories: ['Item 1', 'Item 2', 'Item 3', 'Item 4'] },
  series: [{
    name: 'Values',
    data: chartData,
    // Set red for negatives, default blue otherwise
    color: (point) => point.options.originalValue < 0 ? '#ff4d4d' : '#7cb5ec'
  }]
});

Step 3: Handle Hover Events with Original Values #

You can access the real negative value in tooltips or mouse events using the originalValue field. Here’s how to set up a tooltip that shows the true value and a mouseover event that logs it:

this.chart = new Chart({
  // ... existing configs
  tooltip: {
    formatter: function() {
      const originalVal = this.point.options.originalValue;
      return `
        <span style="color:${this.color}">●</span> ${this.series.name}: 
        <b>${originalVal}</b>
      `;
    }
  },
  plotOptions: {
    column: {
      point: {
        events: {
          mouseOver: function() {
            console.log('Original value:', this.options.originalValue);
            // Drop your custom function logic here
          }
        }
      }
    }
  }
});

Why This Works #

This method avoids modifying Highcharts’ underlying series types entirely—we’re just using custom data properties and Angular-Highcharts’ built-in configuration hooks. All your negative values keep their original identity, so you can style them, trigger functions on hover, or run any other logic based on their true state.

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