Unisys Charts

A highly customizable and flexible React chart library built with pure SVG and the Unisys Design System - no external charting dependencies! Create beautiful, responsive bar charts and line charts with minimal code and maximum customization options.

🚀 Live Demo

Try the interactive playgrounds on CodeSandbox:

Bar Charts

Open Bar Charts Demo →

Line & Area Charts

Open Line Charts Demo →

Pie Charts

Open Pie Charts Demo →

Features

✨ Pure SVG - No external charting library dependencies
📊 11 Chart Types - Bar Charts (6 types) and Line Charts (5 types)
📈 Line Charts - Basic, Multi-Axis, Stepped, Segmented, and Point Style line charts
🔀 8 Interpolation Modes - Linear, monotone, step, basis, cardinal, catmull-rom and more
⭐ 11 Point Styles - Circle, star, triangle, cross, rect, and more
🎨 Unisys Design System - Built with Unisys colors, typography, and accessibility standards
🔧 Highly Customizable - Every aspect of the chart can be customized
📱 Responsive - Charts automatically adapt to all screen sizes including mobile
🎯 TypeScript Support - Full TypeScript support with comprehensive types
⚡ Lightweight - Only React as a peer dependency
🎭 Border Radius - Support for rounded corners on bars
🖱️ Interactive - Click and hover event handlers with cursor-following tooltips
♿ WCAG Accessible - AAA contrast ratios, ARIA labels, keyboard navigation
🎬 Animations - Smooth CSS-based animations
🔤 Unisys Font Family - Professional typography with accessible fallbacks
📉 Fill & Gradients - Area fills with gradient support for line charts
✂️ Segment Styling - Per-segment line styling based on data values

Installation

npm install unisys-barcharts

or

yarn add unisys-barcharts

Note: This library has no external charting dependencies. Only React is required as a peer dependency.

Quick Start

import { BarChart } from 'unisys-barcharts';

function App() {
  return (
    <BarChart
      labels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}
      datasets={[
        {
          label: 'Sales',
          data: [400, 300, 600, 800, 500, 700],
        }
      ]}
      theme="vibrant"
      borderRadius={8}
    />
  );
}

Chart Types

1. Bar Chart (Vertical/Horizontal)

The base bar chart component that supports both vertical and horizontal orientations.

import { BarChart } from 'unisys-barcharts';

// Vertical Bar Chart
<BarChart
  labels={['Jan', 'Feb', 'Mar']}
  datasets={[
    { label: 'Revenue', data: [100, 200, 150] },
    { label: 'Expenses', data: [80, 120, 90] }
  ]}
  orientation="vertical"
  borderRadius={4}
/>

// Horizontal Bar Chart
<BarChart
  labels={['Product A', 'Product B', 'Product C']}
  datasets={[
    { label: 'Sales', data: [150, 200, 180] }
  ]}
  orientation="horizontal"
/>

2. Vertical Bar Chart

A dedicated component for vertical bar charts.

import { VerticalBarChart } from 'unisys-barcharts';

<VerticalBarChart
  labels={['Q1', 'Q2', 'Q3', 'Q4']}
  datasets={[
    { label: 'Revenue', data: [30000, 45000, 42000, 55000] },
    { label: 'Expenses', data: [20000, 25000, 23000, 28000] }
  ]}
  title="Quarterly Performance"
  borderRadius={6}
  theme="corporate"
/>

3. Horizontal Bar Chart

Optimized for comparing values across categories, especially with long category names.

import { HorizontalBarChart } from 'unisys-barcharts';

<HorizontalBarChart
  labels={['United States', 'United Kingdom', 'Germany', 'France', 'Japan']}
  datasets={[
    { label: 'Population (M)', data: [331, 67, 83, 67, 126] }
  ]}
  theme="ocean"
/>

4. Stacked Bar Chart

Shows composition of data with all datasets stacked on top of each other.

import { StackedBarChart } from 'unisys-barcharts';

<StackedBarChart
  labels={['2020', '2021', '2022', '2023']}
  datasets={[
    { label: 'Product A', data: [100, 150, 200, 250] },
    { label: 'Product B', data: [80, 120, 160, 200] },
    { label: 'Product C', data: [60, 90, 140, 180] }
  ]}
  title="Sales by Product"
  theme="vibrant"
/>

5. Stacked Bar Chart with Groups

