Chart

Visualização de dados com integração ApexCharts.

Instalação

Este componente requer apexcharts como dependência:

npm install apexcharts

npm install apexcharts

Importação

import { Chart } from 'asterui/chart'

import { Chart } from 'asterui/chart'

Exemplos

Gráfico de linhas

Gráfico de linhas simples para séries temporais.

</>

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 multilinhas

Comparar múltiplas séries de dados.

</>

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

Visualização de dados 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 empilhadas

Mostrar a composição 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 de pizza

Mostrar proporções de um 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 rosca

Gráfico de pizza com recorte central para totais.

</>

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 linhas com área preenchida.

</>

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 comparação multieixo.

</>

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 radiais

Indicadores de progresso 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

Propriedade	Descrição	Tipo	Padrão
type	Tipo de gráfico	'line' | 'bar' | 'pie' | 'donut' | 'area' | 'radar' | 'radialBar'	'line'
series	Séries de dados	ApexAxisChartSeries | ApexNonAxisChartSeries	[]
options	Opções do ApexCharts	ApexOptions	{}
height	Altura do gráfico	number | string	350
width	Largura do gráfico	number | string	'100%'
data-testid	ID de teste para testes	string	-
className	Classes CSS adicionais	string	-

Acessibilidade

• Os gráficos incluem rótulos ARIA para pontos de dados
• Os itens de legenda são navegáveis por teclado
• As dicas de ferramentas fornecem dados detalhados ao passar o mouse/focar
• As cores são escolhidas para contraste suficiente