# Definitive reference for React component arguments

**Category:** [Growth Charts](https://forum.rcpch.tech/c/rcpch-digital-growth-charts/6)
**Created:** 2026-06-18 07:54 UTC
**Views:** 12
**Replies:** 3
**URL:** https://forum.rcpch.tech/t/definitive-reference-for-react-component-arguments/717

---

## Post #1 by @skelly

Is there a reference that specifies the parameters that can to be passed to the RCPCH React component? We are using embedding it in our (non-React) app.  I can see various demos and examples but I've not found a reference for all the different that are passed to the render function.

---

## Post #2 by @skelly

From #general to #rcpch-digital-growth-charts

---

## Post #3 by @pacharanero

The docs for this have been moved into Storybook, which is available here 
https://live--6732292d6f3624b0036f84b4.chromatic.com/

It should be clearer in the docs that this is where to go (I didn't find it immediately). I'll look into that.

The Storybook files are also in the [React Component repo](https://github.com/rcpch/digital-growth-charts-react-component-library) and can be self-hosted.

---

## Post #4 by @michael.barton

There's also the Typescript interface here: https://github.com/rcpch/digital-growth-charts-react-component-library/blob/cd63db9df48b715a43f500fb1790d5032afd732a/src/RCPCHChart/RCPCHChart.types.ts#L14

```typescript
export interface RCPCHChartProps {
    title: string;
    measurementMethod: 'height' | 'weight' | 'ofc' | 'bmi';
    reference: 'uk-who' | 'turner' | 'trisomy-21' | 'cdc' | 'trisomy-21-aap' | 'who';
    sex: 'male' | 'female';
    measurements: ClientMeasurementObject;
    allowDuplicates?: boolean | undefined;
    midParentalHeightData?: MidParentalHeightObject | undefined;
    enableZoom?: boolean;
    chartType?: 'centile' | 'sds';
    enableExport?: boolean | undefined;
    exportChartCallback(svg?: any): any;
    clinicianFocus?: boolean | undefined | null;
    theme?: 'monochrome' | 'traditional' | 'tanner1' | 'tanner2' | 'tanner3' | 'custom';
    height?: number;
    width?: number;
    logoVariant?: 'top' | 'bottom' | 'legend';
    customThemeStyles?: {
        chartStyle?: ChartStyle;
        axisStyle?: AxisStyle;
        gridlineStyle?: GridlineStyle;
        measurementStyle?: MeasurementStyle;
        centileStyle?: CentileStyle;
        sdsStyle?: SDSStyle;
        referenceStyle?: ReferenceStyle;
    }; // individual styles to override in each theme. If 'custom' theme is selected, 'monochrome' styles are defaulted and styles passed here override them
}
```

---

## Post #5 by @pacharanero

In the new version of the docs site (currently [PR #161](https://github.com/rcpch/digital-growth-charts-documentation/pull/161), which should be mergeable in next few days) I've made improvements/reversions so that it's clearer what the props are:

### Storybook is embedded via iframe
![image|690x429](upload://x3Xyp8wIEDLse4048MUMxAK4GG8.png)

### Props have a dedicated table
![image|690x467](upload://yMcPtvvjDmIxxq4QfxUr30UasBp.png)

Hopefully this will make things better. @skelly thanks for the feedback, always great to improve the docs. Let us know if we can help in any other way!

---


**Canonical:** https://forum.rcpch.tech/t/definitive-reference-for-react-component-arguments/717
**Original content:** https://forum.rcpch.tech/t/definitive-reference-for-react-component-arguments/717