Multiple stack groups side by side for comparing stacked series.

import { StackedBarChartWithGroups } from 'unisys-barcharts';

<StackedBarChartWithGroups
  labels={['Q1', 'Q2', 'Q3', 'Q4']}
  datasets={[
    { label: '2022 Online', data: [50, 60, 70, 80], stack: 'Stack 0' },
    { label: '2022 Store', data: [30, 40, 35, 45], stack: 'Stack 0' },
    { label: '2023 Online', data: [60, 75, 85, 95], stack: 'Stack 1' },
    { label: '2023 Store', data: [35, 45, 40, 50], stack: 'Stack 1' }
  ]}
  title="Year-over-Year Comparison"
/>

6. Floating Bar Chart

Bars that don't start from zero - specify a range [start, end] for each bar.

import { FloatingBarChart } from 'unisys-barcharts';

// Working hours example
<FloatingBarChart
  labels={['Mon', 'Tue', 'Wed', 'Thu', 'Fri']}
  datasets={[
    { 
      label: 'Working Hours', 
      data: [[9, 17], [8, 16], [10, 18], [9, 17], [8, 15]] 
    }
  ]}
  title="Weekly Schedule"
/>

// Temperature range
<FloatingBarChart
  labels={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
  datasets={[
    { 
      label: 'Temperature °C', 
      data: [[-5, 10], [-3, 12], [2, 18], [8, 22], [12, 28]] 
    }
  ]}
  title="Monthly Temperature Range"
  theme="sunset"
/>

Line Charts

The library includes comprehensive Line Chart components with advanced features for data visualization.

7. Line Chart

The main line chart component with support for multiple datasets, interpolation modes, point styling, fills, and more.

import { LineChart } from 'unisys-barcharts';

<LineChart
  labels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}
  datasets={[
    {
      label: 'Revenue',
      data: [12000, 19000, 15000, 25000, 22000, 30000],
      borderColor: '#007173',
      backgroundColor: 'rgba(0, 113, 115, 0.1)',
      tension: 0.4,
    },
    {
      label: 'Expenses',
      data: [8000, 12000, 10000, 15000, 14000, 18000],
      borderColor: '#00E28B',
      tension: 0.4,
    }
  ]}
  title="Monthly Financial Overview"
  theme="corporate"
/>

Interpolation Modes

Choose from 8 interpolation modes for different curve styles:

import { LineChart } from 'unisys-barcharts';

// Available interpolation modes:
// 'linear' | 'monotone' | 'step' | 'step-before' | 'step-after' | 'basis' | 'cardinal' | 'catmull-rom'

<LineChart
  labels={['A', 'B', 'C', 'D', 'E']}
  datasets={[{ label: 'Smooth Line', data: [10, 25, 15, 30, 20] }]}
  interpolation="monotone"  // Smooth monotonic curve
/>

<LineChart
  labels={['A', 'B', 'C', 'D', 'E']}
  datasets={[{ label: 'Stepped Line', data: [10, 25, 15, 30, 20] }]}
  interpolation="step"  // Step function
/>

<LineChart
  labels={['A', 'B', 'C', 'D', 'E']}
  datasets={[{ label: 'Spline', data: [10, 25, 15, 30, 20] }]}
  interpolation="catmull-rom"  // Catmull-Rom spline
/>

Line Fill Options

Fill the area under the line with solid colors or gradients:

