Chart

Data visualization with ApexCharts integration.

Installation

This component requires apexcharts as a peer dependency:

npm install apexcharts

npm install apexcharts

Import

import { Chart } from 'asterui/chart'

import { Chart } from 'asterui/chart'

Examples

Line Chart

Simple line chart for time series data.

</>

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

Multi-line Chart

Compare multiple data series.

</>

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

Bar Chart

Categorical data visualization.

</>

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

Stacked Bar Chart

Show composition of values.

</>

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

Pie Chart

Show proportions of a whole.

</>

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

Donut Chart

Pie chart with center cutout for totals.

</>

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

Area Chart

Line chart with filled area.

</>

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

Radar Chart

Multi-axis comparison chart.

</>

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

Radial Bar Chart

Circular progress indicators.

</>

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

Property	Description	Type	Default
type	Chart type	'line' | 'bar' | 'pie' | 'donut' | 'area' | 'radar' | 'radialBar'	'line'
series	Data series	ApexAxisChartSeries | ApexNonAxisChartSeries	[]
options	ApexCharts options	ApexOptions	{}
height	Chart height	number | string	350
width	Chart width	number | string	'100%'
data-testid	Test ID for testing	string	-
className	Additional CSS classes	string	-

Accessibility

• Charts include ARIA labels for data points
• Legend items are keyboard navigable
• Tooltips provide detailed data on hover/focus
• Colors are chosen for sufficient contrast