Content

Charts

Beautiful, responsive data visualizations including Line, Area, Bar, and Pie charts.

Line Chart

Ideal for showing trends over time or categories.

'use client'

import React from 'react'
import { LineChart, Card } from 'biibaos'

const data = [
  { name: 'Jan', Sales: 4000, Revenue: 2400 },
  { name: 'Feb', Sales: 3000, Revenue: 1398 },
  { name: 'Mar', Sales: 2000, Revenue: 9800 },
  { name: 'Apr', Sales: 2780, Revenue: 3908 },
  { name: 'May', Sales: 1890, Revenue: 4800 },
  { name: 'Jun', Sales: 2390, Revenue: 3800 },
]

export default function App() {
  return (
    <Card style={{ padding: 24 }}>
      <LineChart
        index="name"
        categories={['Sales', 'Revenue']}
        data={data}
        colors={['var(--biiba-primary)', 'var(--biiba-secondary)']}
      />
    </Card>
  )
}

Area Chart

A line chart with a shaded area below the line, emphasizing volume.

'use client'

import React from 'react'
import { AreaChart, Card } from 'biibaos'

const data = [
  { name: 'Mon', Users: 2400, Active: 1200 },
  { name: 'Tue', Users: 1398, Active: 800 },
  { name: 'Wed', Users: 9800, Active: 4500 },
  { name: 'Thu', Users: 3908, Active: 2000 },
  { name: 'Fri', Users: 4800, Active: 3000 },
  { name: 'Sat', Users: 3800, Active: 1500 },
  { name: 'Sun', Users: 4300, Active: 2500 },
]

export default function App() {
  return (
    <Card style={{ padding: 24 }}>
      <AreaChart
        index="name"
        categories={['Users', 'Active']}
        data={data}
        colors={['var(--biiba-primary)', 'var(--biiba-success)']}
      />
    </Card>
  )
}

Bar Chart

Compare values across different categories with rounded bars.

'use client'

import React from 'react'
import { BarChart, Card } from 'biibaos'

const data = [
  { name: 'Q1', Profit: 5400, Loss: 1200 },
  { name: 'Q2', Profit: 3200, Loss: 800 },
  { name: 'Q3', Profit: 7100, Loss: 2100 },
  { name: 'Q4', Profit: 4500, Loss: 1500 },
]

export default function App() {
  return (
    <Card style={{ padding: 24 }}>
      <BarChart
        index="name"
        categories={['Profit', 'Loss']}
        data={data}
        colors={['var(--biiba-primary)', 'var(--biiba-danger)']}
      />
    </Card>
  )
}

Pie & Donut Chart

Show proportions and percentages in a beautiful donut format.

'use client'

import React from 'react'
import { PieChart, Card } from 'biibaos'

const data = [
  { name: 'Direct', value: 400 },
  { name: 'Social', value: 300 },
  { name: 'Email', value: 200 },
  { name: 'Other', value: 100 },
]

export default function App() {
  return (
    <Card style={{ padding: 24 }}>
      <PieChart
        data={data}
      />
    </Card>
  )
}

Properties

Prop	Type	Default	Description
`data`	`any[]`	—	Structured array of data objects to map onto the chart
`height`	`number \| string`	—	Vertical dimension of the chart area in pixels
`index`	`string`	—	Key representing the primary X-axis coordinate categories
`categories`	`string[]`	—	Keys of data fields to render as separate chart lines/bars
`colors`	`string[]`	—	Array of custom color overrides for each category series
`showGrid`	`boolean`	—	If true, draws gridlines behind the coordinates
`showXAxis`	`boolean`	—	Configures the showXAxis option
`showYAxis`	`boolean`	—	Configures the showYAxis option
`showTooltip`	`boolean`	—	If true, reveals interactive pointer tracking popovers
`showLegend`	`boolean`	—	If true, displays interactive series color legends
`curveType`	`'basis' \| 'basisClosed' \| 'basisOpen' \| 'linear' \| 'linearClosed' \| 'natural' \| 'monotoneX' \| 'monotoneY' \| 'monotone' \| 'step' \| 'stepBefore' \| 'stepAfter'`	—	Configures the curveType option
`layout`	`'horizontal' \| 'vertical'`	—	Configures the layout option
`value`	`number`	—	Raw data string or URL to encode into the QR grid

Table

Breadcrumb