Skip to content

README.md

Latest commit

 

History

History
170 lines (132 loc) · 4.5 KB

README.md

File metadata and controls

170 lines (132 loc) · 4.5 KB

@ciscode/ui-chart-kit

Typed React chart components (Bar, Line, Area) built on Chart.js.
Pass data and a theme — get a fully configured, responsive chart. No raw Chart.js options required.

Installation

npm install @ciscode/ui-chart-kit

Peer dependencies

Package Version
react ≥ 18
react-dom ≥ 18

chart.js and react-chartjs-2 are bundled — you do not need to install them separately.

Data types

ChartDataPoint

interface ChartDataPoint {
  label: string;
  value: number;
}

ChartDataset

interface ChartDataset {
  id: string;
  label: string;
  data: ChartDataPoint[];
  color?: string; // hex color — falls back to theme.colors when omitted
}

ChartTheme

interface ChartTheme {
  colors: string[]; // palette shared across datasets
  fontFamily?: string;
  fontSize?: number;
  grid?: {
    color?: string;
    display?: boolean;
  };
  tooltip?: {
    enabled?: boolean;
    backgroundColor?: string;
    titleColor?: string;
    bodyColor?: string;
  };
  legend?: {
    display?: boolean;
    position?: 'top' | 'bottom' | 'left' | 'right';
  };
}

Components

BarChart

Prop Type Default Description
data ChartDataset[] — Datasets to render
theme ChartTheme — Theme (colors, fonts, grid, etc.)
height number 300 Chart height in pixels
stacked boolean false Stack bars on top of each other
horizontal boolean false Render horizontal bars 
import { BarChart } from '@ciscode/ui-chart-kit';
import type { ChartDataset, ChartTheme } from '@ciscode/ui-chart-kit';

const theme: ChartTheme = {
  colors: ['#4F46E5', '#10B981', '#F59E0B'],
  fontFamily: 'Inter, sans-serif',
  fontSize: 12,
  grid: { color: '#E5E7EB', display: true },
  tooltip: { enabled: true, backgroundColor: '#1F2937' },
  legend: { display: true, position: 'top' },
};

const datasets: ChartDataset[] = [
  {
    id: 'revenue',
    label: 'Revenue',
    data: [
      { label: 'Q1', value: 120 },
      { label: 'Q2', value: 180 },
      { label: 'Q3', value: 150 },
      { label: 'Q4', value: 210 },
    ],
  },
];

function App() {
  return <BarChart data={datasets} theme={theme} height={400} stacked />;
}

LineChart

Prop Type Default Description
data ChartDataset[] — Datasets to render
theme ChartTheme — Theme (colors, fonts, grid, etc.)
height number 300 Chart height in pixels
smooth boolean false Curved line interpolation (0.4 tension) 
import { LineChart } from '@ciscode/ui-chart-kit';

function App() {
  return <LineChart data={datasets} theme={theme} smooth />;
}

AreaChart

Prop Type Default Description
data ChartDataset[] — Datasets to render
theme ChartTheme — Theme (colors, fonts, grid, etc.)
height number 300 Chart height in pixels
smooth boolean false Curved line interpolation (0.4 tension)
stacked boolean false Stack areas on top of each other

Area fill uses the dataset color at 20 % opacity automatically.

import { AreaChart } from '@ciscode/ui-chart-kit';

function App() {
  return <AreaChart data={datasets} theme={theme} stacked smooth />;
}

Design decisions

  • No Chart.js passthrough. Components expose a curated props API only. Chart.js configuration is built internally via buildChartConfig. This keeps the public surface small and prevents breaking changes when Chart.js internals evolve.
  • Colors cycle. When there are more datasets than theme.colors entries, colors wrap around automatically.
  • Responsive by default. Every chart renders inside a div with width: 100% and the specified height.

License

MIT