@onelogica/charts — Standardized React Charting Library

A unified, theme-consistent React chart component library wrapping Recharts, Nivo, Chart.js, ECharts, Plotly, and D3.

• Single Dataset Mapping: Provide one canonical data shape and seamlessly switch between any chart variant in a group.
• Unified Design Standards: All rendering engines share the exact same style tokens for fonts, colors, grids, animation, and tooltips.
• Smart Chart Switching: Build dashboards where users can toggle between different visualizations at runtime.
• 50+ Specialized Chart Variants: Support for dumbbell, bullet, swimlane, Gantt, choropleth, radar, Sankey, force-directed graphs, and more.

Installation

pnpm add @onelogica/charts
# or
npm install @onelogica/charts

Note: Ensure react and react-dom (version 18 or 19) are installed in your project.

Quick Start

Import the CSS styles once at the entry point of your application, wrap your tree in ChartThemeProvider, and render a ChartGroup:

import React from "react";
import { ChartThemeProvider, ChartGroup } from "@onelogica/charts";
import "@onelogica/charts/styles.css";

const data = [
  { x: "Jan", revenue: 42000, cost: 31000 },
  { x: "Feb", revenue: 48000, cost: 33000 },
  { x: "Mar", revenue: 51000, cost: 36000 },
];

export default function Dashboard() {
  return (
    <ChartThemeProvider>
      <div style={{ maxWidth: 800, margin: "40px auto" }}>
        <ChartGroup
          group="CARTESIAN_1D"
          data={data}
          title="Revenue Analysis"
          subtitle="Monthly revenue versus operating cost"
          height={350}
          series={[
            { key: "revenue", label: "Revenue" },
            { key: "cost", label: "Cost" }
          ]}
        />
      </div>
    </ChartThemeProvider>
  );
}

Component APIs

1. ChartThemeProvider

Maintains the context for colors, typography, border radii, and transitions.

import { ChartThemeProvider, darkTheme } from "@onelogica/charts";

// Use built-in dark theme
<ChartThemeProvider theme={darkTheme}>
  <App />
</ChartThemeProvider>

// Custom overrides
<ChartThemeProvider
  overrides={{
    font: {
      family: "Geist, sans-serif",
      sizeLabel: 12,
    },
    color: {
      palette: ["#6366f1", "#10b981", "#f59e0b"],
    }
  }}
>
  <App />
</ChartThemeProvider>

Per-chart configuration and native options

Every chart accepts config for portable customization and engineOptions for the complete underlying renderer API.

<ChartGroup
  group="MULTI_SERIES"
  data={data}
  config={{
    colors: ["#7c3aed", "#ec4899"],
    fontSize: 14,
    legend: { show: true, position: "right" },
    grid: { show: false },
  }}
  engineOptions={{
    echarts: { toolbox: { show: true } },
    echartsProps: {
      onEvents: { click: (params) => console.log(params) },
    },
  }}
/>

Native keys include recharts, nivo, echarts, echartsProps, chartjs, chartjsProps, apex, apexProps, plotlyLayout, plotlyConfig, plotlyProps, and map. Native options are applied last.

2. ChartGroup

The layout orchestrator that handles switching between multiple chart variants within a visual category.

| Prop | Type | Description | | :--- | :--- | :--- | | group | ChartGroupName | Category of charts: SCALAR_KPI, CARTESIAN_1D, MULTI_SERIES, PROPORTIONAL, HIERARCHICAL, MULTI_DIMENSIONAL, STATISTICAL_DISTRIBUTION, FLOW_RELATIONAL, GEOSPATIAL, FINANCIAL_TEMPORAL, RANGE_SPAN, TEMPORAL_INTERVALS, MATRIX_CALENDAR | | data | any | Dataset corresponding to the group's input requirements | | title | string | Optional title displayed in header | | subtitle | string | Optional subtitle/description | | height | number | Chart body height (default: 360) | | loading | boolean | Set true to show visual skeleton/spinner | | exportable | boolean | Shows or hides the PNG download button (default: true) | | showSwitcher | boolean | Shows or hides the dropdown selector (default: true) |

3. UniversalChart

If you want to render a specific chart type directly without the interactive switcher dropdown, use UniversalChart:

import { UniversalChart } from "@onelogica/charts";

<UniversalChart
  type="donut"
  data={[
    { name: "SaaS", value: 45 },
    { name: "Services", value: 30 },
    { name: "Hardware", value: 25 },
  ]}
  height={300}
/>

Supported Chart Types by Group

Scalar & KPI (SCALAR_KPI)

• gauge: Speedometer-style dial
• kpi-card: Standalone highlighted key indicator value
• sparkline-card: Micro trendline layout
• linear-progress: Segmented horizontal bars

1D Cartesian (CARTESIAN_1D)

• line / step-line / bar / area / waterfall / lollipop / dot-plot

Multi-Series Cartesian (MULTI_SERIES)

• grouped-bar / stacked-bar / 100-stacked-bar / multi-line / stacked-area / combo-chart / radar

Proportional & Part-to-Whole (PROPORTIONAL)

• pie / donut / half-donut / radial-bar / funnel / pyramid / polar-area / waffle / treemap

Hierarchical Tree Structure (HIERARCHICAL)

• sunburst / circle-packing / icicle / treemap

Multi-Dimensional (MULTI_DIMENSIONAL)

• scatter: Cartesian point coordinates
• bubble: Size-scaled bubble markers
• 3d-scatter: Interactive WebGL 3D coordinate space

Relation & Flow (FLOW_RELATIONAL)

• sankey / alluvial / chord / force-graph

Geospatial (GEOSPATIAL)

• bubble-map / choropleth / connection-map / hexbin-map

Range & Whiskers (RANGE_SPAN)

• dumbbell: Interval dots connected by baseline whiskers
• floating-bar: Stacked range blocks
• bullet: Comparative targets and bars
• error-bar: Explicit error margin intervals

Temporal Intervals (TEMPORAL_INTERVALS)

• gantt / timeline / swimlane

Matrices & Calendars (MATRIX_CALENDAR)

• calendar-heatmap: GitHub-style grid colored by date values
• heatmap-grid: Month-over-day block layout
• correlation-matrix: Diverging coefficient matrix

Formatting Utilities

Exported lightweight string formatters:

import { formatCompact, formatCurrency, formatPercent } from "@onelogica/charts";

formatCompact(1500000); // "1.5M"
formatCurrency(350.5);  // "$350.50"
formatPercent(0.875);   // "87.5%"

License

MIT © anshupal1058