A React chart library for visualizing Arranger aggregation.
npm install @overture-stack/arranger-chartsA React chart library for visualizing Arranger aggregation.
``bash`
npm i @overture-stack/arranger-charts
Wrap a charts in required providers: ArrangerDataProvider,ChartsProvider and ChartsThemeProvider.
Chart component is responsive to parent containers dimensions.
`jsx
import { ChartsProvider, ChartsThemeProvider, BarChart, SunburstChart } from '@overture-stack/arranger-charts';
function App() {
return (
maxBars={10}
handlers={{ onClick: (data) => console.log(data) }}
/>
);
}
`
Arranger Charts requires an ArrangerDataProvider from @overture-stack/arranger-components as a parent component to handle data fetching and SQON state management.
The main provider that manages chart registration, data fetching, and coordinates multiple charts.
Props:
- debugMode (boolean): Enable verbose logging for developmentloadingDelay
- (number): Delay network results by milliseconds
Provides theme configuration and custom components to all child charts. You can nest multiple
Props:
- colors (string[]): Array of hex colors for chart themingcomponents
- : Custom fallback componentsLoader
- : Custom loading componentErrorData
- : Custom error componentEmptyData
- : Custom empty state component
`jsx`
components={{
Loader: CustomSpinner,
ErrorData: CustomError,
EmptyData: NoDataMessage,
}}
>
{/ Charts /}
Renders horizontal bar charts for aggregation data.
Props:
- fieldName (string, required): GraphQL field name to visualizemaxBars
- (number, required): Maximum number of bars to displayranges
- (Range[]): For numeric fields, specify value rangeshandlers
- : Event handlersonClick
- : Callback when clicking a bar segmenttheme
- : Chart configurationsortByKey
- : Array of keys to define custom sort order. Important to account for all values['Male', 'Female', '__missing__']
e.g.,
`jsx`
maxBars={15}
theme={{
sortByKey: ['Brain', 'Lung', 'Breast', '__missing__'],
}}
handlers={{
onClick: (data) => {
console.log('Clicked', data.label, data.value);
},
}}
/>
Creates sunburst chart showing relationships between broad and specific categories.
Props:
- fieldName (string, required): GraphQL field name to visualizemaxSegments
- (number, required): Maximum number of segments to displaymapper
- (function, required): Maps outer ring values to inner ring categorieshandlers
- : Event handlersonClick
- : Callback when clicking a segmenttheme
- : Chart configuration options
`jsx`
maxSegments={12}
mapper={(diagnosisCode) => {
// Map specific diagnosis codes to broader categories
if (diagnosisCode.startsWith('C78')) return 'Metastatic';
if (diagnosisCode.startsWith('C50')) return 'Breast Cancer';
return 'Other';
}}
handlers={{
onClick: (data) => {
console.log('Selected category:', data);
},
}}
/>
Charts automatically detect field types from Arranger's extended mapping:
- Aggregations: Categorical fields
- NumericAggregations: Numeric fields that require range specifications
For numeric fields, provide ranges:
`jsx`
ranges={[
{ key: '0-18', from: 0, to: 18 },
{ key: '19-65', from: 19, to: 65 },
{ key: '65+', from: 65 },
]}
maxBars={10}
/>
`bashInstall dependencies
npm install
To ensure all code is using the same Arranger contexts, also
npm i to the the consumer projects @overture-stack/arranger-components dependency.`bash
npm i
`From consumer project:
`bash
npm i
`$3
Enable verbose logging by setting the
debugMode prop on ChartsProvider`.