Search code examples
javascriptchartslinechartapexcharts

How can I change Xaxis tooltip style in Apexchart?

I make a line chart in React and try to look like the style of Figma. I need a change of the style of Xaxis toolbar.

This is my chart toolbar.

enter image description here

This is Figma chart toolbar.

enter image description here

My xaxis chart code

  xaxis: {
      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
      labels: {
        show: true,
        style: {
          colors: "#D2D2D2",
        },
      },
      crosshairs: {
        width: 1,
        stroke: {
          color: "#1F51C1",
          dashArray: 0,
        },
      },
      axisTicks: {
        show: false,
      },
      tooltip: {},
    },
Solution

  • Try editing apexcharts-xaxistooltip class in css. Code below should work

    .apexcharts-xaxistooltip{
  background: transparent;  // recommend changing color to be the same as that of the char
  border: none;
  color: #2b63dc;
  margin-top: 4px;
  padding-bottom: 0;
  font-weight: bold;
}
.apexcharts-xaxistooltip-bottom:before{
  opacity: 0  // hide arrow
}
.apexcharts-xaxistooltip-bottom:after{
  opacity: 0  // hide arrow
}