170 lines
5.2 KiB
Markdown
170 lines
5.2 KiB
Markdown
---
|
|
components:
|
|
- rx.recharts.LineChart
|
|
- rx.recharts.Line
|
|
---
|
|
|
|
# Line Chart
|
|
|
|
```python exec
|
|
import random
|
|
from typing import Any
|
|
|
|
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
|
|
}
|
|
]
|
|
|
|
|
|
line_chart_simple_example = """rx.recharts.line_chart(
|
|
rx.recharts.line(
|
|
data_key="pv",
|
|
stroke="#8884d8",),
|
|
rx.recharts.line(
|
|
data_key="uv",
|
|
stroke="#82ca9d",),
|
|
rx.recharts.x_axis(data_key="name"),
|
|
rx.recharts.y_axis(),
|
|
data=data
|
|
)"""
|
|
|
|
line_chart_complex_example = """rx.recharts.line_chart(
|
|
rx.recharts.line(
|
|
data_key="pv",
|
|
type_="monotone",
|
|
stroke="#8884d8",),
|
|
rx.recharts.line(
|
|
data_key="uv",
|
|
type_="monotone",
|
|
stroke="#82ca9d",),
|
|
rx.recharts.x_axis(data_key="name"),
|
|
rx.recharts.y_axis(),
|
|
rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
|
|
rx.recharts.graphing_tooltip(),
|
|
rx.recharts.legend(),
|
|
data=data
|
|
)"""
|
|
```
|
|
|
|
A line chart is a type of chart used to show information that changes over time. Line charts are created by plotting a series of several points and connecting them with a straight line.
|
|
|
|
For a line chart we must define an `rx.recharts.line()` component for each set of values we wish to plot. Each `rx.recharts.line()` component has a `data_key` which clearly states which variable in our data we are tracking. In this simple example we plot `pv` and `uv` as separate lines against the `name` column which we set as the `data_key` in `rx.recharts.x_axis`.
|
|
|
|
```python eval
|
|
docgraphing(line_chart_simple_example, comp=eval(line_chart_simple_example), data = "data=" + str(data))
|
|
```
|
|
|
|
## Chart Features
|
|
|
|
Our second example uses exactly the same data as our first example, except now we add some extra features to our line graphs. We add a `type_` prop to `rx.recharts.line` to style the lines differently. In addition, we add an `rx.recharts.cartesian_grid` to get a grid in the background, an `rx.recharts.legend` to give us a legend for our graphs and an `rx.recharts.graphing_tooltip` to add a box with text that appears when you pause the mouse pointer on an element in the graph.
|
|
|
|
```python eval
|
|
docgraphing(line_chart_complex_example, comp=eval(line_chart_complex_example), data = "data=" + str(data))
|
|
```
|
|
|
|
## Dynamic Data and Style
|
|
|
|
```python exec
|
|
initial_data = data
|
|
|
|
|
|
class LineChartState(rx.State):
|
|
data: list[dict[str, Any]] = initial_data
|
|
pv_type: str = "monotone"
|
|
uv_type: str = "monotone"
|
|
|
|
def munge_data(self):
|
|
for row in self.data:
|
|
row["uv"] += random.randint(-500, 500)
|
|
row["pv"] += random.randint(-1000, 1000)
|
|
|
|
|
|
line_chart_state_example = """rx.vstack(
|
|
rx.recharts.line_chart(
|
|
rx.recharts.line(
|
|
data_key="pv",
|
|
type_=LineChartState.pv_type,
|
|
stroke="#8884d8",
|
|
),
|
|
rx.recharts.line(
|
|
data_key="uv",
|
|
type_=LineChartState.uv_type,
|
|
stroke="#82ca9d",
|
|
),
|
|
rx.recharts.x_axis(data_key="name"),
|
|
rx.recharts.y_axis(),
|
|
data=LineChartState.data,
|
|
),
|
|
rx.button("Munge Data", on_click=LineChartState.munge_data),
|
|
rx.select(
|
|
["monotone", "linear", "step", "stepBefore", "stepAfter"],
|
|
value=LineChartState.pv_type,
|
|
on_change=LineChartState.set_pv_type
|
|
),
|
|
rx.select(
|
|
["monotone", "linear", "step", "stepBefore", "stepAfter"],
|
|
value=LineChartState.uv_type,
|
|
on_change=LineChartState.set_uv_type
|
|
),
|
|
height="15em",
|
|
width="100%",
|
|
)"""
|
|
```
|
|
|
|
Chart data can be modified by tying the `data` prop to a State var. Most other
|
|
props, such as `type_`, can be controlled dynamically as well. In the following
|
|
example the "Munge Data" button can be used to randomly modify the data, and the
|
|
two `select` elements change the line `type_`. Since the data and style is saved
|
|
in the per-browser-tab State, the changes will not be visible to other visitors.
|
|
|
|
```python eval
|
|
docgraphing(
|
|
line_chart_state_example,
|
|
comp=eval(line_chart_state_example),
|
|
# data="initial_data=" + str(data) + "\n\n" + inspect.getsource(LineChartState),
|
|
)
|
|
```
|