# ApexChart Bar Chart Stacking

**URL:** <https://forum.inductiveautomation.com/t/apexchart-bar-chart-stacking/104742>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [April 4, 2025, 9:46pm UTC](https://forum.inductiveautomation.com/t/apexchart-bar-chart-stacking/104742 "2025-04-04T21:46:02Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![richhull](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@richhull](https://forum.inductiveautomation.com/u/richhull)\
**Post date:** [April 4, 2025, 9:46pm UTC](https://forum.inductiveautomation.com/t/apexchart-bar-chart-stacking/104742/1 "2025-04-04T21:46:02Z")

</div>

Hey I am trying to utilize the stacking capabilities of ApexChart's bar chart; however, I am trying to do it a specific way without stacking all of them. This is what I currently have so far as a concept:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/0/60fdab766441e578df329cfef2f013ced32718de.png)

Is there any specific way I could accomplish this?

---

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [April 6, 2025, 9:44pm UTC](https://forum.inductiveautomation.com/t/apexchart-bar-chart-stacking/104742/2 "2025-04-06T21:44:51Z")

</div>

You should be able to use grouped series.

> **[JavaScript Grouped & Stacked Bar Chart – ApexCharts.js](https://www.apexcharts.com/javascript-chart-demos/bar-charts/grouped-stacked-bars/)**
>
> View the sample of a JavaScript Grouped (a.k.a Clustered) & Stacked Bar Chart created using ApexCharts.js

---

<div class="post-metadata">

**Author:** ![richhull](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@richhull](https://forum.inductiveautomation.com/u/richhull)\
**Post date:** [April 7, 2025, 2:12pm UTC](https://forum.inductiveautomation.com/t/apexchart-bar-chart-stacking/104742/3 "2025-04-07T14:12:05Z")

</div>

For some reason when I attempt to replicate the code you have provided, the stacking mechanism stacks all of them together no mater what group they are in. Am I missing something? Also I should mention that I am running on ApexCharts version 1.14

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/4/04fdc5322fd950af421879cca478ba9771a18a44.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/c/3cffe7c2ef3318a332e653eb74a4e10d6f6531dd.png)

---

<div class="post-metadata">

**Author:** ![richhull](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@richhull](https://forum.inductiveautomation.com/u/richhull)\
**Post date:** [April 7, 2025, 3:25pm UTC](https://forum.inductiveautomation.com/t/apexchart-bar-chart-stacking/104742/4 "2025-04-07T15:25:01Z")

</div>

Another thing, this person has also ran into the same problem and does not have a solution. They have provided code similar to mine. I don't know if this helps:

> [@Apexcharts problem with grouped stacked bar](https://forum.inductiveautomation.com/t/apexcharts-problem-with-grouped-stacked-bar/80528):
>
> Hi, It seems that Grouped & Stacked bar Apexcharts doesn't work for me. I've created a chart with same properties as this [link](https://apexcharts.com/javascript-chart-demos/bar-charts/grouped-stacked-bars/). On my designer it shows me that : [image] How can I resolve it ? Thanks My options property : { "plotOptions": { "bar": { "horizontal": true } }, "dataLabels": {}, "xaxis": { "categories": ["Online advertising", "Sales Training", "Print advertising", "Catalogs", "Meetings"], "labels": {} }, "le…

---

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [April 7, 2025, 6:18pm UTC](https://forum.inductiveautomation.com/t/apexchart-bar-chart-stacking/104742/5 "2025-04-07T18:18:46Z")

</div>

You need to have unique names for every item in the group (e.g. Actual1 and Actual2). If they are the same name, they overlap instead of stack.

If you still have issues, you can copy/paste you chart into the thread and we can take a closer look. 🙂

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/a/dafe2624e33b87614b72768b8653963dd91d57ff.png)

```python
[
  {
    "type": "kyvislabs.display.apexchart",
    "version": 0,
    "props": {
      "type": "bar",
      "options": {
        "chart": {
          "dropShadow": {
            "blur": 10,
            "color": "#000",
            "enabled": true,
            "left": 7,
            "opacity": 0.2,
            "top": 18
          },
          "height": 350,
          "toolbar": {
            "show": false
          },
          "type": "line",
          "events": {
            "animationEnd": false,
            "beforeMount": false,
            "mounted": false,
            "updated": false,
            "mouseMove": false,
            "mouseLeave": false,
            "click": false,
            "legendClick": false,
            "markerClick": false,
            "xAxisLabelClick": false,
            "selection": false,
            "dataPointSelection": false,
            "dataPointMouseEnter": false,
            "dataPointMouseLeave": false,
            "beforeZoom": false,
            "beforeResetZoom": false,
            "zoomed": false,
            "scrolled": false,
            "brushScrolled": false
          },
          "stacked": true
        },
        "colors": [
          "#0000FF",
          "#00FF00",
          "#FF0000"
        ],
        "dataLabels": {
          "enabled": true
        },
        "grid": {
          "borderColor": "#e7e7e7",
          "row": {
            "colors": [
              "#f3f3f3",
              "transparent"
            ],
            "opacity": 0.5
          }
        },
        "legend": {
          "floating": true,
          "horizontalAlign": "right",
          "offsetX": -5,
          "offsetY": -25,
          "position": "top"
        },
        "markers": {
          "size": 1
        },
        "stroke": {
          "width": 1,
          "colors": [
            "#fff"
          ]
        },
        "title": {
          "align": "left",
          "text": "Average High & Low Temperature"
        },
        "xaxis": {
          "categories": [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul"
          ],
          "title": {
            "text": "Month"
          }
        },
        "yaxis": {
          "max": 100000,
          "min": 5,
          "title": {
            "text": "Temperature"
          }
        }
      },
      "series": [
        {
          "name": "Target",
          "group": "target",
          "data": [
            44000,
            55000,
            41000,
            67000,
            22000
          ]
        },
        {
          "name": "Actual",
          "group": "actual",
          "data": [
            48000,
            50000,
            40000,
            65000,
            25000
          ]
        },
        {
          "name": "Actual2",
          "group": "actual",
          "data": [
            20000,
            40000,
            25000,
            10000,
            12000
          ]
        }
      ]
    },
    "meta": {
      "name": "apexchart"
    },
    "position": {
      "x": 8,
      "y": 165,
      "width": 757,
      "height": 499
    },
    "custom": {}
  }
]

```

---

<div class="post-metadata">

**Author:** ![richhull](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@richhull](https://forum.inductiveautomation.com/u/richhull)\
**Post date:** [April 7, 2025, 7:05pm UTC](https://forum.inductiveautomation.com/t/apexchart-bar-chart-stacking/104742/6 "2025-04-07T19:05:44Z")

</div>

I copied your code over exactly, and I still get the same results.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/1/f1344f8b61c779c8dd780eff145da2e0f7acc3eb.png)

What version of the module are you running?

---

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [April 7, 2025, 8:01pm UTC](https://forum.inductiveautomation.com/t/apexchart-bar-chart-stacking/104742/7 "2025-04-07T20:01:45Z")

</div>

1.0.18

---

<div class="post-metadata">

**Author:** ![richhull](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@richhull](https://forum.inductiveautomation.com/u/richhull)\
**Post date:** [April 7, 2025, 8:06pm UTC](https://forum.inductiveautomation.com/t/apexchart-bar-chart-stacking/104742/8 "2025-04-07T20:06:26Z")

</div>

I suspect that's the reason why mine isn't working. I am working with version 1.0.14

---

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [April 7, 2025, 8:07pm UTC](https://forum.inductiveautomation.com/t/apexchart-bar-chart-stacking/104742/9 "2025-04-07T20:07:50Z")

</div>

Yeah, there's also a few version differences in the apexChart libraries used, as well. Just confirmed it will work with 1.0.22, which is the latest one.

> **[Releases · Kyvis-Labs/ignition-apexcharts-module](https://github.com/Kyvis-Labs/ignition-apexcharts-module/releases)**
>
> The module provides Perspective ApexCharts components - Kyvis-Labs/ignition-apexcharts-module