Kubit React Charts

A modern React charting library

Reusable, accessible, and interactive SVG components for data visualization

---

Table of Contents

$3

- Features
- Installation
- Quick Start
- Available Components
- API Reference

$3

- Development Setup
- Project Architecture
- Development Scripts
- Contributing Guidelines
- License

---

For Library Users

> 💡 Cross-platform: Kubit Charts is also available for Android and iOS platforms, enabling consistent chart experiences across all your applications.

Features

Composable: Modular architecture where each chart is composed of specialized elements
Performant: Optimized SVG rendering with React 18
Accessible: WCAG compliant with keyboard navigation support
Customizable: Flexible styling and granular configurations
Responsive: Adaptable to different screen sizes
TypeScript: Fully typed for better developer experience
SSR Ready: Complete Server-Side Rendering support for Next.js, Remix, Gatsby, and more
Error Handling: Advanced centralized error management system with detailed debugging
Production Safe: Built-in logging system that's automatically optimized for production builds
Tested: Complete coverage with Vitest and Testing Library

Installation

$3

``bash
pnpm add @kubit-ui-web/react-charts
`

$3

`bash
npm install @kubit-ui-web/react-charts
`

$3

`bash
yarn add @kubit-ui-web/react-charts
`

$3

This library requires React as a peer dependency:

`bash
npm install react react-dom


or


yarn add react react-dom
`

Compatible versions:

- React: ^18.3.1
- React DOM: ^18.3.1

$3

The library supports granular imports for optimal bundle size:

`typescript
// Import specific charts only
import { BarChart } from '@kubit-ui-web/react-charts/charts/barChart';
import { LineChart } from '@kubit-ui-web/react-charts/charts/lineChart';
// Import specific components only
import { Node } from '@kubit-ui-web/react-charts/components/node';
import { Path } from '@kubit-ui-web/react-charts/components/path';
// Import specific utilities only
import { logger } from '@kubit-ui-web/react-charts/utils/logger';
import { isBrowser } from '@kubit-ui-web/react-charts/utils/ssr';
`

Quick Start

$3

`typescript
// Import complete charts
import { BarChart, LineChart, PieChart } from '@kubit-ui-web/react-charts';
// Import specific components
import { Node, Path, Plot } from '@kubit-ui-web/react-charts/components';
// Import types
import type { BarOrientation, ChartData } from '@kubit-ui-web/react-charts/types';
// Import utilities
import { configureLogger, logger } from '@kubit-ui-web/react-charts/utils';
import { createSVGElement, isBrowser, safeWindow } from '@kubit-ui-web/react-charts/utils';
`

$3

`tsx
import { LineChart } from '@kubit-ui-web/react-charts';
import React from 'react';

const data = [
{ year: '2020', sales: 100, profit: 20 },
{ year: '2021', sales: 150, profit: 35 },
{ year: '2022', sales: 180, profit: 45 },
{ year: '2023', sales: 200, profit: 60 },
];

function MyLineChart() {
return (




$${val}k} />

);
}
`

$3

`tsx
import { BarChart, BarOrientation } from '@kubit-ui-web/react-charts';
import React from 'react';

const data = [
{ category: 'A', value: 30 },
{ category: 'B', value: 45 },
{ category: 'C', value: 25 },
{ category: 'D', value: 60 },
];

function MyBarChart() {
return (
data={data}
pKey="category"
orientation={BarOrientation.VERTICAL}
gapBetweenBars={5}
width="100%"
height="400px"
>
dataKey="value"
dataIdx={0}
barConfig={{
barWidth: 40,
singleConfig: [{ color: '#0078D4', coverage: 100 }],
}}
/>



);
}
`

$3

`tsx
import { LineChart } from '@kubit-ui-web/react-charts';
import type { ChartErrorCollection } from '@kubit-ui-web/react-charts/types';
import React from 'react';

function ChartWithErrorHandling() {
const handleErrors = (errors: ChartErrorCollection) => {
// Centralized error handling
console.warn('Chart errors:', errors);
// Display user-friendly messages or retry logic
};

return (





);
}
`

$3

`tsx
import { LineChart, isBrowser, safeWindow } from '@kubit-ui-web/react-charts';
import React from 'react';

function SSRCompatibleChart() {
// Safe browser API access
const windowWidth = isBrowser() ? safeWindow()?.innerWidth || 800 : 800;

return (



);
}
`

$3

`tsx
import { configureLogger, logger } from '@kubit-ui-web/react-charts';

