This repository contains the code for NHS.UK Chart components

These chart components are designed for visualizing Body Mass Index (BMI), Child Body Mass Index (CBMI) and Blood Pressure (BP) data.

Initially, these charts were integrated into separate codebases for each of the individual tools. To support consistency and reusability across NHS projects, we have migrated these chart components into a dedicated library.

The Bar Slider chart is a generic chart component that can be used to visualize a variety of data. It is part of the NHS.UK Chart component library and can be customized to fit specific needs.

<BarSliderChart
  config={mockBarSliderConfigExample2}
  value={35.7}
  markerText="Your Result:"
/>

The Body Mass Index (BMI) chart component can be used to visualise body mass index data.

<BmiChart classificationBounds={classificationBounds} bmi={19.4} />

The Child Body Mass Index (CBMI) chart component can be used to visualise the centile score.

<ChildBmiChart
  classificationBounds={classificationBounds}
  centile={{ value: 1, label: 'Below 2' }}
  markerText="The centile:"
/>

The Blood Pressure (BP) chart component can be used to visualise systolic and diastolic blood pressure readings.

<BpChart
  bounds={bounds}
  reading={{ systolic: 120, diastolic: 80 }}
  graphLayout={graphLayoutProp}
/>

A storybook instance for the components can be found in https://tools-graph-components.nhswebsite-dev.nhs.uk/?path=/docs/welcome--docs

Ensure you have Node.js 20.x.x. installed. Usage of NVM is recommended, to allow for easily switching between versions on different projects.

npm install will install dependencies.

npm run build will build the project.

npm run storybook will build and deploy the storybook locally in http://localhost:6006/

Before using the components, import the compiled CSS file from your project's build directory:

@import 'node_modules/nhsuk-tools-chart-components-react/dist/esm/bundle.css';