I am currently working on creating a candlestick chart using apexcharts, and most of it is going smoothly. However, I have encountered an issue where the color of the y-axis appears very faint and almost invisible. Despite adjusting the font size successfully, the color itself refuses to change. Below is my configuration:
export const chartOptions = {
chart: {
animations: { enabled: false },
toolbar: { show: false },
width: '100px'
},
tooltip: {
enabled: false,
theme: false,
style: {
fontSize: '12px',
fontFamily: undefined
},
x: {
show: false,
format: 'dd MMM',
formatter: undefined,
},
y: {
show: true,
title: 'price'
},
marker: {
show: false,
},
items: {
display: 'flex',
},
fixed: {
enabled: false,
position: 'topRight',
offsetX: 0,
offsetY: 0,
},
},
xaxis: {
type: 'datetime',
labels: {
show: true,
style: {
colors: '#fff',
fontSize: '8px',
cssClass: 'apexcharts-xaxis-label',
},
},
},
yaxis: {
labels: {
show: true,
minWidth: 0,
maxWidth: 160,
style: {
color: '#fff',
fontSize: '8px',
cssClass: 'apexcharts-yaxis-label',
},
offsetX: 0,
offsetY: 0,
rotate: 0,
}
}
}
What I am seeing is depicted in this image: https://i.sstatic.net/tZ1EE.png
Any suggestions on why the color isn't displaying as white as specified? I aim to make the y-axis values visible.