dynamic-chart-components

A dynamic and customizable chart component library built with React and TypeScript.

🌐 Live Demo

Try the interactive UI:

https://rushabhai.github.io/dynamic-chart-components/

Features

• Dynamic Chart Rendering: Easily render different types of charts with customizable data and options.
• Chart Editor: Edit chart configurations on the fly for rapid prototyping and visualization.
• Code Generator: Generate code snippets for your configured charts to integrate elsewhere.
• Theme Toggle: Switch between light and dark themes for better accessibility and user experience.
• Type Safety: Built with TypeScript for robust type checking and developer confidence.

Compatibility

• React 18 and 19 supported
• TypeScript support

Installation

Install the package in your React project:

npm install @whysorush/dynamic-chart-component

Note: You need to have react and react-dom (v18 or v19) installed as peer dependencies.

Usage

1. Import Components

import { Chart, ChartEditor, ThemeProvider } from '@whysorush/dynamic-chart-component';

2. Wrap Your App with ThemeProvider

<ThemeProvider>
  {/* Your app content */}
</ThemeProvider>

3. Render a Chart

<Chart
  type="bar"
  data={[{ label: 'Jan', value: 10 }, { label: 'Feb', value: 20 }]}
  config={{ width: 600, height: 400 }}
  title="My Chart"
  editable={true}
/>

4. Use the Chart Editor

<ChartEditor
  chartType="line"
  data={[{ label: 'Mar', value: 30 }]}
  onChange={handleChartChange}
/>

5. Generate Code for Your Chart

<CodeGenerator
  chartType="pie"
  data={[{ label: 'A', value: 40 }, { label: 'B', value: 60 }]}
  config={{ width: 400, height: 400 }}
/>

6. Toggle Theme

<ThemeToggle />

License

MIT