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",
Description
I used the same code for the
xaxis
andyaxis
(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 instyle.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
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