WIP
Minimal, composable, fully-fluid SVG charts for React
npm i -S f0import 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- 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
<Line
data={data}
/><Line
data={data}
color='tomato'
strokeWidth={2}
dots
/><Area
data={data}
/><Area
data={data}
color='tomato'
opacity={1/2}
/><Bar
data={data}
/><Bar
data={data}
color='tomato'
/><Svg>
<Bar data={a} />
<Line data={b} />
</Svg><Chart>
<Line data={data} />
<Axis
labels={[
'Mon',
'Tue',
'Wed',
'Thu',
'Fri'
]}
/>
</Chart><Svg>
<Rules y={5} />
<Line data={data} />
</Svg><Chart>
<Line data={data} />
<Axis
labels={[
'Mon',
'Tue',
'Wed',
'Thu',
'Fri'
]}
/>
<Axis
y
labels={[
32,
16,
0
]}
/>
</Chart><Chart>
<Bar data={data} />
<DataLabels data={data} />
</Chart>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.