Cl React Graphs

import {
  JoyPlot,
  useWidth,
} from 'cl-react-graph;


const data = [
  {
    'bins': [
      '0, 2500',
      '2500, 5000',
      '5000, 10000'
    ],
    'counts': [
      {
        'label': 'in market for car: No',
        'data': [
          500,
          400,
          4000
        ]
      }
    ],
  },
  {
    'bins': [
      '0, 2500',
      '2500, 5000',
      '5000, 10000'
    ],
    'counts': [
      {
        'label': 'in market for car: Yes',
        'data': [
          300,
          300,
          2800
        ]
      }
    ],
  }
]

const MyComponent = () => {
  const [ref, width] = useWidth('90%');
  return(
    <div ref={ref}>
      <JoyPlot
        data={data}
        xAxisHeight={20}
        colorScheme="hsla(140, 60%, 88%, 1)"
        width={width}
        height={data.length * 150} />
    </div>
  )
};