1import { Chart, LineCategoryChart, List, Navigation, NavigationStack, Script, Section, Toggle, useState } from "scripting"
2
3const data = [
4 { label: "Production", value: 4000, category: "Gizmos" },
5 { label: "Production", value: 5000, category: "Gadgets" },
6 { label: "Production", value: 6000, category: "Widgets" },
7 { label: "Marketing", value: 2000, category: "Gizmos" },
8 { label: "Marketing", value: 1000, category: "Gadgets" },
9 { label: "Marketing", value: 5000.9, category: "Widgets" },
10 { label: "Finance", value: 2000.5, category: "Gizmos" },
11 { label: "Finance", value: 3000, category: "Gadgets" },
12 { label: "Finance", value: 5000, category: "Widgets" },
13]
14
15function Example() {
16 const [labelOnYAxis, setLabelOnYAxis] = useState(false)
17
18 return <NavigationStack>
19 <List
20 navigationTitle={"LineCategoryChart"}
21 navigationBarTitleDisplayMode={"inline"}
22 >
23 <Section>
24 <Toggle
25 title={"labelOnYAxis"}
26 value={labelOnYAxis}
27 onChanged={setLabelOnYAxis}
28 />
29 </Section>
30 <Chart
31 frame={{
32 height: 300
33 }}
34 >
35 <LineCategoryChart
36 labelOnYAxis={labelOnYAxis}
37 marks={data}
38 />
39 </Chart>
40 </List>
41 </NavigationStack>
42}
43
44async function run() {
45 await Navigation.present({
46 element: <Example />
47 })
48
49 Script.exit()
50}
51
52run()
