f0

WIP

Minimal, composable, fully-fluid SVG charts for React

Getting Started

npm i -S f0

import React from 'react'
import { Line, Bars } from 'f0'

const App = () => {
  const a = [
    4, 8, 16, 32, 64
  ]

  const b = [
    8, 2, 32, 16, 4
  ]

  return (
    <div>
      <Bars data={a} />
      <Line data={b} />
    </div>
  )
}

export default App

Features

• Fully fluid charts with fixed heights
• Uses HTML for labels to prevent scaling issues
• Bare bones API - only accepts flat arrays as data
• Low-level access to components for composition

Components

Line

<Line
  data={data}
/>

<Line
  data={data}
  color='tomato'
  strokeWidth={2}
  dots
/>

Area

<Area
  data={data}
/>

<Area
  data={data}
  color='tomato'
  opacity={1/2}
/>

Bar

<Bar
  data={data}
  />

<Bar
  data={data}
  color='tomato'
  />

Svg

<Svg>
  <Bar data={a} />
  <Line data={b} />
</Svg>

Chart

<Chart>
  <Line data={data} />
  <Axis
    labels={[
      'Mon',
      'Tue',
      'Wed',
      'Thu',
      'Fri'
    ]}
  />
</Chart>

Rules

<Svg>
  <Rules y={5} />
  <Line data={data} />
</Svg>

Axis

<Chart>
  <Line data={data} />
  <Axis
    labels={[
      'Mon',
      'Tue',
      'Wed',
      'Thu',
      'Fri'
    ]}
  />
  <Axis
    y
    labels={[
      32,
      16,
      0
    ]}
  />
</Chart>

DataLabels

<Chart>
  <Bar data={data} />
  <DataLabels data={data} />
</Chart>

Browser Support

Currently does not work in IE

The fluid style for these charts relies on SVG 1.2 vector-effect non-scaling-stroke. Modern evergreen browsers should support this feature, but charts may appear distorted in older browsers, including IE and Edge.

MIT License