apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG
https://apexcharts.com
MIT License
14.03k stars 1.28k forks source link

xaxis and yaxis differente style behaviour #4526

Open Pedrocanoas opened 3 weeks ago

Pedrocanoas commented 3 weeks ago

Description

I used the same code for the xaxis and yaxis (fields, values, objects...), however, an unexpected behavior occurred between them: on the x-axis, the first value (column/grid) is not getting the color, while on the y-axis it does. Both have the same number of colors set in style.colors.

Steps to Reproduce

Using the scatter graph on vue3, and insert the same code labels.style in both "apexcharts": "^3.49.0", "vue": "^3.4.15", "vue3-apexcharts": "^1.5.2",

Expected Behavior

Both axes should have the same styling behavior.

Actual Behavior

x-axis is not colorizing the first element

Screenshots

image

Reproduction Link

https://codesandbox.io/p/sandbox/vue-basic-example-forked-pqpfcf?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clxddh8mg00063j6gonyh69ei%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clxddh8mg00023j6g4pp9pta8%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clxddh8mg00033j6g0x7sncoa%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clxddh8mg00053j6gvrlwydak%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B40%252C60%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clxddh8mg00023j6g4pp9pta8%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clxddh8mg00013j6gu7eu2hw6%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Findex.html%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clxddlubm00023j6gn1ltsvcw%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A11%252C%2522startColumn%2522%253A17%252C%2522endLineNumber%2522%253A11%252C%2522endColumn%2522%253A17%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Fcomponents%252FChart.component.vue%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clxddh8mg00023j6g4pp9pta8%2522%252C%2522activeTabId%2522%253A%2522clxddlubm00023j6gn1ltsvcw%2522%257D%252C%2522clxddh8mg00053j6gvrlwydak%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clxddh8mg00043j6ggbkqycs6%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clxddh8mg00053j6gvrlwydak%2522%252C%2522activeTabId%2522%253A%2522clxddh8mg00043j6ggbkqycs6%2522%257D%252C%2522clxddh8mg00033j6g0x7sncoa%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clxddh8mg00033j6g0x7sncoa%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D