react-native-d3-chart

Create performant charts with zooming, panning and localization using D3.js in a WebView. Perfect for time-series data visualization with smooth interactions.

Preview

https://github.com/user-attachments/assets/e2a03e9f-a29c-465c-b966-e729e1f6565f

Interactive chart with zoom, pan, and multi-dataset support

Features

• 📊 Multi-dataset support - Display multiple data series on the same chart
• 🔍 Zoom and pan - Interactive zooming and panning with smooth animations
• 🌍 Localization - Built-in support for different locales and custom calendar strings
• 🎨 Customizable styling - Full control over colors, margins, and appearance
• 📱 Cross-platform - Works seamlessly on iOS and Android
• ⚡ High performance - Leverages D3.js for smooth rendering of large datasets
• 🔧 Zero configuration - Assets are automatically bundled during installation

Installation

npm install react-native-d3-chart
# or
yarn add react-native-d3-chart

Note: This library requires react-native-webview. If you don't have it installed:

npm install react-native-webview
# or
yarn add react-native-webview

Quick Start

import React, { useState, useMemo } from 'react';
import { View } from 'react-native';
import Chart from 'react-native-d3-chart';

export default function App() {
  const [width, setWidth] = useState(0);
  const height = width * 0.6; // 16:10 aspect ratio

  // Generate some sample data
  const datasets = useMemo(
    () => [
      {
        measurementName: 'Temperature',
        color: '#e66',
        unit: '°C',
        decimals: 1,
        points: [
          { timestamp: Date.now() - 3600000, value: 22.5 },
          { timestamp: Date.now() - 1800000, value: 23.1 },
          { timestamp: Date.now(), value: 24.3 },
        ],
      },
    ],
    []
  );

  const timeDomain = useMemo(
    () => ({
      type: 'hour',
      start: Date.now() - 3600000, // 1 hour ago
      end: Date.now(),
    }),
    []
  );

  const colors = {
    background: '#fff',
    highlightLine: '#000',
    border: '#555',
    cursorStroke: '#0ff',
    highlightLabel: '#000',
    highlightTime: '#444',
  };

  return (
    <View
      style={{ flex: 1, padding: 20 }}
      onLayout={(e) => setWidth(e.nativeEvent.layout.width - 40)}
    >
      <Chart
        width={width}
        height={height}
        colors={colors}
        datasets={datasets}
        timeDomain={timeDomain}
        noDataString="No data available"
      />
    </View>
  );
}

💡 Want to see more? Check out the complete example app for advanced usage with multiple datasets, time domain switching, and interactive controls.

API Reference

Chart Props

| Prop | Type | Required | Description | | ------------------ | ----------------- | -------- | ---------------------------------------------------------------------------------- | | width | number | ✅ | Chart width in pixels | | height | number | ✅ | Chart height in pixels | | datasets | Dataset[] | ✅ | Array of data series to display | | colors | ChartColors | ✅ | Color configuration for chart elements | | timeDomain | TimeDomain | ✅ | Control intial zoom level / scale of X-axis, doesn't have to fit the whole dataset | | noDataString | string | ✅ | Message to show when no data is available | | zoomEnabled | boolean | ❌ | Enable zoom guesture | | locale | string | ❌ | Locale for date/time formatting (default: 'en') | | marginHorizontal | number | ❌ | Horizontal margin in pixels | | calendarStrings | CalendarStrings | ❌ | Custom calendar strings for localization | | onZoomStarted | () => void | ❌ | Callback when zoom interaction starts | | onZoomEnded | () => void | ❌ | Callback when zoom interaction ends |

Types

Dataset

type Dataset = {
  measurementName: string; // Display name for this data series
  color: string; // Hex color for the line and labels
  points: Point[]; // Array of data points
  unit: string; // Unit symbol (e.g., '°C', 'kg', 'm/s')
  decimals: number; // Number of decimal places to show
  minDeltaY?: number; // Minimum Y-axis change to show, limit Y-zoom
  decimalSeparator?: '.' | ','; // Decimal separator
  domain?: {
    // Custom Y-axis range
    bottom: number;
    top: number;
  };
};

Point

type Point = {
  timestamp: number; // Unix timestamp in milliseconds
  value: number | null; // Data value (null for gaps)
};

TimeDomain

type TimeDomain = {
  type: string; // Domain type (e.g., 'hour', 'day', 'week')
  start: number; // Start timestamp (ms)
  end: number; // End timestamp (ms)
};

ChartColors

type ChartColors = {
  background: string; // Chart background color
  highlightLine: string; // Crosshair line color
  border: string; // Chart border color
  highlightLabel: string; // Value label text color
  highlightTime: string; // Time label text color
  cursorStroke: string; // Cursor/crosshair circle color
};

CalendarStrings

type CalendarStrings = {
  days: string[]; // Full day names (Sunday first)
  shortDays: string[]; // Short day names (Sun first)
  months: string[]; // Full month names (January first)
  shortMonths: string[]; // Short month names (Jan first)
};

Advanced Usage

Multiple Datasets

const datasets = [
  {
    measurementName: 'Temperature',
    color: '#e66',
    unit: '°C',
    decimals: 1,
    points: temperatureData,
  },
  {
    measurementName: 'Humidity',
    color: '#66e',
    unit: '%',
    decimals: 0,
    points: humidityData,
  },
];

Zoom Callbacks

<Chart
  // ... other props
  zoomEnabled
  onZoomStarted={() => console.log('Zoom started')}
  onZoomEnded={() => console.log('Zoom ended')}
/>

Requirements

• React Native >= 0.60
• react-native-webview >= 11.0.0
• iOS 11.0+ / Android API 21+

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library