<LineChart
  labels={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
  datasets={[
    {
      label: 'Sales',
      data: [100, 150, 120, 180, 200],
      fill: true,  // Fill to origin (y=0)
      backgroundColor: 'rgba(0, 113, 115, 0.3)',
    }
  ]}
/>

// Fill with gradient
<LineChart
  labels={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
  datasets={[
    {
      label: 'Growth',
      data: [100, 150, 120, 180, 200],
      fill: {
        target: 'origin',
        above: 'rgba(0, 226, 139, 0.5)',
        below: 'rgba(252, 118, 115, 0.5)',
      },
    }
  ]}
/>

8. Multi-Axis Line Chart

Compare datasets with different scales using multiple Y-axes:

import { MultiAxisLineChart } from 'unisys-barcharts';

<MultiAxisLineChart
  labels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}
  datasets={[
    {
      label: 'Revenue ($)',
      data: [12000, 19000, 15000, 25000, 22000, 30000],
      yAxisID: 'revenue',
      borderColor: '#007173',
    },
    {
      label: 'Units Sold',
      data: [120, 190, 150, 250, 220, 300],
      yAxisID: 'units',
      borderColor: '#00E28B',
    }
  ]}
  yAxes={[
    {
      id: 'revenue',
      position: 'left',
      title: { display: true, text: 'Revenue ($)' },
      ticks: { callback: (v) => `$${v.toLocaleString()}` },
    },
    {
      id: 'units',
      position: 'right',
      title: { display: true, text: 'Units' },
    }
  ]}
  title="Revenue vs Units Sold"
/>

9. Stepped Line Chart

Display data as step functions - ideal for showing discrete changes:

import { SteppedLineChart } from 'unisys-barcharts';

// Step modes: 'before' | 'after' | 'middle' | true (same as 'before')

<SteppedLineChart
  labels={['Mon', 'Tue', 'Wed', 'Thu', 'Fri']}
  datasets={[
    {
      label: 'Stock Price',
      data: [150, 155, 152, 160, 158],
    }
  ]}
  stepped="before"  // Step occurs before the point
  title="Daily Stock Price"
  theme="corporate"
/>

// Compare different step modes
<SteppedLineChart
  labels={['1', '2', '3', '4', '5']}
  datasets={[
    { label: 'Before', data: [10, 20, 15, 25, 30], stepped: 'before' },
    { label: 'After', data: [12, 22, 17, 27, 32], stepped: 'after' },
    { label: 'Middle', data: [8, 18, 13, 23, 28], stepped: 'middle' },
  ]}
/>

10. Segmented Line Chart

Apply different styles to individual line segments based on data:

import { SegmentedLineChart } from 'unisys-barcharts';

<SegmentedLineChart
  labels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}
  datasets={[
    {
      label: 'Performance',
      data: [100, 120, 90, 110, 95, 130],
      segmentStyle: (ctx) => {
        // Color based on direction
        if (ctx.p1.value > ctx.p0.value) {
          return { borderColor: '#00E28B' };  // Green for increase
        } else {
          return { borderColor: '#FC7673' };  // Red for decrease
        }
      },
    }
  ]}
  title="Performance Trend"
/>

// Highlight specific segments
<SegmentedLineChart
  labels={['Q1', 'Q2', 'Q3', 'Q4']}
  datasets={[
    {
      label: 'Quarterly Sales',
      data: [200, 180, 250, 300],
      segmentStyle: (ctx) => ({
        borderColor: ctx.p1.value > 200 ? '#007173' : '#999',
        borderWidth: ctx.p1.value > 200 ? 3 : 1,
        borderDash: ctx.p1.value < ctx.p0.value ? [5, 5] : [],
      }),
    }
  ]}
/>

11. Point Style Line Chart

Customize data point appearance with 10+ built-in point styles:

import { PointStyleLineChart, POINT_STYLES } from 'unisys-barcharts';

// Available point styles:
// 'circle' | 'cross' | 'crossRot' | 'dash' | 'line' | 'rect' | 
// 'rectRounded' | 'rectRot' | 'star' | 'triangle' | 'none'

<PointStyleLineChart
  labels={['A', 'B', 'C', 'D', 'E']}
  datasets={[
    {
      label: 'Dataset 1',
      data: [10, 25, 15, 30, 20],
      pointStyle: 'star',
      pointRadius: 8,
      pointBackgroundColor: '#007173',
    },
    {
      label: 'Dataset 2',
      data: [15, 20, 25, 22, 28],
      pointStyle: 'triangle',
      pointRadius: 6,
      pointBackgroundColor: '#00E28B',
    }
  ]}
  title="Custom Point Styles"
/>

