How the Chart Component Works

Nomenclature

• Child component: components that get passed to the Chart component
  • Area
  • Axis
  • ChartPopover
  • ChartTooltip
  • Bar
  • Legend
  • Line
• Mark component: components that draw data in the chart area
  • Area
  • Bar
  • Line

Painting order

When passing in the child components to Chart, the order of the children only matters for marks (Area, Bar, Line). The order of the marks sets the order that they get added to the visualization. So if you want to display a line that is always on top of a bar, the Bar component should come before the Line component.

<Chart data={data}>
    <Bar />
    <Line />
</Chart>

If you want the line to appear behind the bar, simply flip the order of the children in the Chart component.

<Chart data={data}>
    <Line />
    <Bar />
</Chart>

For non-mark elements like Legend and Axis, order doesn't matter.

<Chart data={data}>
    <Axis position="bottom" />
    <Bar />
</Chart>

... is identical to...

<Chart data={data}>
    <Bar />
    <Axis position="bottom" />
</Chart>