@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