1import { Chart, Navigation, NavigationStack, PointChart, RectAreaChart, Script, VStack } from "scripting"
2
3const data = [
4 { x: 5, y: 5 },
5 { x: 2.5, y: 2.5 },
6 { x: 3, y: 3 },
7]
8
9function Example() {
10 return <NavigationStack>
11 <VStack
12 navigationTitle={"RectAreaChart"}
13 navigationBarTitleDisplayMode={"inline"}
14 >
15 <Chart
16 frame={{
17 height: 300
18 }}
19 >
20 <RectAreaChart
21 marks={
22 data.map(item => ({
23 xStart: item.x - 0.25,
24 xEnd: item.x + 0.25,
25 yStart: item.y - 0.25,
26 yEnd: item.y + 0.25,
27 opacity: 0.2,
28 }))
29 }
30 />
31
32 <PointChart
33 marks={data}
34 />
35 </Chart>
36 </VStack>
37 </NavigationStack>
38}
39
40async function run() {
41 await Navigation.present({
42 element: <Example />
43 })
44
45 Script.exit()
46}
47
48run()
