How to change xaxis labels styling on column chart?

[genialkartik]

How to change x-axis labels background-colors, border's width, and radius?

I'm using this configuration:

 const options = {
   ...
    xaxis: {
      categories: props.dataX,
      labels: {
        style: {
          fontSize: "14px",
          colors: "red",
          backgroundColor: "#ff0000",
          cssClass: "chart-label-x",
        },
      },
      axisTicks: { show: false },
    },
    ...
    },
  };

Current Chart Design:

Targeted Chart Design:

Language stacks using:

1. React.js
2. Material-UI

Note:
Adding external css class (cssClass: "chart-label-x") and defining properties in external css style file (styles.css) didn't help.

.chart-label-x {
  border-style: solid;
  border: 5px solid red;
  background: blue;
  color: yellow;
}

[genialkartik]

Any update on this?
Anyone?

[hossamrq]

Any update please on this @genialkartik 🙏🏻

[gwyn17]

One crude way to do this is to get all the .apexcharts-xaxis-label and create a <rect> that overlaps them. The following pure-JS works for me. YMMV.

        // Run this after you call chart.render();

        var parent = this.chart.w.globals.dom.baseEl;
        var labels = parent.querySelectorAll( ".apexcharts-xaxis-label" );
        parent = parent.querySelector( ".apexcharts-svg" );
        var box = parent.getBoundingClientRect();
        var px = 10;    // padding
        var py = 5;
        var dx = box.x+px;  // offset
        var dy = box.y+py;
        px *= 2;        // efficiency
        py *= 2;
        labels.forEach( function ( el, i, list ) {
                var box = el.getBoundingClientRect();
                var rect = document.createElementNS( 'http://www.w3.org/2000/svg', 'rect' );
                rect.setAttribute( "class", "apexcharts-xaxis-box" );
                rect.setAttribute( 'x', Math.round( box.x - dx ) );
                rect.setAttribute( 'y', Math.round( box.y - dy ) );
                rect.setAttribute( 'width', Math.round( box.width + px ) );
                rect.setAttribute( 'height', Math.round( box.height + py ) );
                rect.setAttribute( 'rx', 3 );
                parent.appendChild( rect );
            } );

These <rect>s are styled thusly :

.apexcharts-xaxis-box {
    fill: transparent;
    stroke: blue;
}

The above is only a proof of concept. Each time you call chart.render() you might have to move your <rect>s around.

You are going to have to play around with Z order to get the text on background you show in your example.