Cl React Graphs

Getting Started

Getting started

Common Components

Charts

Axis

An axis must be placed inside a Base component. Axis can be either XAxis or YAxis

XAxis

import {
  BarChart, 
} from 'cl-react-graph;

const MyComponent = () => {
  const [ref, width] = useWidth('90%');
  return(
    <Base
    width={220}
    height={50}>
      <XAxis
        width={200}
        height={20}
        top={0}
        left={20}
        labelOrientation={ELabelOrientation.HORIZONTAL}
        scale="band"
        values={['Female', 'Male', 'Other']} />
    </Base>
  )
};

YAxis

import {
  BarChart, 
} from 'cl-react-graph;

const MyComponent = () => {
  const [ref, width] = useWidth('90%');
  return(
    <Base
      width={220}
      height={50}>
      <YAxis
        width={20}
        height={200}
        top={0}
        left={20}
        labelOrientation={ELabelOrientation.HORIZONTAL}
        scale="band"
        values={data.bins} />
    </Base>
  )
};