如何在ApexCharts前端添加Stack/Group切换选项实现图表转换

Hey there! Let's walk through how to add a stack/group toggle for your ApexCharts bar chart—super straightforward once you know the right methods to use.

We'll break this down into three simple parts: adding the UI toggle, initializing the chart, and writing the switch logic.

1. Add the Toggle UI #

First, drop in a set of buttons (or a dropdown, if that fits your design better) to let users pick their preferred mode:

<div class="chart-controls">
  <button id="stack-btn" class="active">Stacked</button>
  <button id="group-btn">Grouped</button>
</div>

<div id="bar-chart"></div>

Add a little CSS to make the active state clear:

.chart-controls button {
  padding: 7px 14px;
  margin: 0 5px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.chart-controls button.active {
  background: #2196F3;
  color: white;
  border-color: #2196F3;
}

2. Initialize Your ApexChart #

We'll store the chart instance in a variable so we can update it later. Let's start with stacked mode as the default:

// Create and store the chart instance
const barChart = new ApexCharts(document.querySelector("#bar-chart"), {
  chart: {
    type: "bar",
    height: 400
  },
  series: [
    { name: "Product A", data: [45, 52, 38, 47, 62] },
    { name: "Product B", data: [32, 41, 55, 48, 36] },
    { name: "Product C", data: [27, 33, 41, 29, 54] }
  ],
  xaxis: {
    categories: ["Mon", "Tue", "Wed", "Thu", "Fri"]
  },
  plotOptions: {
    bar: {
      stacked: true, // Default to stacked mode
      horizontal: false
    }
  }
});

// Render the chart to the DOM
barChart.render();

3. Add the Toggle Logic #

This is where the magic happens—we'll use ApexCharts' built-in updateOptions() method to switch the stacked property dynamically. No need to re-render the whole chart!

// Grab the toggle buttons
const stackBtn = document.getElementById('stack-btn');
const groupBtn = document.getElementById('group-btn');

// Handle Stacked mode click
stackBtn.addEventListener('click', () => {
  // Update button states
  stackBtn.classList.add('active');
  groupBtn.classList.remove('active');
  
  // Update chart to stacked mode
  barChart.updateOptions({
    plotOptions: {
      bar: {
        stacked: true
      }
    }
  });
});

// Handle Grouped mode click
groupBtn.addEventListener('click', () => {
  // Update button states
  groupBtn.classList.add('active');
  stackBtn.classList.remove('active');
  
  // Update chart to grouped mode (stacked: false)
  barChart.updateOptions({
    plotOptions: {
      bar: {
        stacked: false
      }
    }
  });
});

Quick Tips #

• Efficiency win: Using updateOptions() is way better than reinitializing the chart every time—it only updates the specific config you change, keeping things fast.
• Horizontal bars work too: If you're using horizontal bar charts, this exact logic will still work perfectly—ApexCharts handles horizontal stacking/grouping automatically.
• Dropdown alternative: If you prefer a dropdown instead of buttons, just listen for the change event on the <select> element and check the selected value to set stacked to true or false.

That's it! Your chart will now seamlessly switch between stacked and grouped modes whenever the user clicks the corresponding button.

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