Skip to content

Latest commit

 

History

History
20 lines (11 loc) · 1.19 KB

File metadata and controls

20 lines (11 loc) · 1.19 KB

Line charts architecture

The code for the <LineChart> component is written in the LineChart/index.ts file. This file prepares the chart content and returns it wrapped in a component named <BarAndLineChartsWrapper>
BarAndLineChartsWrapper is a common component for all types of Bar and Line charts. It takes the chart-content (line or curve) and adds to it the common elements like the X and Y axes, the background and rules etc. It accepts a prop named renderChartContent which renders the actual chart.

The architecture of Line chart can be understood with the below image-

'LineChart'

The renderChartContent is defined as a part of the <LineChart> component in the LineChart/index.ts file, while renderHorizSections is defined separately as a part of the BarAndLineChartsWrapper

The rendering takes place from top to bottom. So renderHorizSections is called first and renderLabel is called at last. The element called at last will be renderd on the top of previously called elements.

Go through the below files to understand how the major features have been implemented-

  1. Multi Line
  2. Focusing