Basic Charts

Consider the following simple 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: