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();
