GitHub

  • Bare bones API – only accepts flat arrays as data
  • < Chart > < Line data = {data} / > < Axis labels = {[ ' Mon ' , ' Tue ' , ' Wed ' , ' Thu ' , ' Fri ' ]} / > < / Chart >
  • 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
  • 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.

Contribute to f0 development by creating an account on GitHub.

@MicheleBertoli: Minimal, composable, fully-fluid SVG charts for #Reactjs

WIP

Minimal, composable, fully-fluid SVG charts for React

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> ) } export default App

< /Svg>

< /Chart>

< /Svg>

< /Chart>

< /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.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

GitHub