@charliekmcmahon/fishbone-chart

A fishbone (Ishikawa) diagram React component for root cause analysis

Features

• ✅ Full TypeScript support with type definitions
• ✅ React 19 compatible
• ✅ Modern ES6+ codebase
• ✅ Interactive fishbone diagrams for root cause analysis

Attribution

This package is a fork of fishbone-chart originally created by Thiago Ferraz (@thiagoferrax).

This fork has been updated to support React 19, TypeScript, and modernised dependencies.

Original work © Thiago Ferraz, licensed under the MIT Licence.

Install

npm install --save @charliekmcmahon/fishbone-chart

Usage

import FishboneChart from '@charliekmcmahon/fishbone-chart'

function Example() {
  const data = {
    'Bad coffee': {
      'Procedures': ['Too much water', 'Too many grounds', 'Lack of training'],
      'Equipment': ['Dirty cups', 'Coffee not hot enough', 'Dirty basket'],
      'Material': ['Bad sugar', 'Lids do not fit cup', 'Bad cream'],
      'People': ['Wrong fee', 'No training', 'Rude'],
      'Machine': ['Not working', 'Deregulated', 'Dirty']
    },
    'Scrum not working': {
      'Principles': ['Functional software (SW) is not released'],
      'Product Owner (PO)': ['No authority to prioritise', 'Poor interaction with the team'],
      'Sprint': ['SW not released for validation', 'Sprint speed is not measured', 'Team is controlled from outside'],
      'Planning': ['PO does not explain the backlog'],
      'Development Team': ['Members dedicated to specific roles', 'Does not deliver what was promised'],
    },
    'Security Incident': {
      'Technology': ['Weak encryption', 'No technology for remote data destruction'],
      'Process': ['No process for reporting incident'],
      'People': ['Worker lost laptop', 'Distraction was a factor'],
      'Controls': ['Weak password policy', 'No audit trail of the laptop information'],
      'Procedure': ['No procedure for securing laptop at public locations'],
      'Environment': ['No place to secure laptop overnight at workplace']
    }
  }

  return (
    <FishboneChart data={data} />
  )
}

TypeScript Usage

The package includes TypeScript type definitions:

import FishboneChart, { FishboneData } from '@charliekmcmahon/fishbone-chart'

const data: FishboneData = {
  'Bad coffee': {
    'Procedures': ['Too much water', 'Too many grounds', 'Lack of training'],
    'Equipment': ['Dirty cups', 'Coffee not hot enough', 'Dirty basket'],
    'Material': ['Bad sugar', 'Lids do not fit cup', 'Bad cream'],
    'People': ['Wrong fee', 'No training', 'Rude'],
    'Machine': ['Not working', 'Deregulated', 'Dirty']
  }
}

function App() {
  return <FishboneChart data={data} />
}

Licence

MIT © Charlie McMahon

Original work MIT © Thiago Ferraz