@hero-design/rn 8.99.4 → 8.100.0-alpha.0

package/src/components/Chart/Line/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,1461 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LineChart should render 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    onLayout={[Function]}
+    style={
+      [
+        {},
+        [
+          {
+            "height": "100%",
+            "width": "100%",
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {},
+          {
+            "height": 0,
+            "width": 0,
+          },
+        ]
+      }
+    >
+      <View
+        onLayout={[Function]}
+        style={
+          [
+            {},
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "marginBottom": 16,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {},
+              undefined,
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Line Chart
+          </Text>
+        </View>
+        <View
+          style={
+            [
+              {},
+              undefined,
+            ]
+          }
+        >
+          <View
+            accessibilityState={
+              {
+                "disabled": false,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "alignSelf": "flex-start",
+                  "backgroundColor": "transparent",
+                  "borderRadius": 4,
+                  "borderWidth": 0,
+                  "flexDirection": "row",
+                  "height": undefined,
+                  "justifyContent": "center",
+                  "paddingHorizontal": 0,
+                  "paddingVertical": 0,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text
+              allowFontScaling={false}
+              disabled={false}
+              ellipsizeMode="tail"
+              numberOfLines={1}
+              style={
+                [
+                  {
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-SemiBold",
+                    "fontSize": 14,
+                    "letterSpacing": 0.24,
+                    "lineHeight": 22,
+                  },
+                  [
+                    {
+                      "color": "#401960",
+                      "flexShrink": 1,
+                      "lineHeight": 16,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              themeButtonVariant="text-primary"
+              themeIntent="body"
+              themeIsCompact={true}
+              themeIsPressed={false}
+              themeTypeface="neutral"
+              themeVariant="small-bold"
+            >
+              Chart extra
+            </Text>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          [
+            {},
+            {
+              "paddingTop": 8,
+            },
+          ]
+        }
+      >
+        <RNSVGSvgView
+          bbHeight={0}
+          bbWidth={0}
+          focusable={false}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "height": 0,
+                "overflow": "visible",
+                "width": 0,
+              },
+            ]
+          }
+        >
+          <RNSVGGroup
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
+            <RNSVGGroup
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+            >
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  alignItems="center"
+                  style={
+                    [
+                      {
+                        "alignItems": "center",
+                      },
+                      {
+                        "left": 33,
+                        "maxHeight": 32,
+                        "position": "absolute",
+                        "top": -32,
+                        "width": 12.000000000000002,
+                      },
+                    ]
+                  }
+                  testID="x-axis-label-May 2025-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={2}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "center",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  >
+                    May 2025
+                  </Text>
+                </View>
+              </RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  alignItems="center"
+                  style={
+                    [
+                      {
+                        "alignItems": "center",
+                      },
+                      {
+                        "left": 18,
+                        "maxHeight": 32,
+                        "position": "absolute",
+                        "top": -32,
+                        "width": 12.000000000000002,
+                      },
+                    ]
+                  }
+                  testID="x-axis-label-Jun 2025-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={2}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "center",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  >
+                    Jun 2025
+                  </Text>
+                </View>
+              </RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  alignItems="center"
+                  style={
+                    [
+                      {
+                        "alignItems": "center",
+                      },
+                      {
+                        "left": 3,
+                        "maxHeight": 32,
+                        "position": "absolute",
+                        "top": -32,
+                        "width": 12.000000000000002,
+                      },
+                    ]
+                  }
+                  testID="x-axis-label-Jul 2025-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={2}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "center",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  >
+                    Jul 2025
+                  </Text>
+                </View>
+              </RNSVGGroup>
+            </RNSVGGroup>
+            <RNSVGGroup
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+            >
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {},
+                      {
+                        "maxWidth": 32,
+                        "position": "absolute",
+                        "right": -32,
+                        "top": -44,
+                        "transform": [
+                          {
+                            "translateY": -7,
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                  testID="y-axis-label-1-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "right",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  >
+                    $1
+                  </Text>
+                </View>
+              </RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {},
+                      {
+                        "maxWidth": 32,
+                        "position": "absolute",
+                        "right": -32,
+                        "top": -39.6,
+                        "transform": [
+                          {
+                            "translateY": -7,
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                  testID="y-axis-label-1.5-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "right",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  >
+                    $2
+                  </Text>
+                </View>
+              </RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {},
+                      {
+                        "maxWidth": 32,
+                        "position": "absolute",
+                        "right": -32,
+                        "top": -35.2,
+                        "transform": [
+                          {
+                            "translateY": -7,
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                  testID="y-axis-label-2-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "right",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  >
+                    $3
+                  </Text>
+                </View>
+              </RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {},
+                      {
+                        "maxWidth": 32,
+                        "position": "absolute",
+                        "right": -32,
+                        "top": -30.799999999999997,
+                        "transform": [
+                          {
+                            "translateY": -7,
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                  testID="y-axis-label-2.5-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "right",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  />
+                </View>
+              </RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {},
+                      {
+                        "maxWidth": 32,
+                        "position": "absolute",
+                        "right": -32,
+                        "top": -26.4,
+                        "transform": [
+                          {
+                            "translateY": -7,
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                  testID="y-axis-label-3-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "right",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  />
+                </View>
+              </RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {},
+                      {
+                        "maxWidth": 32,
+                        "position": "absolute",
+                        "right": -32,
+                        "top": -22,
+                        "transform": [
+                          {
+                            "translateY": -7,
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                  testID="y-axis-label-3.5-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "right",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  />
+                </View>
+              </RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {},
+                      {
+                        "maxWidth": 32,
+                        "position": "absolute",
+                        "right": -32,
+                        "top": -17.6,
+                        "transform": [
+                          {
+                            "translateY": -7,
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                  testID="y-axis-label-4-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "right",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  />
+                </View>
+              </RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {},
+                      {
+                        "maxWidth": 32,
+                        "position": "absolute",
+                        "right": -32,
+                        "top": -13.200000000000003,
+                        "transform": [
+                          {
+                            "translateY": -7,
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                  testID="y-axis-label-4.5-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "right",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  />
+                </View>
+              </RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {},
+                      {
+                        "maxWidth": 32,
+                        "position": "absolute",
+                        "right": -32,
+                        "top": -8.799999999999997,
+                        "transform": [
+                          {
+                            "translateY": -7,
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                  testID="y-axis-label-5-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "right",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  />
+                </View>
+              </RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {},
+                      {
+                        "maxWidth": 32,
+                        "position": "absolute",
+                        "right": -32,
+                        "top": -4.399999999999999,
+                        "transform": [
+                          {
+                            "translateY": -7,
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                  testID="y-axis-label-5.5-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "right",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  />
+                </View>
+              </RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {},
+                      {
+                        "maxWidth": 32,
+                        "position": "absolute",
+                        "right": -32,
+                        "top": 0,
+                        "transform": [
+                          {
+                            "translateY": -7,
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                  testID="y-axis-label-6-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "right",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  />
+                </View>
+              </RNSVGGroup>
+            </RNSVGGroup>
+            <RNSVGGroup
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+              testID="x-axis-grid"
+            >
+              <RNSVGLine
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeDasharray",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4293454314,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    4,
+                    4,
+                  ]
+                }
+                testID="x-axis-grid-May 2025"
+                x1={39}
+                x2={39}
+                y1={0}
+                y2={-44}
+              />
+              <RNSVGLine
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeDasharray",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4293454314,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    4,
+                    4,
+                  ]
+                }
+                testID="x-axis-grid-Jun 2025"
+                x1={24}
+                x2={24}
+                y1={0}
+                y2={-44}
+              />
+              <RNSVGLine
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeDasharray",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4293454314,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    4,
+                    4,
+                  ]
+                }
+                testID="x-axis-grid-Jul 2025"
+                x1={9}
+                x2={9}
+                y1={0}
+                y2={-44}
+              />
+            </RNSVGGroup>
+            <RNSVGGroup
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+              testID="y-axis-grid"
+            >
+              <RNSVGLine
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeDasharray",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4293454314,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    4,
+                    4,
+                  ]
+                }
+                testID="y-axis-grid-1"
+                x1={48}
+                x2={0}
+                y1={-44}
+                y2={-44}
+              />
+              <RNSVGLine
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeDasharray",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4293454314,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    4,
+                    4,
+                  ]
+                }
+                testID="y-axis-grid-1.5"
+                x1={48}
+                x2={0}
+                y1={-39.6}
+                y2={-39.6}
+              />
+              <RNSVGLine
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeDasharray",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4293454314,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    4,
+                    4,
+                  ]
+                }
+                testID="y-axis-grid-2"
+                x1={48}
+                x2={0}
+                y1={-35.2}
+                y2={-35.2}
+              />
+              <RNSVGLine
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeDasharray",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4293454314,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    4,
+                    4,
+                  ]
+                }
+                testID="y-axis-grid-2.5"
+                x1={48}
+                x2={0}
+                y1={-30.799999999999997}
+                y2={-30.799999999999997}
+              />
+              <RNSVGLine
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeDasharray",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4293454314,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    4,
+                    4,
+                  ]
+                }
+                testID="y-axis-grid-3"
+                x1={48}
+                x2={0}
+                y1={-26.4}
+                y2={-26.4}
+              />
+              <RNSVGLine
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeDasharray",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4293454314,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    4,
+                    4,
+                  ]
+                }
+                testID="y-axis-grid-3.5"
+                x1={48}
+                x2={0}
+                y1={-22}
+                y2={-22}
+              />
+              <RNSVGLine
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeDasharray",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4293454314,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    4,
+                    4,
+                  ]
+                }
+                testID="y-axis-grid-4"
+                x1={48}
+                x2={0}
+                y1={-17.6}
+                y2={-17.6}
+              />
+              <RNSVGLine
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeDasharray",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4293454314,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    4,
+                    4,
+                  ]
+                }
+                testID="y-axis-grid-4.5"
+                x1={48}
+                x2={0}
+                y1={-13.200000000000003}
+                y2={-13.200000000000003}
+              />
+              <RNSVGLine
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeDasharray",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4293454314,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    4,
+                    4,
+                  ]
+                }
+                testID="y-axis-grid-5"
+                x1={48}
+                x2={0}
+                y1={-8.799999999999997}
+                y2={-8.799999999999997}
+              />
+              <RNSVGLine
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeDasharray",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4293454314,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    4,
+                    4,
+                  ]
+                }
+                testID="y-axis-grid-5.5"
+                x1={48}
+                x2={0}
+                y1={-4.399999999999999}
+                y2={-4.399999999999999}
+              />
+              <RNSVGLine
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeDasharray",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4293454314,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    4,
+                    4,
+                  ]
+                }
+                testID="y-axis-grid-6"
+                x1={48}
+                x2={0}
+                y1={0}
+                y2={0}
+              />
+            </RNSVGGroup>
+            <RNSVGPath
+              accessibilityLabel="chart-line-maxValue:6,minValue:1,labelsLength:3"
+              d="M39,-44L36.5,-42.533C34,-41.067,29,-38.133,24,-35.2C19,-32.267,14,-29.333,11.5,-27.867L9,-26.4"
+              fill={null}
+              propList={
+                [
+                  "fill",
+                  "stroke",
+                  "strokeWidth",
+                  "strokeLinecap",
+                  "strokeLinejoin",
+                ]
+              }
+              stroke={
+                {
+                  "payload": 4291005678,
+                  "type": 0,
+                }
+              }
+              strokeLinecap={1}
+              strokeLinejoin={1}
+              strokeWidth={2}
+              testID="line-path"
+            />
+            <RNSVGPath
+              accessibilityLabel="chart-line-maxValue:6,minValue:1,labelsLength:3"
+              d="M39,-17.6L36.5,-16.133C34,-14.667,29,-11.733,24,-8.8C19,-5.867,14,-2.933,11.5,-1.467L9,0"
+              fill={null}
+              propList={
+                [
+                  "fill",
+                  "stroke",
+                  "strokeWidth",
+                  "strokeLinecap",
+                  "strokeLinejoin",
+                ]
+              }
+              stroke={
+                {
+                  "payload": 4280139502,
+                  "type": 0,
+                }
+              }
+              strokeLinecap={1}
+              strokeLinejoin={1}
+              strokeWidth={2}
+              testID="line-path"
+            />
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;