React Chart Library

A lightweight, customizable chart visualization library for React applications featuring multiple chart types.

Installation

npm install react-chart-list

Available Charts

• BoxChart - Visualize data as proportional boxes
• PieChart - Display data as a circular pie chart
• AreaChart - Show trends over a continuous interval
• BulletChart - Track performance against a target
• Treemap - Hierarchical data visualization with nested rectangles

Usage Examples

BoxChart

Visualize data as proportional boxes.

import { BoxChart } from 'react-chart-list';

const data = [
  { label: 'Product A', value: 30, color: '#6366f1' },
  { label: 'Product B', value: 25, color: '#ec4899' },
  { label: 'Product C', value: 20, color: '#14b8a6' },
  { label: 'Product D', value: 15, color: '#f59e0b' },
];

<BoxChart data={data} />

PieChart

Display data as a circular pie chart.

import { PieChart } from 'react-chart-list';

const data = [
  { label: 'Product A', value: 30, color: '#6366f1' },
  { label: 'Product B', value: 25, color: '#ec4899' },
  { label: 'Product C', value: 20, color: '#14b8a6' },
  { label: 'Product D', value: 15, color: '#f59e0b' },
];

<PieChart data={data} />

AreaChart

Show trends over a continuous interval.

import { AreaChart } from 'react-chart-list';

const data = [
  { x: 'Jan', y: 10 },
  { x: 'Feb', y: 25 },
  { x: 'Mar', y: 15 },
  { x: 'Apr', y: 30 },
  { x: 'May', y: 22 },
  { x: 'Jun', y: 40 },
  { x: 'Jul', y: 35 },
];

<AreaChart data={data} />

BulletChart

Track performance against a target with visual ranges.

import { BulletChart } from 'react-chart-list';

<BulletChart
  title="Revenue 2025"
  subtitle="$ in thousands"
  value={85}
  min={0}
  max={100}
  target={90}
  ranges={[
    { min: 0, max: 50, color: 'fill-red-200' },
    { min: 50, max: 75, color: 'fill-yellow-200' },
    { min: 75, max: 100, color: 'fill-green-200' }
  ]}
  barColor="fill-blue-600"
  targetColor="fill-red-600"
  orientation="horizontal"
  animated={true}
/>

Treemap

Hierarchical data visualization with nested rectangles.

import { Treemap } from 'react-chart-list';

<Treemap 
  data={[
    { id: 'complete', label: 'Completed', value: 68, color: 'fill-green-500' },
    { id: 'progress', label: 'In Progress', value: 17, color: 'fill-yellow-500' },
    { id: 'blocked', label: 'Blocked', value: 8, color: 'fill-red-500' },
    { id: 'backlog', label: 'Backlog', value: 42, color: 'fill-blue-500' },
    { id: 'planning', label: 'Planning', value: 15, color: 'fill-purple-500' }
  ]}
  valueFormat={(value) => `${value} tasks`}
  title="Project Status"
  padding={3}
  borderWidth={2}
  borderColor="stroke-gray-700"
  showTooltip={true}
/>

Component Props

BoxChart Props

| Prop | Type | Description | Default | |------|------|-------------|---------| | data | Array | Array of objects with label, value, and color properties | Required | | width | Number | Width of the chart in pixels | 500 | | height | Number | Height of the chart in pixels | 300 | | padding | Number | Padding around the chart | 20 | | showLabels | Boolean | Whether to show labels | true | | showValues | Boolean | Whether to show values | true |

PieChart Props

| Prop | Type | Description | Default | |------|------|-------------|---------| | data | Array | Array of objects with label, value, and color properties | Required | | width | Number | Width of the chart in pixels | 400 | | height | Number | Height of the chart in pixels | 400 | | innerRadius | Number | Radius for donut hole (0 for pie chart) | 0 | | showLegend | Boolean | Whether to show the legend | true | | showLabels | Boolean | Whether to show labels on chart | false | | showPercentages | Boolean | Whether to show percentages | true |

AreaChart Props

| Prop | Type | Description | Default | |------|------|-------------|---------| | data | Array | Array of objects with x and y properties | Required | | width | Number | Width of the chart in pixels | 600 | | height | Number | Height of the chart in pixels | 300 | | areaColor | String | Fill color for the area | '#6366f1' | | lineColor | String | Line color | '#4f46e5' | | showPoints | Boolean | Whether to show data points | true | | showGrid | Boolean | Whether to show background grid | true | | showAxis | Boolean | Whether to show x and y axes | true |

