Cl React Graphs

Bars

import {
Bars,
Base,
EChartDirection,
EGroupedBarLayout,
IBarChartData,
useHistogramDomain,
useWidth,
} from 'cl-react-graph;
const data: IBarChartData = {
bins: ['Female', 'Male', 'Other'],
counts: [
{
data: [79200, 52400, 13300],
label: 'Baseline',
},
{
data: [60000, 34230, 10000],
label: 'Filtered',
},
],
};
const MyComponent = () => {
const [ref, width] = useWidth('90%');
const groupLayout = EGroupedBarLayout.GROUPED;
const domain = useHistogramDomain({
groupLayout: groupLayout,
bins: data.bins,
values: data.counts,
tickValues: [],
});
return (
<div ref={ref}>
<Base
width={width}
height={220}>
<BarsComponent
bins={data.bins}
colorScheme={[theme.green900, theme.brightBlue800]}
direction={EChartDirection.HORIZONTAL}
domain={domain}
groupLayout={groupLayout}
height={200}
showLabels={[true, true]}
values={data.counts}
width={width}
/>
</Base>
</div>
)
};