// Dynamic point styling per data point
<LineChart
  labels={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
  datasets={[
    {
      label: 'Values',
      data: [10, 25, 15, 30, 20],
      point: {
        radius: (ctx) => ctx.value > 20 ? 10 : 5,
        backgroundColor: (ctx) => ctx.value > 20 ? '#00E28B' : '#007173',
        style: (ctx) => ctx.value > 25 ? 'star' : 'circle',
      },
    }
  ]}
/>

Line Chart Customization Options

Point Configuration

<LineChart
  labels={['A', 'B', 'C', 'D']}
  datasets={[
    {
      label: 'Data',
      data: [10, 20, 15, 25],
      // Point styling
      pointRadius: 6,
      pointBackgroundColor: '#007173',
      pointBorderColor: '#003134',
      pointBorderWidth: 2,
      pointStyle: 'circle',
      // Hover state
      pointHoverRadius: 10,
      pointHoverBackgroundColor: '#00E28B',
      pointHoverBorderColor: '#007173',
      pointHoverBorderWidth: 3,
    }
  ]}
/>

// Hide points but show on hover
<LineChart
  labels={['A', 'B', 'C', 'D']}
  datasets={[
    {
      label: 'Data',
      data: [10, 20, 15, 25],
      pointRadius: 0,
      pointHoverRadius: 6,
    }
  ]}
/>

Line Styling

<LineChart
  labels={['A', 'B', 'C', 'D', 'E']}
  datasets={[
    {
      label: 'Solid Line',
      data: [10, 20, 15, 25, 30],
      borderColor: '#007173',
      borderWidth: 2,
    },
    {
      label: 'Dashed Line',
      data: [15, 25, 20, 30, 35],
      borderColor: '#00E28B',
      borderWidth: 2,
      borderDash: [10, 5],  // dash length, gap length
    },
    {
      label: 'Dotted Line',
      data: [8, 18, 13, 23, 28],
      borderColor: '#FC7673',
      borderWidth: 2,
      borderDash: [2, 4],
    }
  ]}
/>

Handling Missing Data

<LineChart
  labels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}
  datasets={[
    {
      label: 'With Gaps',
      data: [10, 20, null, null, 35, 40],  // null values create gaps
      spanGaps: false,  // Don't connect across gaps
    },
    {
      label: 'Connected',
      data: [15, 25, null, null, 30, 45],
      spanGaps: true,  // Connect across null values
    }
  ]}
/>

Tension (Bezier Curve)

<LineChart
  labels={['A', 'B', 'C', 'D', 'E']}
  datasets={[
    {
      label: 'No Tension',
      data: [10, 25, 15, 30, 20],
      tension: 0,  // Straight lines
    },
    {
      label: 'Medium Tension',
      data: [12, 27, 17, 32, 22],
      tension: 0.3,  // Gentle curves
    },
    {
      label: 'High Tension',
      data: [8, 23, 13, 28, 18],
      tension: 0.5,  // More pronounced curves
    }
  ]}
/>

Line Chart TypeScript Types

import type {
  // Main props
  LineChartProps,
  MultiAxisLineChartProps,
  SteppedLineChartProps,
  
  // Dataset configuration
  LineDatasetConfig,
  
  // Point configuration
  PointConfig,
  PointStyle,
  
  // Line styling
  LineStyleConfig,
  
  // Fill options
  FillConfig,
  
  // Segment styling
  LineSegmentConfig,
  LineSegmentContext,
  
  // Multi-axis
  MultiAxisConfig,
  
  // Interpolation
  InterpolationMode,
} from 'unisys-barcharts';

// Type definitions
type InterpolationMode = 
  | 'linear' 
  | 'monotone' 
  | 'step' 
  | 'step-before' 
  | 'step-after' 
  | 'basis' 
  | 'cardinal' 
  | 'catmull-rom';

type PointStyle = 
  | 'circle' 
  | 'cross' 
  | 'crossRot' 
  | 'dash' 
  | 'line' 
  | 'rect' 
  | 'rectRounded' 
  | 'rectRot' 
  | 'star' 
  | 'triangle' 
  | 'none';

interface LineDatasetConfig {
  label: string;
  data: (number | null)[];
  borderColor?: string;
  backgroundColor?: string;
  borderWidth?: number;
  borderDash?: number[];
  tension?: number;
  fill?: boolean | FillConfig;
  pointRadius?: number;
  pointStyle?: PointStyle;
  pointBackgroundColor?: string;
  pointBorderColor?: string;
  pointBorderWidth?: number;
  pointHoverRadius?: number;
  pointHoverBackgroundColor?: string;
  pointHoverBorderColor?: string;
  showLine?: boolean;
  spanGaps?: boolean;
  stepped?: boolean | 'before' | 'after' | 'middle';
  yAxisID?: string;
  segmentStyle?: (ctx: LineSegmentContext) => LineSegmentConfig;
}

Unisys Design System

This library is built with the Unisys Design System colors and typography:

