Add variable height/width property for charts

[MShekow]

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 = 900

Thus, 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?

[linear]

ENG-4257 Add variable height/width property for charts