search

apexcharts / vue-apexcharts

📊 Vue 2 component for ApexCharts
https://apexcharts.com
MIT License
1.34k stars 136 forks source link

dataLabels position misalignment with bigger series data #436

Closed Gourab1998 closed 2 years ago

Gourab1998 commented 2 years ago

We are using muti-axis chart image

It works perfectly fine when series has less number of data to show.

image

These are the options I used for it

{ "chart": { "type": "line" }, "stroke": { "width": [ 1, 1, 4 ] }, "title": { "text": "RT/Users Graph for API", "align": "center" }, "dataLabels": { "enabled": true }, "labels": [ "", "CustomRun", "" ], "xaxis": { "type": "string" }, "yaxis": [ { "min": 0, "max": 1540, "title": { "text": "RT" } }, { "min": 0, "max": 1540, "labels": { "show": false } }, { "min": 0, "max": 1540, "labels": { "show": false } }, { "min": 690, "max": 710, "opposite": true, "title": { "text": "Users" } }, { "labels": { "show": false }, "min": 690, "max": 710 }, { "labels": { "show": false }, "min": 690, "max": 710 } ], "tooltip": { "y": {} } }

This is the series : -

[ { "name": "refapp-takt-2022t08a-testing", "type": "column", "data": [ null, 29, null ] }, { "name": "refapp-takt-2022t08a-testing-1", "type": "column", "data": [ null, 21, null ] }, { "name": "hyperscaler-1", "type": "column", "data": [ null, 1530, null ] }, { "name": "refapp-takt-2022t08a-testing-users", "type": "line", "data": [ null, 700, null ] }, { "name": "refapp-takt-2022t08a-testing-1-users", "type": "line", "data": [ null, 700, null ] }, { "name": "hyperscaler-1-users", "type": "line", "data": [ null, 700, null ] } ]

But the dataLabels breakout when we try to show more volume of data

image

These are the options and series associated with it : -

Options

{ "chart": { "type": "line" }, "stroke": { "width": [ 1, 1, 4 ] }, "title": { "text": "RT/Users Graph for API", "align": "center" }, "dataLabels": { "enabled": true }, "labels": [ "", "CustomRun", "" ], "xaxis": { "type": "string" }, "yaxis": [ { "min": 0, "max": 1540, "title": { "text": "RT" } }, { "min": 0, "max": 1540, "labels": { "show": false } }, { "min": 0, "max": 1540, "labels": { "show": false } }, { "min": 0, "max": 1540, "labels": { "show": false } }, { "min": 0, "max": 1540, "labels": { "show": false } }, { "min": 190, "max": 710, "opposite": true, "title": { "text": "Users" } }, { "labels": { "show": false }, "min": 190, "max": 710 }, { "labels": { "show": false }, "min": 190, "max": 710 }, { "labels": { "show": false }, "min": 190, "max": 710 }, { "labels": { "show": false }, "min": 190, "max": 710 } ], "tooltip": { "y": {} } }

Series

[ { "name": "refapp-takt-2022.t08a-92", "type": "column", "data": [ null, 13, null ] }, { "name": "refapp-takt-2022t08a-2", "type": "column", "data": [ null, 27, null ] }, { "name": "refapp-takt-2022t08a-testing", "type": "column", "data": [ null, 29, null ] }, { "name": "refapp-takt-2022t08a-testing-1", "type": "column", "data": [ null, 21, null ] }, { "name": "hyperscaler-1", "type": "column", "data": [ null, 1530, null ] }, { "name": "refapp-takt-2022.t08a-92-users", "type": "line", "data": [ null, 675, null ] }, { "name": "refapp-takt-2022t08a-2-users", "type": "line", "data": [ null, 200, null ] }, { "name": "refapp-takt-2022t08a-testing-users", "type": "line", "data": [ null, 700, null ] }, { "name": "refapp-takt-2022t08a-testing-1-users", "type": "line", "data": [ null, 700, null ] }, { "name": "hyperscaler-1-users", "type": "line", "data": [ null, 700, null ] } ]