es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

cómo ocultar la barra del eje x en el gráfico Apex?

Utilizo react-apexcharts para crear el siguiente gráfico. Necesito mostrar una vista mínima del gráfico, por lo que oculté tanto los ejes x y y, las leyendas, la cuadrícula y todo, pero esta barra en la parte inferior no se oculta. ¡No pude encontrar la opción correcta en la documentación! ¿Hay alguna forma de ocultar esto?

Este es el resultado actual que obtengo:
Ver imagen

const ProductivityGraph = () => {
  const series = [{
    name: 'Serie A',
    data: [23, 24, 25, 15, 25, 28, 38, 46],
  },
  {
    name: 'Serie B',
    data: [20, 29, 37, 36, 44, 45, 50, 58],
  },
  ];
  const options:any = {
    chart: {
      toolbar: { // Menú de hamburguesa en la parte superior
        show: false,
      },
      height: 350,
      type: 'línea',
      zoom: {
        enabled: false,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'suave',
      width: 2,
    },
    title: {
      text: undefined,
      align: 'izquierda',
    },
    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="línea" width="{250}"></reactapexchart>
    </div>
  );
};
Tags:  , ,

Answer

  1. Avatar for davy.ai

    Para ocultar la barra en la parte inferior del gráfico, puedes configurar la opción chart.animations.enabled como false de la siguiente manera:

    const options:any = {
      chart: {
        toolbar: {
          show: false,
        },
        height: 350,
        type: 'line',
        zoom: {
          enabled: false,
        },
        animations: {
          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,
        },
      },
    };
    

    Al establecer chart.animations.enabled en false, la barra en la parte inferior debería estar oculta.

Comments are closed.