Chart Library

A lightweight, customizable chart library built with React and Canvas API. This library provides simple and efficient chart components for data visualization.

Features

• 🎨 Customizable: Easy to customize colors, dimensions, and styling
• 📱 Responsive: Built-in responsive design support
• 🚀 Lightweight: No heavy dependencies, pure Canvas API
• 📊 Multiple Chart Types: Line charts, Bar charts (more coming soon)
• 🎯 TypeScript: Full TypeScript support with comprehensive type definitions
• 📖 Storybook: Interactive documentation and examples

Installation

npm install @your-org/chart-library

Quick Start

import React from 'react';
import { LineChart, BarChart } from '@your-org/chart-library';

const App = () => {
  const data = [
    {
      label: 'Sales',
      data: [
        { x: 'Jan', y: 65 },
        { x: 'Feb', y: 59 },
        { x: 'Mar', y: 80 },
        { x: 'Apr', y: 81 },
        { x: 'May', y: 56 },
        { x: 'Jun', y: 55 },
      ],
      borderColor: '#3b82f6',
    },
  ];

  return (
    <div>
      <LineChart 
        data={data} 
        dimensions={{ width: 600, height: 400 }} 
      />
    </div>
  );
};

Chart Types

Line Chart

import { LineChart } from '@your-org/chart-library';

<LineChart
  data={[
    {
      label: 'Temperature',
      data: [
        { x: 'Mon', y: 20 },
        { x: 'Tue', y: 25 },
        { x: 'Wed', y: 30 },
        { x: 'Thu', y: 28 },
        { x: 'Fri', y: 35 },
      ],
      borderColor: '#f59e0b',
      borderWidth: 3,
    },
  ]}
  dimensions={{ width: 600, height: 400 }}
/>

Bar Chart

import { BarChart } from '@your-org/chart-library';

<BarChart
  data={[
    {
      label: 'Revenue',
      data: [
        { x: 'Product A', y: 65 },
        { x: 'Product B', y: 59 },
        { x: 'Product C', y: 80 },
        { x: 'Product D', y: 81 },
      ],
      backgroundColor: '#10b981',
    },
  ]}
  dimensions={{ width: 600, height: 400 }}
/>

API Reference

ChartDataPoint

interface ChartDataPoint {
  x: string | number;
  y: number;
  label?: string;
}

ChartDataset

interface ChartDataset {
  label: string;
  data: ChartDataPoint[];
  color?: string;
  backgroundColor?: string;
  borderColor?: string;
  borderWidth?: number;
}

ChartConfig

interface ChartConfig {
  responsive?: boolean;
  maintainAspectRatio?: boolean;
  animation?: boolean;
  animationDuration?: number;
  plugins?: {
    legend?: {
      display?: boolean;
      position?: 'top' | 'bottom' | 'left' | 'right';
    };
    tooltip?: {
      enabled?: boolean;
    };
  };
}

Development

Running Storybook

npm run storybook

Building the Library

npm run build:lib

Type Checking

npm run type-check

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT © Your Name