react-nativereact-native-gifted-charts

How to show 2 bar & 2 line with negative values using react-native-gifted-charts


enter image description here

I want to create a graph as same to the above image where we have a group chart connected with the left Y-axis and 2 two-line graphs connected with the right Y-axis, I can achieve this if all the values are positive, but face a challenge where values are negative.

enter image description here

  1. Lines are not aligned with the right Y-axis
  2. The right Y-Axis is not showing values correctly(it is supposed to show 50, 25, 0, -25).

Solution

  • These issues have been fixed in the latest version of react-native-gifted-charts. Here is the github link to your issue- How to create group bar chart with negative values

    The library computes the Y-axis labels based on stepValue, maxValue and yAxisOffset. These props can be set separately for the secondary (right-side) Y-axis using properties inside the secondaryYAxis object.

    You can override the auto-computed Y-axis labels by passing an array of string labels in the yAxisLabelTexts prop.