MultiLineChart

The <MultiLineChart> component renders a line chart. It makes certain assumptions about how to render the data, as well as what the shape of the data is. In particular:

• It assumes that the main axis (x-axis) is time-based (~ years)
• It assumes that each line belongs to a particular country (~ categories are countries)
• The observation value is available under the property .value (number)
• The date of the observation is available under the property .year (number)
• It uses a special color for specific countries (OECD, EU* etc)

The component is mostly controlled, though it manages some state internally:

• Which observation is hovered
• Tooltip placement

Due to historical reasons, the component is tightly coupled with indicators (hence why you have to supply indicatorId to its props).

Sample