Example

import { Chart, List, Navigation, NavigationStack, Picker, PointCategoryChart, Script, Text, useState, VStack } from "scripting"

const favoriteFruitsData = [
  { fruit: 'Apple', age: 10, count: 42 },
  { fruit: 'Apple', age: 20, count: 37 },
  { fruit: 'Apple', age: 30, count: 11 },

  { fruit: 'Bananer', age: 10, count: 23 },
  { fruit: 'Bananer', age: 20, count: 58 },
  { fruit: 'Bananer', age: 30, count: 79 },

  { fruit: 'Orange', age: 10, count: 36 },
  { fruit: 'Orange', age: 20, count: 24 },
  { fruit: 'Orange', age: 30, count: 62 },
]

function Example() {
  const [representsDataUsing, setRepresentsDataUsing] = useState<string>('foregroundStyle')
  const options: string[] = [
    'foregroundStyle',
    'symbol',
    'symbolSize'
  ]

  return <NavigationStack>
    <List
      navigationTitle={"PointCategoryChart"}
      navigationBarTitleDisplayMode={"inline"}
    >
      <Picker
        title={"representsDataUsing"}
        value={representsDataUsing}
        onChanged={setRepresentsDataUsing}
        pickerStyle={"menu"}
      >
        {options.map(option =>
          <Text tag={option}>{option}</Text>
        )}
      </Picker>
      <Chart
        frame={{
          height: 300
        }}
      >
        <PointCategoryChart
          representsDataUsing={representsDataUsing as any}
          marks={favoriteFruitsData.map(item => ({
            category: item.fruit,
            x: item.age,
            y: item.count,
          }))}
        />
      </Chart>
    </List>
  </NavigationStack>
}

async function run() {
  await Navigation.present({
    element: <Example />
  })

  Script.exit()
}

run()
Example#

Example