Color Palette

// Primary Colors
const primary = "#003134";    // Unisys Teal
const secondary = "#007173";  // Secondary Teal
const accent = "#00E28B";     // Bright Green

// Status Colors
const success = "#73EFBF";
const warning = "#FFE085";
const error = "#FC7673";
const info = "#B2FFFF";

// Backgrounds
const bgApp = "#E5EAEB";
const bgHeader = "#E8EDED";
const bgContent = "#F3F6F6";

// Text Colors
const textPrimary = "#003134";
const textSecondary = "#007173";
const textSupporting = "#555555";

Typography

• Font Family: 'Unisys', 'Tomato Grotesk', 'Segoe UI', sans-serif
• Headings: H1 (32px), H2 (28px), H3 (26px), H4 (24px), H5 (22px), H6 (20px)
• Body Text: 16px with 24px line height

Customization

Themes

Choose from 10 built-in themes:

// Available themes
type PresetTheme = 
  | 'default'    // Classic blue palette
  | 'vibrant'    // Bold, energetic colors
  | 'pastel'     // Soft, muted tones
  | 'monochrome' // Grayscale
  | 'dark'       // Dark mode optimized
  | 'ocean'      // Blue/teal palette
  | 'sunset'     // Warm oranges and yellows
  | 'forest'     // Green palette
  | 'candy'      // Pink and purple
  | 'corporate'; // Professional blue

<BarChart
  labels={['A', 'B', 'C']}
  datasets={[{ label: 'Data', data: [10, 20, 30] }]}
  theme="vibrant"
/>

Custom Theme

Create your own theme:

<BarChart
  labels={['A', 'B', 'C']}
  datasets={[{ label: 'Data', data: [10, 20, 30] }]}
  themeConfig={{
    colors: ['#007173', '#00E28B', '#003134'],  // Unisys colors
    fontFamily: "'Unisys', 'Tomato Grotesk', sans-serif",
    fontSize: 14,
    gridColor: 'rgba(0, 49, 52, 0.1)',
    textColor: '#003134',
    backgroundColor: '#ffffff',
    borderRadius: 8,
    tooltipBackground: '#003134',
    tooltipTextColor: '#ffffff',
  }}
/>

Dataset Colors

Customize colors per dataset or per bar:

<BarChart
  labels={['Jan', 'Feb', 'Mar']}
  datasets={[
    {
      label: 'Revenue',
      data: [100, 150, 200],
      backgroundColor: '#007173',
      borderColor: '#003134',
      borderWidth: 2,
      hoverBackgroundColor: '#00E28B',
    },
    {
      label: 'Expenses',
      data: [80, 90, 110],
      backgroundColor: 'rgba(252, 118, 115, 0.7)',
    }
  ]}
/>

// Different color for each bar
<BarChart
  labels={['USA', 'China', 'Germany']}
  datasets={[
    {
      label: 'GDP',
      data: [25, 18, 4],
      backgroundColor: ['#003134', '#007173', '#00E28B'],
    }
  ]}
/>

Border Radius

Apply rounded corners to bars:

// Global border radius for all bars
<BarChart
  labels={['A', 'B', 'C']}
  datasets={[{ label: 'Data', data: [10, 20, 30] }]}
  borderRadius={8}
/>

// Per-dataset border radius
<BarChart
  labels={['A', 'B', 'C']}
  datasets={[
    { label: 'Set 1', data: [10, 20, 30], borderRadius: 4 },
    { label: 'Set 2', data: [15, 25, 35], borderRadius: 12 }
  ]}
/>

// Individual corner radius
<BarChart
  labels={['A', 'B', 'C']}
  datasets={[
    {
      label: 'Data',
      data: [10, 20, 30],
      borderRadius: {
        topLeft: 10,
        topRight: 10,
        bottomLeft: 0,
        bottomRight: 0,
      }
    }
  ]}
/>

Axes Configuration

<BarChart
  labels={['Jan', 'Feb', 'Mar']}
  datasets={[{ label: 'Sales', data: [1000, 2000, 1500] }]}
  xAxis={{
    display: true,
    title: {
      display: true,
      text: 'Month',
      color: '#003134',
      fontSize: 14,
    },
    grid: {
      display: false,
    },
    ticks: {
      color: '#555555',
      fontSize: 11,
    }
  }}
  yAxis={{
    display: true,
    title: {
      display: true,
      text: 'Revenue ($)',
    },
    beginAtZero: true,
    min: 0,
    max: 3000,
    ticks: {
      stepSize: 500,
      callback: (value) => `$${value}`,
    }
  }}
