Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to hide x axis bar on apex chart?

I'm used react-apexcharts to make this below graph, i need to show a minimal view of a graph so i hide both x, y axis, legends, grid and everything, but this bar at the bottom not hiding. i couldn't find the right option on the documentation! is there any way to hide this?

This is the current output i'm getting!

current output

const ProductivityGraph = () => {
  const series = [{
    name: 'Series A',
    data: [23, 24, 25, 15, 25, 28, 38, 46],
  },
  {
    name: 'Series B',
    data: [20, 29, 37, 36, 44, 45, 50, 58],
  },
  ];
  const options:any = {
    chart: {
      toolbar: { // Hamburger menu at top
        show: false,
      },
      height: 350,
      type: 'line',
      zoom: {
        enabled: false,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth',
      width: 2,
    },
    title: {
      text: undefined,
      align: 'left',
    },
    grid: {
      show: false,
    },
    legend: {
      show: false,
    },
    xaxis: {
      show: false,
      labels: {
        show: false,
      },
      
    },
    yaxis: {
      show: false,
      labels: {
        show: false,
      },
      axisBorder: {
        show: false,
      },
      axisTicks: {
        show: false,
      },
      crosshairs: {
        show: false,
      },
      tooltip: {
        enabled: false,
      },
     
    },
  };
  return (
    <div>
      <ReactApexChart options={options} series={series} type="line" width={250} />
    </div>
  );
};
like image 679
Nivethan Avatar asked Oct 24 '25 04:10

Nivethan


1 Answers

In your options replace xaxis with below one

xaxis: {
  show: false,
  labels: {
    show: false
  },
  axisBorder: {
    show: false
  },
  axisTicks: {
    show: false
  }
},
like image 196
Vishnu Sajeev Avatar answered Oct 25 '25 18:10

Vishnu Sajeev



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!