Chart

Visualisation de données avec intégration ApexCharts.

Installation

Ce composant nécessite apexcharts comme dépendance :

npm install apexcharts

npm install apexcharts

Import

import { Chart } from 'asterui/chart'

import { Chart } from 'asterui/chart'

Exemples

Graphique linéaire

Graphique linéaire simple pour les séries temporelles.

</>

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

Graphique multi-lignes

Comparer plusieurs séries de données.

</>

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

Graphique à barres

Visualisation de données catégorielles.

</>

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

Graphique à barres empilées

Afficher la composition des valeurs.

</>

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

Graphique circulaire

Afficher les proportions d'un ensemble.

</>

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

Graphique en anneau

Graphique circulaire avec découpe centrale pour les totaux.

</>

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

Graphique en aires

Graphique linéaire avec zone remplie.

</>

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

Graphique radar

Graphique de comparaison multi-axes.

</>

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

Graphique à barres radiales

Indicateurs de progression circulaires.

</>

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

Propriété	Description	Type	Défaut
type	Type de graphique	'line' | 'bar' | 'pie' | 'donut' | 'area' | 'radar' | 'radialBar'	'line'
series	Séries de données	ApexAxisChartSeries | ApexNonAxisChartSeries	[]
options	Options ApexCharts	ApexOptions	{}
height	Hauteur du graphique	number | string	350
width	Largeur du graphique	number | string	'100%'
data-testid	ID de test pour les tests	string	-
className	Classes CSS supplémentaires	string	-

Accessibilité

• Les graphiques incluent des étiquettes ARIA pour les points de données
• Les éléments de légende sont navigables au clavier
• Les infobulles fournissent des données détaillées au survol/focus
• Les couleurs sont choisies pour un contraste suffisant