reflex-dev / reflex

🕸️ Web apps in pure Python 🐍

Home Page:https://reflex.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[REF-2925] How to set the display range of the y-axis data.

Glyco-Protein opened this issue · comments

Describe the bug
The rendering effect of the line chart is very unusual after passing the parameters to the function rx.recharts.y_axis() when setting the display range of the y-axis.

To Reproduce
Steps to reproduce the behavior:

  • Code/Link to Repo:
def Consumer_lineChart_1():
    return rx.recharts.line_chart(
        #"折线图标题",
        rx.recharts.line(
            data_key="CPI环比",  # 指定绘制的数据列
            stroke="#8884d8",
        ),
        rx.recharts.line(
            data_key="CPI同比",
            type_="monotone",
            stroke="#82ca9d",
        ),

        rx.recharts.x_axis(data_key="月份"),  # 指定X轴使用的数据列
        rx.recharts.y_axis(domain=[97,103]),  # 默认Y轴设置

        rx.recharts.legend(),
        rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
        rx.recharts.graphing_tooltip(),
        #rx.recharts.reference_line(y=100, label="中轴线", stroke="black"),
        height=200,
        data=LineChartState.data,
        #margin={'l': '60', 'b': '40', 't': '30', 'r': '30' },
    )

Screenshots
screenshot-1713015333944

Specifics (please complete the following information):

  • Python Version:3.12
  • Reflex Version:0.4.7
  • OS: windows11
  • Browser (Optional):Edge

Additional context
I do not understand how to set the display range of the y-axis data so that it is displayed in a user-friendly way.

REF-2925

The plots created using Plotly cannot be resized when embedded in an Rx component. I have tried various methods but have been unable to adjust the width and height of the charts.