React fishbone (Ishikawa) diagram component.
npm i @hophiphip/react-fishbone
Import the component
import Fishbone from '@hophiphip/react-fishbone';
Component usage example
<Fishbone
items={{
"name": "Flaws",
"children": [
{
"name": "Machines",
"children": [
{"name": "Speed"},
{"name": "Bits"},
{"name": "Sockets"}
]
}
]
}}
wrapperStyle={{
width: 1000,
height: 500,
}}
/>
Fishbone diagram node.
Property | Type | Description |
---|---|---|
name | string |
Text content |
children | FishboneNode[], undefined |
Nested children |
Fishbone line/link parameters for specific level of nesting
Property | Type | Description |
---|---|---|
color | string |
Line color |
strokeWidthPx | number |
Line width in px |
Fishbone node parameters for specific level of nesting
Property | Type | Description |
---|---|---|
color | string |
Text color |
fontSizeEm | number |
Text size in em |
Fishbone component props.
Property | Type | Description |
---|---|---|
width | string , number , undefined |
Component width |
height | string , number , undefined |
Component height |
items | FishboneNode, undefined |
Component node items |
linesConfig | LineConfig[], undefined |
Component line config for each level of nesting |
nodesConfig | NodeConfig[], undefined |
Component node items for each level of nesting |
wrapperStyle | React.CSSProperties , undefined |
Component wrapper <div /> style |
Building/Running storybook might cause an error
Error: error:0308010C:digital envelope routines::unsupported
That error appears in NodeJS
versions > 16
. Temporary solution is to set NODE_OPTIONS
to --openssl-legacy-provider
cross-env NODE_OPTIONS=--openssl-legacy-provider npm run storybook
cross-env NODE_OPTIONS=--openssl-legacy-provider npm run build-storybook