Skip to content

Recharts

Recharts renders charts from data you pass into a React component.

Visit Recharts

How does a chart fit into the rest of your screen?

Choose the chart type and pass it a set of rows. Label what each axis measures and choose a container size that works on a phone. If a chart depends on its parent’s dimensions, give that parent a usable height and verify the result at the smallest layout.

What do you keep besides the chart?

Recharts is an MIT-licensed React library. Its accessibility layer is on by default from version 3 and adds keyboard and assistive-technology support. Check that the chart explains its units and trend in your screen. Keep the underlying data separately and provide a simple text or table alternative when readers need the exact values.

What should a fictional chart say if only Tuesday has zero sales?

Draw three days of fictional sales with a true zero on Tuesday.

  1. Name the units
    Label the days, sales and how a missing number would look different from zero.
  2. Give the numbers another home
    Sketch a short summary and a table a reader can use without the graphic.