react-native-gifted-charts

When configuring the scales for the X or Y axis, you must maintain a specific mathematical relationship between the maximum value, the number of sections, and the step value to avoid rendering errors.

For the Y axis: You must use maxY, yNoOfSections, and yStepValue together following this formula: maxY = yNoOfSections * yStepValue

For the X axis: You must use maxX, xNoOfSections, and xStepValue together following this formula: maxX = xNoOfSections * xStepValue

Using only one or two of these properties without the third may produce incorrect or absurd chart results.

The <LineChartBicolor> component is used to render Line or Area charts that require different colors for values above and below the X-axis (e.g., green for positive values and red for negative values).

Limitations:

• Curved lines are not supported.
• Only a single data set can be rendered (multiple lines are not supported).

Supported Features:

• Most props from <LineChart> are supported, including areaChart and isAnimated.
• Props related to multiple data sets (e.g., data2, data3, color2, color3) or line curvature (curved) are not supported.

When configuring the Y-axis scale, you must ensure that maxValue, noOfSections, and stepValue follow this mathematical relationship to avoid rendering errors:

maxValue = noOfSections * stepValue

Important: You should provide all three props together. Providing only one or two of these values may result in incorrect or absurd chart scaling.

The <BarChart> component is built using a wrapper pattern. The core logic resides in BarChart/index.ts, which prepares the specific chart content (such as bars or stacked bars) and passes it to a shared component called <BarAndLineChartsWrapper>.

<BarAndLineChartsWrapper> is a common component used across all Bar and Line chart types. Its responsibility is to layer common chart elements over the specific chart content, including:

• X and Y axes
• Background elements
• Rules (grid lines)

To render the specific chart type, the wrapper uses a prop named renderChartContent which receives the actual chart rendering logic.

While you can provide multiple data sets using individual props like data, data2, data3, data4, and data5, the recommended way to handle a dynamic number of lines is to use the dataSet prop.

dataSet accepts an Array<DataSet>, allowing you to pass an arbitrary number of data sets to the chart.

In multi-line charts, standard line onPress events only work for the last rendered line because the <Svg> components are stacked. To enable interaction for all data points across all lines, the library renders data points separately on top of the line stack.

Behavior for Animated Charts: To ensure a good UI experience, data points are handled differently depending on whether the chart is animated:

• Non-animated charts: Data points are rendered separately after all lines are drawn to ensure they are on top and interactive.
• Animated charts: Data points are rendered along with the lines/curves by default. If you want the data points to appear only after the animation finishes, set the renderDataPointsAfterAnimationEnds prop to true.

The <LineChart> component is built using a wrapper pattern. The core logic resides in LineChart/index.ts, which prepares the chart content and passes it to a shared component called <BarAndLineChartsWrapper>.

Key Components

• <LineChart>: Prepares the specific chart content (lines or curves) and provides the renderChartContent prop.
• <BarAndLineChartsWrapper>: A common component used for all Bar and Line charts. It handles common elements such as X and Y axes, backgrounds, and rules. It accepts the renderChartContent prop to render the actual data visualization.

Rendering Order

Rendering follows a top-to-bottom execution order, meaning elements called later are rendered on top of elements called earlier:

1. renderHorizSections (called first)
2. renderChartContent (the actual chart content)
3. renderLabel (called last, appearing on the top layer)

Gifted-charts uses a hybrid rendering approach, combining native UI elements with SVG. This allows the library to leverage seamless native animations and interactions while using SVG for the actual chart rendering.

To support both React Native (mobile) and ReactJS (web), the library's mathematical logic and type definitions are abstracted into a separate package called gifted-charts-core. This ensures that the core logic remains consistent across different environments, while react-native-gifted-charts handles the mobile-specific rendering.

There are four ways to apply different colors to a single line, depending on whether you want the change to be discrete or continuous, and whether it is based on data values or data indices:

1. colors prop: Applies different colors to parts of the line based on Y-axis values. The color change is discrete and occurs in the vertical direction.
2. lineGradientComponent prop: Applies a smooth color gradient. The change is continuous and can be vertical or horizontal.
3. lineSegments prop: Changes color and other properties (thickness, etc.) between specific data indices. The change is discrete and occurs in the horizontal direction.
4. highlightedRange prop: Changes color and other properties for a part of the line lying between specific Y-axis values. The change is discrete and occurs in the vertical direction.

In multi-line scenarios (using dataSet, data2, data3, etc.), the default behavior is to focus all data points at the same index simultaneously. This means all vertically aligned points across different lines will focus at once.

To change this behavior:

• Focus all lines at once (Default): Set focusTogether={true} (or omit the prop).
• Focus only one specific point: Set focusTogether={false}. This allows you to focus a single data point on a single line without affecting the others at that same index.