npm i @datalith/shutter


Simple, batteries included, components to build beautiful data visualizations

by @lucafalasco

0.12.1 (see all)License:MITTypeScript:Built-In
npm i @datalith/shutter


yarn add @datalith/shutter


<Shutter className="shutter" data={data} radiusOuter={100} radiusInner={80} />
classNamestringCustom css classes to apply to the SVG
styleReact.CSSPropertiesCustom style object to apply to the SVG
additionalElementsJSX.ElementOptional elements to add to the SVG
size{ width: number; height: number }Width and Height of the SVG. Default is parent node size.
data*Array<Datum> or Array<string>Array of data
fill(Datum) => string or stringFill color accessor
fillInactive#000stringFill Inactive accessor
fillOpacity(Datum) => number or numberFill Opacity accessor
fillOpacityInactive0.3numberFill Opacity Inactive accessor
fillInactive#000stringFill Inactive accessor
stroke(Datum) => string or stringStroke color accessor
strokeInactivetransparentstringStroke Inactive accessor
strokeOpacity(Datum) => number or numberStroke Opacity accessor
strokeOpacityInactive0.3numberStroke Opacity Inactive accessor
strokeInactivetransparentstringStroke Inactive accessor
center{x: width / 2, y: height / 2}{x: number, y: number}Center of the dataviz
radiusOuter(Math.min(width, height) / 2) * 0.7numberOuter radius
radiusInnerradiusInner * 0.8numberInner radius
tooltip(Datum) => stringReturn HTML or text as a string to show on element mouseover
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

No reviews found
Be the first to rate