Cl React Graphs

import {
  BarChart,
  DeepPartial,
  EChartDirection,
  EGroupedBarLayout,
  ELabelOrientation,
  Axes,
  BarChartData,
  GridProps,
  SVGLineStyle,
  useWidth,
} from 'cl-react-graph;


export const axis: DeepPartial<Axes> = {
  x: {
    scale: 'linear',
    numberFormat: '.2s',
    labelOrientation: ELabelOrientation.HORIZONTAL,
  },
  y: {
    numberFormat: '.2s',
    labelOrientation: ELabelOrientation.HORIZONTAL,
  },
};

const data: BarChartData = {
  bins: ['Female', 'Male', 'Other'],
  counts: [
    {
      data: [58483, 52400, 13300],
      label: 'Baseline',
    },
    {
      data: [54932, 34230, 10000],
      label: 'Filtered',
    },
  ]
};

export const lineStyle: SVGLineStyle = {
  'fill': '#000',
  'opacity': 1,
  'shapeRendering': 'auto',
  'stroke': '#000',
  'strokeOpacity': 1,
  'strokeWidth': 1,
  'visible': 'true',
};

const grid: GridProps = {
  x: {
    height: 1,
    style: {
      ...lineStyle,
      'fill': 'none',
      'stroke': '#bbb',
      'strokeOpacity': 0.7,
      'strokeWidth': 1,
    },
    ticks: 5,
    visible: true,
  },
  y: {
    style: {
      ...lineStyle,
      'fill': 'none',
      'stroke': '#bbb',
      'strokeOpacity': 0.7,
      'strokeWidth': 5,
    },
    ticks: 5,
    visible: true,
  },
};

const MyComponent = () => {
  const [ref, width] = useWidth('90%');

  return (
    <div ref={ref}>
      <BarChart
        animation={{
          duration: 800,
        }}
        showLabels={[false, true]}
        direction={EChartDirection.HORIZONTAL}
        bars={{radius: 4}}
        data={data}
        height={400}
        tickValues={[0, 40000, 89200]}
        grid={grid}
        axis={{
          x: {
            labelOrientation: ELabelOrientation.VERTICAL,
            tickSize: 0,
            path: {
              strokeWidth: "1",
              stroke: "#eee",
            },
          },
        }}
        colorScheme={[theme.brightBlue800, theme.green900]}
        groupLayout={EGroupedBarLayout.GROUPED}
        xAxisLabelOrientation={ELabelOrientation.HORIZONTAL}
        width={width} />
    </div>
  )
};