Description
Describe the Enhancement you want
All charts inheriting from reflex.components.recharts.charts.ChartBase are limited because the height or width property cannot be assigned to a State attribute. Trying to do so would result in the following error:
<more stuff, omitted>
File "D:\Code\reflex-demo\reflex_demo\reflex_demo.py", line 22, in bar_vertical
return rx.recharts.bar_chart(
^^^^^^^^^^^^^^^^^^^^^^
File "D:\Code\reflex-demo\.venv\Lib\site-packages\reflex\components\recharts\charts.py", line 89, in create
"height": height or "100%",
^^^^^^^^^^^^^^^^
File "D:\Code\reflex-demo\.venv\Lib\site-packages\reflex\vars\base.py", line 1181, in __bool__
raise VarTypeError(
reflex.utils.exceptions.VarTypeError: Cannot convert Var 'reflex___state____state__reflex_demo___reflex_demo____graph_data_state.height' to bool for use with `if`, `and`, `or`, and `not`. Instead use `rx.cond` and bitwise operators `&` (and), `|` (or), `~` (invert).
This is for the following example:
import reflex as rx
app = rx.App()
@rx.page(route="/", title="Demo")
def bar_vertical():
return rx.recharts.bar_chart(
rx.recharts.bar(
data_key="uv",
stroke=rx.color("accent", 8),
fill=rx.color("accent", 3),
),
rx.recharts.x_axis(type_="number"),
rx.recharts.y_axis(
data_key="name", type_="category"
),
data=GraphDataState.data,
layout="vertical",
margin={
"top": 20,
"right": 20,
"left": 20,
"bottom": 20,
},
width="100%",
height=GraphDataState.height,
)
class GraphDataState(rx.State):
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},
]
height: int = 900Thus, I'm forced to hard-code the height / width (as integers or percentage strings).
Hard-coding numbers make no sense because data often comes from a database, and I don't know beforehand how many rows the database will return. Sure, my application logic needs to keep the numbers in check (I don't want to plot a bar chart with 1000000 entries), but I would like to be able to compute a sensible height in my State's on_load_data() method. Would this addition be possible?