/>

Legend Configuration

<BarChart
  labels={['A', 'B', 'C']}
  datasets={[
    { label: 'Series 1', data: [10, 20, 30] },
    { label: 'Series 2', data: [15, 25, 35] }
  ]}
  legend={{
    display: true,
    position: 'bottom', // 'top' | 'left' | 'right' | 'bottom'
    align: 'center',    // 'start' | 'center' | 'end'
    labels: {
      color: '#003134',
      fontSize: 12,
      padding: 20,
      boxWidth: 12,
      boxHeight: 12,
    },
    onClick: (index, dataset) => {
      console.log('Clicked legend item:', dataset.label);
    }
  }}
/>

Tooltip Configuration

<BarChart
  labels={['A', 'B', 'C']}
  datasets={[{ label: 'Data', data: [10, 20, 30] }]}
  tooltip={{
    enabled: true,
    backgroundColor: '#003134',
    textColor: '#fff',
    fontSize: 12,
    cornerRadius: 8,
    padding: 12,
    formatter: (value, datasetLabel, label) => {
      return `${label}: $${value.toLocaleString()}`;
    }
  }}
/>

Animation Configuration

<BarChart
  labels={['A', 'B', 'C']}
  datasets={[{ label: 'Data', data: [10, 20, 30] }]}
  animation={{
    enabled: true,
    duration: 500,
    easing: 'ease-out',
    delay: 0,
    staggerDelay: 50, // Delay between each bar animation
  }}
/>

// Disable animation
<BarChart
  labels={['A', 'B', 'C']}
  datasets={[{ label: 'Data', data: [10, 20, 30] }]}
  animation={false}
/>

Event Handlers

<BarChart
  labels={['A', 'B', 'C']}
  datasets={[{ label: 'Data', data: [10, 20, 30] }]}
  onBarClick={(event, data) => {
    console.log('Clicked bar:', data);
    // { datasetIndex, dataIndex, value, label, datasetLabel }
  }}
  onBarHover={(event, data) => {
    if (data) {
      console.log('Hovering:', data.label, data.value);
    }
  }}
/>

Sizing

// Fixed size
<BarChart
  labels={['A', 'B', 'C']}
  datasets={[{ label: 'Data', data: [10, 20, 30] }]}
  width={600}
  height={400}
/>

// Responsive width with fixed height
<BarChart
  labels={['A', 'B', 'C']}
  datasets={[{ label: 'Data', data: [10, 20, 30] }]}
  width="100%"
  height={300}
/>

// Custom padding
<BarChart
  labels={['A', 'B', 'C']}
  datasets={[{ label: 'Data', data: [10, 20, 30] }]}
  padding={{ top: 40, right: 30, bottom: 50, left: 60 }}
/>

Bar Spacing

<BarChart
  labels={['A', 'B', 'C']}
  datasets={[
    { label: 'Set 1', data: [10, 20, 30] },
    { label: 'Set 2', data: [15, 25, 35] }
  ]}
  barGap={4}      // Gap between bars in a group (pixels)
  groupGap={0.3}  // Gap between groups (percentage of category width)
/>

TypeScript

Full TypeScript support is included:

import type {
  // Bar chart types
  BarChartProps,
  DatasetConfig,
  ThemeConfig,
  AxisConfig,
  LegendConfig,
  TooltipConfig,
  AnimationConfig,
  PresetTheme,
  BarClickData,
  
  // Line chart types
  LineChartProps,
  MultiAxisLineChartProps,
  SteppedLineChartProps,
  LineDatasetConfig,
  PointConfig,
  PointStyle,
  LineStyleConfig,
  FillConfig,
  LineSegmentConfig,
  LineSegmentContext,
  MultiAxisConfig,
  InterpolationMode,
} from 'unisys-barcharts';

const myDataset: DatasetConfig = {
  label: 'My Data',
  data: [10, 20, 30],
  backgroundColor: '#007173',
};

const myLineDataset: LineDatasetConfig = {
  label: 'My Line Data',
  data: [10, 20, 15, 25, 30],
  borderColor: '#007173',
  tension: 0.4,
  pointStyle: 'circle',
  fill: true,
};

