jxnblk / F0
Licence: mit
Stars: ✭ 67
Programming Languages
javascript
184084 projects - #8 most used programming language
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].