Charts

Data visualization with line, bar, area, and pie charts

SaaSAnalytics

Overview

The Charts module provides a suite of data visualization components built on top of Recharts. The XY charts (LineChart, BarChart, AreaChart) share a ChartSeries[] shape; PieChart takes a flat PieChartDataPoint[]. ChartContainer wraps any chart in a card with title, description, and state management.

Usage

import { ChartContainer, LineChart } from '@leanicon/web-builder-library/saas'

const data = [
  {
    id: 'revenue',
    name: 'Revenue',
    data: [
      { x: 'Jan', y: 400 },
      { x: 'Feb', y: 600 },
      { x: 'Mar', y: 550 },
    ],
  },
]

;<ChartContainer title="Revenue Trend">
  <LineChart data={data} height={250} />
</ChartContainer>

Variants

LineChart

Monthly Revenue

LineChart — multi-series

Pass multiple entries in data to render several lines on the same chart. Each series gets a distinct colour from the chart palette.

Revenue vs. Expenses

BarChart

Monthly Sales

BarChart — grouped (multi-series)

New vs. Returning Customers

AreaChart

Traffic Overview

AreaChart — stacked (multi-series)

Traffic by Source

PieChart

PieChart takes a flat PieChartDataPoint[] ({ name, value, color? }) — not the wrapped ChartSeries[] shape the XY charts use.

Plan Distribution

Loading State

Loading chart...

Fetching data for visualization.

Empty State

No data available

There is no data to display for the selected period.

Error State

ErrorState requires a message prop; title is optional.