Apexcharts stacked chart with lines issue

Viewed 156

enter image description here

We have stacked chart with columns and two lines (https://jsfiddle.net/c1hpkgjb/1/). Everything works fine, except line "Fourth", position of that line is wrong, looks like she starts painting not from zero, but from the "Third" line. Value of "Fourth" line is over 9 millions, but it is displayed too high, at ~19 millions. Why it can happen? There is simple example of code:

var options = {
  "chart": {
    "id": "chartMain",
    "locales": [
      {
        "name": "ru"
      }
    ],
    "defaultLocale": "ru",
    "stacked": true
  },
  "labels": [
    "2019-07",
    "2019-08"
  ],
  "xaxis": {
    "type": "text"
  },
  "yaxis": [
    {
      "show": true
    }
  ],
  "markers": {
    "size": 5,
    "shape": "square",
    "radius": 0
  },
  "stroke": {
    "width": [
      0,
      0,
      4,
      4
    ]
  },
  "colors": [
    "#008ffb",
    "#feb019",
    "#00e396",
    "#775dd0"
  ],
  "series": [
    {
      "name": "first",
      "type": "column",
      "data": [
        {
          "x": "2019-07",
          "y": 9027007.39
        },
        {
          "x": "2019-08",
          "y": 9415941.29
        }
      ]
    },
    {
      "name": "second",
      "type": "column",
      "data": [
        {
          "x": "2019-07",
          "y": 577201
        },
        {
          "x": "2019-08",
          "y": 577201.3
        }
      ]
    },
    {
      "name": "third",
      "data": [
        {
          "x": "2019-07",
          "y": 9160489.34
        },
        {
          "x": "2019-08",
          "y": 9569882.8
        }
      ]
    },
    {
      "name": "fourth",
      "data": [
        {
          "x": "2019-07",
          "y": 9944204.82
        },
        {
          "x": "2019-08",
          "y": 10375475.84
        }
      ]
    }
  ]
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
1 Answers

Yes, this is because you have stacked: true, which applies to all series, including the columns and lines. So the "fourth" series will add on top of the others. Unfortunately there is not option in Apex charts to select which data should be stacked.

Related