MIT License
WIP
Minimal, composable, fully-fluid SVG charts for React
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
<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.