Cl React Charts

import {
  Base, 
  Grid,
} from 'cl-react-graph;


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

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>
  )
}