FlexCharts

A flexible chart library for React applications focused on time-based visualizations with advanced customization capabilities.

Installation

npm install @terotests/flex-charts
# or
yarn add @terotests/flex-charts
# or
pnpm add @terotests/flex-charts

Important: CSS Import

FlexCharts requires CSS to be imported for proper styling. You have two options:

Option 1: Import CSS in your main app file (Recommended)

// In your main index.js, App.js, or entry point
import '@terotests/flex-charts/TimeLineChart.css';

Option 2: CSS is automatically imported when you import components

The CSS is automatically imported when you import any FlexCharts components, but you may need to configure your bundler to handle CSS imports from node_modules.

Quick Start

import React from 'react';
import { TimeLineChart, type TimeLineBarData } from '@terotests/flex-charts';

const timelineBars: TimeLineBarData[] = [
  {
    id: 1,
    start: "01/2020",
    end: "12/2022",
    label: "Project Alpha",
    backgroundColor: "#3b82f6",
    textColor: "white",
  },
  {
    id: 2,
    start: "06/2021",
    end: "03/2024",
    label: "Project Beta",
    backgroundColor: "#ef4444",
    textColor: "white",
  },
];

function App() {
  return (
    <TimeLineChart
      startDate="2020"
      endDate="2025"
      interval="Y"
      width="800px"
      labelFontSize="12px"
      bars={timelineBars}
      renderTitle={(time) => `'${time.value.toString().slice(2, 4)}`}
    />
  );
}

export default App;

Features

• 📊 Timeline Charts - Interactive timeline visualizations for project management and data analysis
• 📐 Flexible Layout System - Adaptive wireframe structure with proper data positioning
• 🔄 Smooth Scrolling - Horizontal and vertical scrolling with touch support
• 📏 Configurable Axes - Customizable x and y axis with support for various data types
• 🎨 Theming & Customization - Light/dark mode and custom rendering overrides
• 🚀 Performance Optimization - Virtualization for large datasets and view optimization
• 📱 Responsive Design - Adapt to different screen sizes and orientations
• 🎯 Full TypeScript Support - Complete type definitions for enhanced developer experience

Documentation

For complete documentation, examples, and API reference, visit: https://github.com/terotests/FlexCharts

Demo

View the live demo

License

MIT License. See LICENSE for details.