@datalith/shutter

yarn add @datalith/shutter

Docs

<Shutter className="shutter" data={data} radiusOuter={100} radiusInner={80} />

| Name | Default | Type | Description | | :-------------------- | :------------------------------------ | :---------------------------------- | :----------------------------------------------------------- | | className | | string | Custom css classes to apply to the SVG | | style | | React.CSSProperties | Custom style object to apply to the SVG | | additionalElements | | JSX.Element | Optional 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 string | Fill color accessor | | fillInactive | #000 | string | Fill Inactive accessor | | fillOpacity | | (Datum) => number or number | Fill Opacity accessor | | fillOpacityInactive | 0.3 | number | Fill Opacity Inactive accessor | | fillInactive | #000 | string | Fill Inactive accessor | | stroke | | (Datum) => string or string | Stroke color accessor | | strokeInactive | transparent | string | Stroke Inactive accessor | | strokeOpacity | | (Datum) => number or number | Stroke Opacity accessor | | strokeOpacityInactive | 0.3 | number | Stroke Opacity Inactive accessor | | strokeInactive | transparent | string | Stroke Inactive accessor | | center | {x: width / 2, y: height / 2} | {x: number, y: number} | Center of the dataviz | | radiusOuter | (Math.min(width, height) / 2) * 0.7 | number | Outer radius | | radiusInner | radiusInner * 0.8 | number | Inner radius | | tooltip | | (Datum) => string | Return HTML or text as a string to show on element mouseover |