feat: add chart component

android/src/main/java/voltra/generated/ShortNames.kt

@@ -67,6 +67,7 @@ object ShortNames {
             "fvar" to "fontVariant",
             "fw" to "fontWeight",
             "fgs" to "foregroundStyle",
+            "fss" to "foregroundStyleScale",
             "f" to "frame",
             "g" to "gap",
             "gs" to "gaugeStyle",
@@ -83,6 +84,7 @@ object ShortNames {
             "ly" to "layout",
             "lp" to "layoutPriority",
             "l" to "left",
+            "lgv" to "legendVisibility",
             "ls" to "letterSpacing",
             "lh" to "lineHeight",
             "ll" to "lineLimit",
@@ -95,6 +97,7 @@ object ShortNames {
             "mr" to "marginRight",
             "mt" to "marginTop",
             "mv" to "marginVertical",
+            "mrk" to "marks",
             "me" to "maskElement",
             "maxh" to "maxHeight",
             "max" to "maximumValue",
@@ -163,6 +166,10 @@ object ShortNames {
             "valig" to "verticalAlignment",
             "wt" to "weight",
             "w" to "width",
+            "xgs" to "xAxisGridStyle",
+            "xav" to "xAxisVisibility",
+            "ygs" to "yAxisGridStyle",
+            "yav" to "yAxisVisibility",
             "zi" to "zIndex",
         )
 

data/components.json

@@ -149,7 +149,14 @@
     "scaleEffect": "sce",
     "rotationEffect": "re",
     "border": "bd",
-    "clipped": "clip"
+    "clipped": "clip",
+    "foregroundStyleScale": "fss",
+    "legendVisibility": "lgv",
+    "marks": "mrk",
+    "xAxisGridStyle": "xgs",
+    "xAxisVisibility": "xav",
+    "yAxisGridStyle": "ygs",
+    "yAxisVisibility": "yav"
   },
   "styleProperties": [
     "padding",
@@ -1238,6 +1245,56 @@
       "swiftAvailability": "iOS 16.0, macOS 13.0",
       "hasChildren": true,
       "parameters": {}
+    },
+    {
+      "name": "Chart",
+      "description": "SwiftUI Charts component for data visualization",
+      "swiftAvailability": "iOS 16.0, macOS 13.0",
+      "hasChildren": true,
+      "parameters": {
+        "marks": {
+          "type": "array",
+          "optional": true,
+          "jsonEncoded": true,
+          "description": "Compact mark data encoded from children by toJSON"
+        },
+        "xAxisVisibility": {
+          "type": "string",
+          "optional": true,
+          "enum": ["automatic", "visible", "hidden"],
+          "description": "Show or hide the x-axis"
+        },
+        "xAxisGridStyle": {
+          "type": "object",
+          "optional": true,
+          "jsonEncoded": true,
+          "description": "Configure x-axis grid line style"
+        },
+        "yAxisVisibility": {
+          "type": "string",
+          "optional": true,
+          "enum": ["automatic", "visible", "hidden"],
+          "description": "Show or hide the y-axis"
+        },
+        "yAxisGridStyle": {
+          "type": "object",
+          "optional": true,
+          "jsonEncoded": true,
+          "description": "Configure y-axis grid line style"
+        },
+        "legendVisibility": {
+          "type": "string",
+          "optional": true,
+          "enum": ["automatic", "visible", "hidden"],
+          "description": "Show or hide the chart legend"
+        },
+        "foregroundStyleScale": {
+          "type": "object",
+          "optional": true,
+          "jsonEncoded": true,
+          "description": "Map of series name to color string"
+        }
+      }
     }
   ]
 }

example/app/testing-grounds/chart-playground.tsx

@@ -0,0 +1,5 @@
+import ChartPlaygroundScreen from '~/screens/testing-grounds/chart-playground/ChartPlaygroundScreen'
+
+export default function ChartPlaygroundIndex() {
+  return <ChartPlaygroundScreen />
+}

example/screens/testing-grounds/TestingGroundsScreen.tsx

@@ -55,6 +55,13 @@ const TESTING_GROUNDS_SECTIONS = [
       'Interactive playground for experimenting with flex layout properties. Test alignItems, justifyContent, flexDirection, spacing, and padding with live visual feedback.',
     route: '/testing-grounds/flex-playground',
   },
+  {
+    id: 'chart-playground',
+    title: 'Chart Playground',
+    description:
+      'Explore all SwiftUI chart mark types: BarMark, LineMark, AreaMark, PointMark, RuleMark, and SectorMark. Randomize data to see animated transitions.',
+    route: '/testing-grounds/chart-playground',
+  },
   {
     id: 'image-preloading',
     title: 'Image Preloading',