Search code examples
javascripthtmlcssapexcharts

Y-axis font color using apexcharts


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,
    }
  }
}

Here is what I see: I made the fontsize on the yaxis larger so you can see this if you look closely

Any ideas why this isn't showing up as white as specified? I'd like to be able to show the yaxis values.


Solution

  • 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!