BulletChart Props

| Prop | Type | Description | Default | |------|------|-------------|---------| | title | String | Chart title | '' | | subtitle | String | Chart subtitle | '' | | value | Number | Current value to display | Required | | min | Number | Minimum value | 0 | | max | Number | Maximum value | 100 | | target | Number | Target value | Required | | ranges | Array | Array of range objects with min, max, and color | Required | | barColor | String | Color of the value bar | 'fill-blue-600' | | targetColor | String | Color of the target line | 'fill-red-600' | | orientation | String | 'horizontal' or 'vertical' | 'horizontal' | | animated | Boolean | Whether to animate the chart | false |

Treemap Props

| Prop | Type | Description | Default | |------|------|-------------|---------| | data | Array | Array of objects with id, label, value, and color | Required | | title | String | Chart title | '' | | width | Number | Width of the chart in pixels | 600 | | height | Number | Height of the chart in pixels | 400 | | padding | Number | Padding between tiles | 2 | | borderWidth | Number | Width of tile borders | 1 | | borderColor | String | Color of tile borders | 'stroke-gray-300' | | showTooltip | Boolean | Whether to show tooltips on hover | true | | valueFormat | Function | Function to format values in tooltip | (v) => v |

Data Formats

BoxChart & PieChart Data Format

[
  { 
    label: String,  // Name/label for the segment
    value: Number,  // Value determining the size
    color: String   // CSS color code
  },
  // ...
]

AreaChart Data Format

[
  {
    x: String | Number,  // X-axis value (often a date or category)
    y: Number            // Y-axis value
  },
  // ...
]

BulletChart Ranges Format

[
  {
    min: Number,    // Minimum value of the range
    max: Number,    // Maximum value of the range
    color: String   // CSS fill color class (Tailwind compatible)
  },
  // ...
]

Treemap Data Format

[
  {
    id: String,     // Unique identifier
    label: String,  // Display label
    value: Number,  // Value determining size
    color: String   // CSS fill color class (Tailwind compatible)
  },
  // ...
]

Complete Example

import { BoxChart } from "./BoxChart"
import { PieChart } from "./PieChart"
import { AreaChart } from './AreaChart';
import { BulletChart } from './BulletChart';
import { Treemap } from './Treemap';

function App() {
  const pieData = [
    { label: 'Product A', value: 30, color: '#6366f1' },
    { label: 'Product B', value: 25, color: '#ec4899' },
    { label: 'Product C', value: 20, color: '#14b8a6' },
    { label: 'Product D', value: 15, color: '#f59e0b' },
  ];

  const sampleData = [
    { x: 'Jan', y: 10 },
    { x: 'Feb', y: 25 },
    { x: 'Mar', y: 15 },
    { x: 'Apr', y: 30 },
    { x: 'May', y: 22 },
    { x: 'Jun', y: 40 },
    { x: 'Jul', y: 35 },
  ];

  return (
    <>
      <BoxChart data={pieData} />
      <PieChart data={pieData} />
      <AreaChart data={sampleData} />
      
      <BulletChart
        title="Revenue 2025"
        subtitle="$ in thousands"
        value={85}
        min={0}
        max={100}
        target={90}
        ranges={[
          { min: 0, max: 50, color: 'fill-red-200' },
          { min: 50, max: 75, color: 'fill-yellow-200' },
          { min: 75, max: 100, color: 'fill-green-200' }
        ]}
        barColor="fill-blue-600"
        targetColor="fill-red-600"
        orientation="horizontal"
        animated={true}
      />

      <Treemap 
        data={[
          { id: 'complete', label: 'Completed', value: 68, color: 'fill-green-500' },
          { id: 'progress', label: 'In Progress', value: 17, color: 'fill-yellow-500' },
          { id: 'blocked', label: 'Blocked', value: 8, color: 'fill-red-500' },
          { id: 'backlog', label: 'Backlog', value: 42, color: 'fill-blue-500' },
          { id: 'planning', label: 'Planning', value: 15, color: 'fill-purple-500' }
        ]}
        valueFormat={(value) => `${value} tasks`}
        title="Project Status"
        padding={3}
        borderWidth={2}
        borderColor="stroke-gray-700"
        showTooltip={true}
      />
    </>
  )
}

License

MIT