// Configure logger for development
configureLogger({
enabled: true,
minLevel: 'debug',
prefix: '[MyApp Charts]',
});

// Use logger in your components
function MyComponent() {
logger.info('Chart rendering started');
// Chart implementation
}
`

Available Components

$3

| Component | Description | Use Cases |
| --------------- | ----------------------------- | ----------------------------------- |
| LineChart | Multi-series line chart | Time trends, metric comparisons |
| BarChart | Horizontal/vertical bar chart | Category comparisons, discrete data |
| PieChart | Circular chart with segments | Part-to-whole relationships |

$3

| Component | Description |
| --------------- | ----------------------------- |
| Plot | Base SVG container for charts |
| Path | Customizable SVG path element |
| Node | Interactive points in charts |
| Line | Lines and connectors |
| Bar | Rectangular bars |
| ChartText | Formatted text for labels |

$3

| Hook | Description |
| -------------- | ---------------------------------------- |
| useFocus | Focus state management for accessibility |
| useHover | Hover detection with callbacks |

$3

| Utility | Description |
| ---------------------------- | -------------------------------------------------- |
| logger | Production-safe logging with configurable levels |
| configureLogger | Logger configuration for development/debugging |
| isBrowser | Environment detection for browser vs SSR |
| isServer | Check if running in server-side environment |
| safeWindow | Safe access to window object in SSR environments |
| safeDocument | Safe access to document object in SSR environments |
| createSVGElement | SSR-compatible SVG element creation |
| createErrorAccumulator | Advanced error management for chart components |

API Reference

For detailed API documentation, component props, and advanced examples, please refer to our individual component READMEs:

- BarChart Documentation
- LineChart Documentation
- PieChart Documentation

---

For Contributors & Developers





Development Setup

$3

- Node.js >= 16
- Yarn (recommended) or npm
- Git

$3

1. Clone the repository

`bash
git clone https://github.com/kubit-ui/kubit-react-charts
cd web-ui-charts/app
`

2. Install dependencies

`bash
yarn install
`

3. Start development server
`bash
yarn start
`

This will launch Storybook at http://localhost:6006 where you can interact with all components.

Project Architecture

`
src/
├── charts/ # High-level chart components
│ ├── barChart/ # BarChart and subcomponents
│ ├── lineChart/ # LineChart and subcomponents
│ └── pieChart/ # PieChart and subcomponents
├── components/ # Reusable SVG base components
│ ├── plot/ # Main SVG container
│ ├── path/ # Path elements
│ ├── node/ # Interactive points
│ ├── line/ # Lines and connectors
│ └── ...
├── hooks/ # Custom hooks
├── types/ # TypeScript definitions
├── utils/ # Shared utility functions
└── storybook/ # Storybook configuration and constants
`

$3

Each chart follows a consistent compositional pattern:

`typescript
const LineChart = Object.assign(LineChartStructure, {
Path: LineChartPath,
XAxis: LineChartXAxis,
YAxis: LineChartYAxis,
Separator: LineChartSeparator,
});
`

This pattern enables:

- Flexibility: Use only the components you need
- Reusability: Shared components between different charts
- Extensibility: Easy addition of new subcomponents

Development Scripts

$3

`bash


Start Storybook in development mode

pnpm start

Build library for production

pnpm dist

Run tests with coverage

pnpm test

Lint code with ESLint

pnpm eslint

Format code

pnpm prettier

Build Storybook for production

pnpm build

Changeset commands (for maintainers)

pnpm changeset # Create a changeset manually
pnpm changeset:version # Version packages
pnpm changeset:publish # Publish to NPM
pnpm changeset:status # Check changeset status

Run accessibility tests

yarn storybook:axe
`

$3

`bash


Complete build (ESM + CJS)

yarn dist

Build in watch mode

yarn dist:watch

CommonJS only

yarn dist:cjs

ES Modules only

yarn dist:esm
`

$3

`bash


Unit tests with UI

yarn vitest-report

Storybook tests

yarn test-storybook

ESLint only

yarn eslint --fix
``

Contributing

$3

- TypeScript: Fully typed code
- ESLint: Strict configuration with Kubit rules
- Prettier: Automatic code formatting
- Testing: Minimum 80% coverage

$3

See our CONTRIBUTING for coding conventions, commit message guidelines, and pull request processes.

$3

Please refer to our development instructions for detailed guidelines on:

- Component structure and patterns
- Naming conventions
- TypeScript usage
- Error handling
- CSS and styling
- Accessibility requirements

License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

---

Made with ❤️ by the Kubit team