Basic Charts

Consider the following simple Chart:

<Chart
  maxWidth={1024}
  height={100}
  view={[0, 0, 4, 5]}
  isCanvas={false}
  chartStyle={{
    dataBoxFill: 'blue',
    dataBoxThickness: ({ pxWidth }) => pxWidth / 10,
  }}
>
  <XAxis />
  <YAxis />
  <BarVerticalSeries
    data={[
      [1, 3],
      [2, 2],
      [3, 5],
    ]}
  />
</Chart>
<Chart
  maxWidth={1024}
  height={100}
  view={[0, 0, 4, 5]}
  isCanvas={false}
  chartStyle={{
    dataBoxFill: 'blue',
    dataBoxThickness: ({ pxWidth }) => pxWidth / 10,
  }}
>
  <XAxis />
  <YAxis />
  <BarVerticalSeries
    data={[
      [1, 3],
      [2, 2],
      [3, 5],
    ]}
  />
</Chart>

The BarVerticalSeries element renders three data points on a Cartesian plane. The bounds of the plane are denoted by Chart's view prop - irrespective of the actual pixels that are available for rendering the chart.

The code above is editable! Try changing:

the maxWidth prop
the isCanvas prop on the Chart element (use Inspect Element to see the change)
the dataBoxFill color
the function passed to dataBoxThickness (or replace with a static number)

Ready for the next step? Read more about the basics of Hypocube charts:

Core Concepts

The Chart Component