158 lines
2.4 KiB
Markdown
158 lines
2.4 KiB
Markdown
---
|
|
components:
|
|
- rx.recharts.CartesianGrid
|
|
- rx.recharts.CartesianAxis
|
|
---
|
|
|
|
# Cartesian Grid
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
from pcweb.templates.docpage import docgraphing
|
|
|
|
data = [
|
|
{
|
|
"name": "Page A",
|
|
"uv": 4000,
|
|
"pv": 2400,
|
|
"amt": 2400
|
|
},
|
|
{
|
|
"name": "Page B",
|
|
"uv": 3000,
|
|
"pv": 1398,
|
|
"amt": 2210
|
|
},
|
|
{
|
|
"name": "Page C",
|
|
"uv": 2000,
|
|
"pv": 9800,
|
|
"amt": 2290
|
|
},
|
|
{
|
|
"name": "Page D",
|
|
"uv": 2780,
|
|
"pv": 3908,
|
|
"amt": 2000
|
|
},
|
|
{
|
|
"name": "Page E",
|
|
"uv": 1890,
|
|
"pv": 4800,
|
|
"amt": 2181
|
|
},
|
|
{
|
|
"name": "Page F",
|
|
"uv": 2390,
|
|
"pv": 3800,
|
|
"amt": 2500
|
|
},
|
|
{
|
|
"name": "Page G",
|
|
"uv": 3490,
|
|
"pv": 4300,
|
|
"amt": 2100
|
|
}
|
|
]
|
|
|
|
range_data = [
|
|
{
|
|
"day": "05-01",
|
|
"temperature": [
|
|
-1,
|
|
10
|
|
]
|
|
},
|
|
{
|
|
"day": "05-02",
|
|
"temperature": [
|
|
2,
|
|
15
|
|
]
|
|
},
|
|
{
|
|
"day": "05-03",
|
|
"temperature": [
|
|
3,
|
|
12
|
|
]
|
|
},
|
|
{
|
|
"day": "05-04",
|
|
"temperature": [
|
|
4,
|
|
12
|
|
]
|
|
},
|
|
{
|
|
"day": "05-05",
|
|
"temperature": [
|
|
12,
|
|
16
|
|
]
|
|
},
|
|
{
|
|
"day": "05-06",
|
|
"temperature": [
|
|
5,
|
|
16
|
|
]
|
|
},
|
|
{
|
|
"day": "05-07",
|
|
"temperature": [
|
|
3,
|
|
12
|
|
]
|
|
},
|
|
{
|
|
"day": "05-08",
|
|
"temperature": [
|
|
0,
|
|
8
|
|
]
|
|
},
|
|
{
|
|
"day": "05-09",
|
|
"temperature": [
|
|
-3,
|
|
5
|
|
]
|
|
}
|
|
]
|
|
|
|
|
|
|
|
composed_chart_example = """rx.recharts.composed_chart(
|
|
rx.recharts.area(
|
|
data_key="uv",
|
|
stroke="#8884d8",
|
|
fill="#8884d8"
|
|
),
|
|
rx.recharts.bar(
|
|
data_key="amt",
|
|
bar_size=20,
|
|
fill="#413ea0"
|
|
),
|
|
rx.recharts.line(
|
|
data_key="pv",
|
|
type_="monotone",
|
|
stroke="#ff7300"
|
|
),
|
|
rx.recharts.x_axis(data_key="name"),
|
|
rx.recharts.y_axis(),
|
|
rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
|
|
rx.recharts.graphing_tooltip(),
|
|
data=data)"""
|
|
```
|
|
|
|
A cartesian axis adds in reference axes to the cartesian graphs.
|
|
|
|
```python eval
|
|
docgraphing(
|
|
composed_chart_example,
|
|
comp = eval(composed_chart_example),
|
|
data = "data=" + str(data)
|
|
)
|
|
```
|