Chart

Visualización de datos con integración de ApexCharts.

Instalación

Este componente requiere apexcharts como dependencia:

npm install apexcharts

npm install apexcharts

Importación

import { Chart } from 'asterui/chart'

import { Chart } from 'asterui/chart'

Ejemplos

Gráfico de líneas

Gráfico de líneas simple para series temporales.

</>

import { Chart } from 'asterui/chart'

function App() {
  return (
      <Chart
        type="line"
        height={300}
        series={[
          {
            name: 'Sales',
            data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
          },
        ]}
        options={{
          xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
          },
        }}
      />
    )
}

export default App

Gráfico multilínea

Comparar múltiples series de datos.

</>

import { Chart } from 'asterui/chart'

function App() {
  return (
      <Chart
        type="line"
        height={300}
        series={[
          {
            name: 'Revenue',
            data: [30, 40, 45, 50, 49, 60, 70, 91],
          },
          {
            name: 'Expenses',
            data: [20, 35, 40, 35, 40, 55, 60, 75],
          },
        ]}
        options={{
          xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
          },
          stroke: {
            curve: 'smooth',
          },
        }}
      />
    )
}

export default App

Gráfico de barras

Visualización de datos categóricos.

</>

import { Chart } from 'asterui/chart'

function App() {
  return (
      <Chart
        type="bar"
        height={300}
        series={[
          {
            name: 'Sales',
            data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
          },
        ]}
        options={{
          xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
          },
          plotOptions: {
            bar: {
              borderRadius: 4,
            },
          },
        }}
      />
    )
}

export default App

Gráfico de barras apiladas

Mostrar la composición de valores.

</>

import { Chart } from 'asterui/chart'

function App() {
  return (
      <Chart
        type="bar"
        height={300}
        series={[
          { name: 'Product A', data: [44, 55, 41, 67, 22, 43] },
          { name: 'Product B', data: [13, 23, 20, 8, 13, 27] },
          { name: 'Product C', data: [11, 17, 15, 15, 21, 14] },
        ]}
        options={{
          chart: { stacked: true },
          xaxis: { categories: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6'] },
        }}
      />
    )
}

export default App

Gráfico circular

Mostrar proporciones de un conjunto.

</>

import { Chart } from 'asterui/chart'

function App() {
  return (
      <Chart
        type="pie"
        height={350}
        series={[44, 55, 13, 43, 22]}
        options={{
          labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
          legend: {
            position: 'bottom',
          },
        }}
      />
    )
}

export default App

Gráfico de dona

Gráfico circular con corte central para totales.

</>

import { Chart } from 'asterui/chart'

function App() {
  return (
      <Chart
        type="donut"
        height={350}
        series={[44, 55, 41, 17, 15]}
        options={{
          labels: ['Apple', 'Mango', 'Orange', 'Watermelon', 'Grapes'],
          legend: {
            position: 'bottom',
          },
          plotOptions: {
            pie: {
              donut: {
                labels: {
                  show: true,
                  total: {
                    show: true,
                    label: 'Total',
                  },
                },
              },
            },
          },
        }}
      />
    )
}

export default App

Gráfico de área

Gráfico de líneas con área rellena.

</>

import { Chart } from 'asterui/chart'

function App() {
  return (
      <Chart
        type="area"
        height={300}
        series={[
          {
            name: 'Series 1',
            data: [31, 40, 28, 51, 42, 109, 100],
          },
          {
            name: 'Series 2',
            data: [11, 32, 45, 32, 34, 52, 41],
          },
        ]}
        options={{
          xaxis: {
            categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          },
          stroke: {
            curve: 'smooth',
          },
          fill: {
            type: 'gradient',
            gradient: {
              opacityFrom: 0.6,
              opacityTo: 0.1,
            },
          },
        }}
      />
    )
}

export default App

Gráfico de radar

Gráfico de comparación multieje.

</>

import { Chart } from 'asterui/chart'

function App() {
  return (
      <Chart
        type="radar"
        height={350}
        series={[
          {
            name: 'Series 1',
            data: [80, 50, 30, 40, 100, 20],
          },
          {
            name: 'Series 2',
            data: [20, 30, 40, 80, 20, 80],
          },
        ]}
        options={{
          xaxis: {
            categories: ['Speed', 'Power', 'Agility', 'Endurance', 'Accuracy', 'Stealth'],
          },
        }}
      />
    )
}

export default App

Gráfico de barras radiales

Indicadores de progreso circulares.

</>

import { Chart } from 'asterui/chart'

function App() {
  return (
      <Chart
        type="radialBar"
        height={350}
        series={[76, 67, 61, 90]}
        options={{
          labels: ['Apples', 'Oranges', 'Bananas', 'Berries'],
          plotOptions: {
            radialBar: {
              dataLabels: {
                total: {
                  show: true,
                  label: 'Total',
                },
              },
            },
          },
        }}
      />
    )
}

export default App

API

Chart

Propiedad	Descripción	Tipo	Por defecto
type	Tipo de gráfico	'line' | 'bar' | 'pie' | 'donut' | 'area' | 'radar' | 'radialBar'	'line'
series	Series de datos	ApexAxisChartSeries | ApexNonAxisChartSeries	[]
options	Opciones de ApexCharts	ApexOptions	{}
height	Altura del gráfico	number | string	350
width	Ancho del gráfico	number | string	'100%'
data-testid	ID de prueba para pruebas	string	-
className	Clases CSS adicionales	string	-

Accesibilidad

• Los gráficos incluyen etiquetas ARIA para los puntos de datos
• Los elementos de leyenda son navegables por teclado
• Los tooltips proporcionan datos detallados al pasar el cursor/enfocar
• Los colores se eligen para un contraste suficiente