ApexChart Bar Chart Stacking

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:

Is there any specific way I could accomplish this?

You should be able to use grouped series.

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

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:

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. :slight_smile:

[
  {
    "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": {}
  }
]
1 Like

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

What version of the module are you running?

1.0.18

1 Like

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

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.

1 Like