Skip to content

Using the chart component

Installing the RCPCH Digital Growth Charts React Component

The API and the charting component have been built to work together, but exist separately. The RCPCH Digital Growth Charts APIcalculation endpoint returns centiles and SDS against children's growth measurements in the form of a structured JSON Measurement object. Most users want to chart these.

The RCPCH Digital Growth Charts React Component Library is written in typescript and react and accepts the RCPCH Digital Growth Charts API response as a prop. There is a Storybook and an interactive demonstration.

The RCPCH Digital Growth Charts React Component Library has a list of features for a diverse range of use cases. The charts can be customized to be viewed by families and children, or by clinicians, from health visitors and midwives, to paediatric endocrinology growth specialists.

Currently the RCPCH Digital Growth Charts React Component Library do not support mobile screens. It is likely that chart visualisation will need to be reimagined for the smaller screen. This is on the RCPCH roadmap.

React

The best way to implement the RCPCH Digital Growth Charts React Component Library is to embed it in a react application. The library is hosted on npm and can be added to the dependencies in the package.json of your application. There is a working RCPCH Digital Growth Charts React client which includes a simple data entry form and RCPCH Digital Growth Charts React Component Library implementation which can be used as a starter if required. The client calls the API and passes the response into the RCPCH Digital Growth Charts React Component Library for charting. The code can be found on Github.

The RCPCH Digital Growth Charts React Component Library is written in React 18.2 and will be periodically updated to support later versions of React as they are published.

Versioning

The charts are versioned using the semver system. Documentation is published with each new release, though breaking changes are uncommon. Note users will need to update and rebuild their application as and when new releases are published.

Styling

The charts are deliberately shipped with a monochrome theme. In addition to this RCPCH offer four other themes (Traditional, Tanner 1, Tanner 2, Tanner 3), but custom styles can be applied to the base monochrome theme to alter most aspects of the look and feel. There is extensive documentation in the Storybook docs on which props the charts accept and how to wire the charts up to your React project.

Note that the RCPCH logo and chart version appears by default in the top left hand corner. For implementers who prefer less prominence of the logo, an RCPCH acknowledgement statement can be used instead at the foot of the chart using the logoVariant prop.

What if I can't use React?

It is common in healthcare environments not to be able to use frameworks like React. For this reason RCPCH have published the charts on jsdeliver and unpkg. This allows implementers to import the javascript in the head tag of their page. This gives access to the RCPCHGrowthCharts wrapper which accepts all the props detailed above for instantiating a single chart, as well as the id of the div in the DOM where the charts are to be located, within the render attribute.

<!doctype html>
<html>
    <head>
        <title>Growth Chart Example</title>
        <!-- React dependencies -->
        <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js" defer></script>
        <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" defer></script>
        <!-- RCPCH Growth Charts library with SRI hash for security -->
        <script 
            src="https://cdn.jsdelivr.net/npm/@rcpch/digital-growth-charts-react-component-library@7.3.4/build/umd/rcpch-digital-growth-charts.umd.min.js" 
            integrity="sha384-Te61Ux4WqUzrwMJb8pDAtE92B3sYPlsR31W91KLAA6geskluSC40Z+wT14We0ngF"
            crossorigin="anonymous"
            defer></script><!--note the order of the dependencies: React and React-dom should come first-->
        <script defer>
            document.addEventListener('DOMContentLoaded', function () {
                const demoMeasurements = [ /* RCPCH digital growth charts API response goes here */ ];
                window.RCPCHGrowthCharts.render({
                    targetElementId: 'growth-chart-container',
                    title: 'Demo UK-WHO Growth Chart for Children',
                    measurementMethod: 'height',
                    reference: 'uk-who',
                    sex: 'female',
                    measurements: { height: demoMeasurements },
                    midParentalHeightData: {},
                    enableZoom: false,
                    chartType: 'centile',
                    enableExport: false,
                    clinicianFocus: false,
                    theme: 'tanner3',
                    height: 800,
                    width: 800,
                });
            });
        </script>
    </head>
    <body>
        <div id="growth-chart-container"></div> <!-- The charts will appear here -->
    </body>
</html>

For security reasons you may wish to include the SRI (Subresource Integrity) as above.
This can be found at https://cdn.jsdelivr.net/npm/@rcpch/digital-growth-charts-react-component-library@latest/build/umd/sri-hash.txt