const myTheme: ThemeConfig = {
  colors: ['#007173', '#00E28B'],
  borderRadius: 8,
};

const handleClick = (event: React.MouseEvent, data: BarClickData) => {
  console.log(data.value);
};

Utility Functions

The library exports utility functions for advanced use cases:

import {
  // Color utilities
  getColorPalette,
  getTheme,
  withOpacity,
  lighten,
  darken,
  generateGradient,
  getContrastColor,
  
  // Scale utilities
  calculateScale,
  valueToPosition,
  formatValue,
  
  // SVG utilities
  roundedRectPath,
  topRoundedRadius,
  bottomRoundedRadius,
} from 'unisys-barcharts';

// Example: Get a color palette
const colors = getColorPalette('vibrant');

// Example: Create gradient colors
const gradient = generateGradient('#007173', '#00E28B', 5);

// Example: Adjust opacity
const semiTransparent = withOpacity('#007173', 0.5);

Core Components

For advanced customization, you can use the core SVG components directly:

import {
  // Container and layout
  ChartContainer,
  Axis,
  Legend,
  Tooltip,
  Title,
  
  // Bar chart primitives
  Bar,
  
  // Line chart primitives
  Line,
  Point,
  PointsGroup,
  AreaFill,
  GradientFill,
} from 'unisys-barcharts';

// Build your own custom chart using these primitives

Accessibility

All charts are designed to meet WCAG AAA standards:

Features

• WCAG AAA Contrast Ratios - All text colors have 7:1+ contrast ratio
• ARIA Labels - Descriptive labels for screen readers on all interactive elements
• Role Attributes - Semantic meaning for charts, bars, axes, and legends
• Keyboard Navigation - Legend items are focusable and interactive
• Screen Reader Support - Full descriptive text for data values
• Reduced Motion - Respects prefers-reduced-motion preference
• High Contrast Mode - Adapts to system high contrast settings

<BarChart
  labels={['A', 'B', 'C']}
  datasets={[{ label: 'Data', data: [10, 20, 30] }]}
  ariaLabel="Sales data for Q1 2024 showing growth across three categories"
  id="sales-chart"
/>

Typography

The library uses Unisys font family with accessible fallbacks:

import { UNISYS_FONT_FAMILY, defaultFontFamily } from 'unisys-barcharts';

// Font stack: 'Unisys', 'Tomato Grotesk', 'Segoe UI', sans-serif
console.log(UNISYS_FONT_FAMILY);

// Use in custom theme
const customTheme = {
  fontFamily: UNISYS_FONT_FAMILY,
  textColor: '#003134', // WCAG AAA compliant
};

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Why Pure SVG?

This library uses pure SVG instead of Canvas-based solutions:

• No external dependencies - Only React is required
• Better accessibility - SVG elements are part of the DOM
• CSS animations - Smooth, performant animations using CSS
• Easier customization - Style bars with CSS or inline styles
• Better for SSR - Works out of the box with server-side rendering
• Smaller bundle size - No charting library overhead

License

MIT

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting a PR.

Changelog

1.1.0

• New Line Chart Components:
  • LineChart - Basic line chart with full customization
  • MultiAxisLineChart - Support for multiple Y-axes with different scales
  • SteppedLineChart - Step function visualization
  • SegmentedLineChart - Per-segment styling based on data values
  • PointStyleLineChart - Enhanced point styling showcase
• 8 Interpolation Modes: linear, monotone, step, step-before, step-after, basis, cardinal, catmull-rom
• 11 Point Styles: circle, cross, crossRot, dash, line, rect, rectRounded, rectRot, star, triangle, none
• Area Fills: Fill areas under lines with solid colors or gradients
• Segment Styling: Dynamic line segment colors based on data direction/values
• Gap Handling: Support for null values with optional span gaps
• Line Styling: Dashed lines, tension control, border width customization
• New core components: Line, Point, AreaFill

1.0.0

• Initial release
• 6 chart types: Bar, Vertical, Horizontal, Stacked, Stacked with Groups, Floating
• Pure SVG implementation - no external charting dependencies
• Unisys Design System integration
• 10 preset themes
• Full TypeScript support
• Comprehensive customization options
• Interactive tooltips and legends
• Responsive design
• WCAG AAA accessibility compliance