Search code examples
reactjschartsapexcharts

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>
  );
};

Solution

  • In your options replace xaxis with below one

    xaxis: {
      show: false,
      labels: {
        show: false
      },
      axisBorder: {
        show: false
      },
      axisTicks: {
        show: false
      }
    },