Charts

BarChartHorizontal

Componente de BarChartHorizontal

O BarChartHorizontal exibe gráficos de barras orientados horizontalmente, permitindo a visualização de dados ao longo de diferentes categorias. Ele oferece opções para exibição de legendas, customização de dados e controle de altura para gráficos maiores.


Como importar

import { BarChartHorizontal } from '@/app/shared/@JustLaunch/components/Charts'

Exemplo de uso

<BarChartHorizontal
  xDataKey="name"
  yDataKey="value"
  data={[
    { name: 'Jan', value: 300 },
    { name: 'Fev', value: 200 },
    { name: 'Mar', value: 450 },
    { name: 'Abr', value: 350 },
  ]}
  title="Horizontal Bar Chart"
  description="This chart shows data values over time, oriented horizontally."
/>

Com Legenda

<BarChartHorizontal
  xDataKey="name"
  yDataKey="value"
  data={[
    { name: 'Jan', value: 300 },
    { name: 'Fev', value: 200 },
    { name: 'Mar', value: 450 },
    { name: 'Abr', value: 350 },
  ]}
  title="Horizontal Bar Chart"
  description="This chart shows data values over time, oriented horizontally."
  showLegend={true}
/>

Sem Dados

<BarChartHorizontal
  xDataKey="name"
  yDataKey="value"
  data={[]}
  title="No Data Available"
  description="This chart is currently empty as no data is provided."
/>

Chaves de Dados Ausentes

<BarChartHorizontal
  xDataKey=""
  yDataKey=""
  data={[
    { name: 'Jan', value: 300 },
    { name: 'Fev', value: 200 },
  ]}
  title="Invalid Data Keys"
  description="Data keys are missing or invalid."
/>
Previous
BarChart