Charts & Analytics

Recura's data visualization system leverages custom SVG and CSS-based components for high-performance, responsive charting.

Visualization OS

Custom-built performance-first charting architecture.

Zero-Dependency SVGsHSL-BalancedResponsive Viewboards

Rendering

Hardware accelerated CSS animations

Data Handling

Normalized HSL arrays

UX Logic

Dynamic z-index tooltips

Interactive

Real-time state transitions

Chart Primitives

Atomic visualization components for complex dashboards.

Column Chart

Reactive bar visualization with gradient fills and hover tooltip logic.

Jan

Feb

Mar

Apr

May

Jun

<div className="flex items-end justify-center gap-6 h-[300px] sm:h-[400px]">
  {data.map((val) => (
    <div 
      className="w-12 md:w-20 bg-gradient-to-t from-purple-600 to-purple-400 rounded-2xl"
      style={{ height: `${val}%` }}
    />
  ))}
</div>

Line Chart

SVG path visualization with area gradients and interaction nodes.

<svg viewBox="0 0 1000 300" className="w-full h-[200px] sm:h-[400px]">
  <path d={linePath} fill="url(#grad)" />
  <path d={linePath} stroke="#7c3aed" />
</svg>

Pie Chart

Conic-gradient donut visualizer with HSL balancing.

Total100%

<div 
  className="w-48 h-48 rounded-full"
  style={{ background: `conic-gradient(${stops})` }}
/>

KPI Metrics

Numeric performance indicators with trend tracking and state balancing.

Total Volume

$561K

+23.5%

Max Peak

$95K

October 2026

<div className="dashboard-card bg-slate-50 p-6">
  <p className="label">Total Volume</p>
  <h3 className="value">$561K</h3>
</div>

Revenue Overview

The complex controller template for multi-context visualization.

Design Concept

Unified controller for disparate data structures.

Rather than building four separate viewers, the AnalyticsRevenueChart component acts as a higher-order controller, mapping a single HSL dataset to multiple SVG and CSS primitives dynamically.

Responsiveness

Fluid

Live Implementation

This component is exported as @/components/dashboard/analytics/analytics-revenue-chart and is ready to mount with any numeric array.

Revenue Overview

Monthly revenue for 2026

$49,360

Jan

$67,870

Feb

$86,380

Mar

$104,890

Apr

$98,720

May

$74,040

Jun

$111,060

Jul

$104,890

Aug

$80,210

Sept

$117,230

Oct

$104,890

Nov

$92,550

Dec

Revenue Chart Controller interface

TypeScript Ready

// Higher-Order Visualization Architecture
<AnalyticsRevenueChart 
  title="Resource Overview"
  data={monthlyNumericArray} // Array<number> [12]
  type="Column Chart"        // Default view: 'Column', 'Line', 'Pie', 'KPI'
  accentColor="#7c3aed"      // Optional: Custom HSL/HEX primary token
  isInteractive={true}        // Enables tooltips and year switching
/>