I'm trying to create a candlestick chart with apexcharts, and everything seems to work fine, except that the yaxis is showing up with a very faint color that I can barely see. I can tell that it's showing up because I can update the fontsize and see it, but for some reason the color won't update. Here is my config:
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,
}
}
}
Any ideas why this isn't showing up as white as specified? I'd like to be able to show the yaxis values.
The issue was the version. I did the following:
npm uninstall apexcharts
npm i apexcharts@3.6.3
--restarted npm
npm run start
Then it worked!