ApexCharts中Range Column Chart是否支持多系列数据堆叠效果？

Great question! ApexCharts doesn’t natively support stacking for range column (or range bar) charts out of the box, but there are two reliable workarounds to achieve the stacked effect you’re looking for, similar to the AnyChart example you referenced.

1. Manual Offset Calculation (Static Data) #

If your data is static or you have full control over its structure, you can manually adjust the start/end values of each subsequent series so they "sit on top" of the previous one. Here’s how:

• For each category, set the start value of the second series equal to the end value of the first series in that category.
• Enable the stacked: true property in the chart configuration to keep columns aligned under the same category.

Example Code: #

// Raw range data (adjusted for stacking)
const series = [
  {
    name: 'First Range',
    data: [[3, 12], [5, 18], [7, 20]]
  },
  {
    name: 'Second Range',
    data: [[12, 22], [18, 25], [20, 30]] // Start = end of previous series
  }
];

const options = {
  chart: {
    type: 'rangeBar',
    stacked: true
  },
  series: series,
  xaxis: {
    categories: ['Q1', 'Q2', 'Q3']
  },
  // Custom tooltip to show original range values (optional but recommended)
  tooltip: {
    custom: function({ seriesIndex, dataPointIndex, w }) {
      const [start, end] = w.config.series[seriesIndex].data[dataPointIndex];
      return `
        <div class="tooltip-container">
          <h4>${w.config.series[seriesIndex].name}</h4>
          <p>Range: ${start} — ${end}</p>
        </div>
      `;
    }
  }
};

new ApexCharts(document.getElementById('chart'), options).render();

2. Dynamic Stacking Function (Dynamic Data) #

For dynamic or user-generated data, write a helper function to automatically calculate stacked offsets. This function iterates through each category and adjusts start/end values so series stack sequentially:

Example Code: #

// Helper function to stack range data dynamically
function calculateStackedRangeData(originalSeries) {
  const stackedSeries = [...originalSeries];
  
  // Iterate over each category (x-axis item)
  for (let categoryIndex = 0; categoryIndex < stackedSeries[0].data.length; categoryIndex++) {
    let previousEnd = 0;
    
    // Iterate over each series to adjust ranges
    for (let seriesIndex = 0; seriesIndex < stackedSeries.length; seriesIndex++) {
      const [originalStart, originalEnd] = stackedSeries[seriesIndex].data[categoryIndex];
      const rangeLength = originalEnd - originalStart;
      
      // Update to stacked range: start = previous series' end, end = start + original length
      stackedSeries[seriesIndex].data[categoryIndex] = [previousEnd, previousEnd + rangeLength];
      previousEnd += rangeLength;
    }
  }
  
  return stackedSeries;
}

// Usage with raw, unadjusted data
const rawSeries = [
  { name: 'Range A', data: [[2, 10], [4, 15], [6, 18]] },
  { name: 'Range B', data: [[5, 15], [8, 20], [10, 25]] },
  { name: 'Range C', data: [[3, 12], [6, 16], [9, 22]] }
];

const stackedSeries = calculateStackedRangeData(rawSeries);

// Initialize chart with stacked data
const options = {
  chart: { type: 'rangeBar', stacked: true },
  series: stackedSeries,
  xaxis: { categories: ['Product X', 'Product Y', 'Product Z'] },
  tooltip: {
    custom: function({ seriesIndex, dataPointIndex, w }) {
      // Show original range values alongside stacked positions
      const originalRange = rawSeries[seriesIndex].data[dataPointIndex];
      const stackedRange = w.config.series[seriesIndex].data[dataPointIndex];
      return `
        <div>
          <strong>${w.config.series[seriesIndex].name}</strong>
          <br>Original Range: ${originalRange[0]} — ${originalRange[1]}
          <br>Stacked Position: ${stackedRange[0]} — ${stackedRange[1]}
        </div>
      `;
    }
  }
};

new ApexCharts(document.getElementById('chart'), options).render();

Key Notes: #

• ApexCharts’ stacked: true property works with range bars when data is properly offset, even though it’s not explicitly documented for this chart type.
• A custom tooltip is highly recommended if you need to display original range values instead of stacked offset values.
• This approach mimics the stacked range column effect by ensuring each series’ range starts exactly where the previous one ends.

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