[REF-3243] Recharts allow_decimals does not work as described

[mgrady3]

Describe the bug The documentation for Recharts XAxis allow_decimals parameter says:

Allow the ticks of XAxis to be decimals or not.

Naively I would expect that when set to False, then values for tick-marks shown on the X-Axis are not shown with full decimal representation and instead are truncated to integers in some manner, however, this is not the case.

To Reproduce Minimal example:

"""Welcome to Reflex! This file outlines the steps to create a basic app."""

import numpy as np

import reflex as rx
from rxconfig import config


x = np.linspace(-20, 20, num=500)
y = x**2
data = []
for xd, yd in zip(x, y):
    data.append({"x": xd, "y": yd})


def index() -> rx.Component:
    return rx.recharts.line_chart(
        rx.recharts.line(
            data_key="y",
            stroke="#8884d8"
        ),
        rx.recharts.x_axis(data_key="x", allow_decimals=False),
        rx.recharts.y_axis(),
        data=data,
    )

app = rx.App()
app.add_page(index)

Expected behavior I expect that the data shown on the XAxis will not display the full decimal and rather be truncated in some way to integers

Screenshots Here is the plot shown when using allow_decimals=False. Note, the X-Axis is rather busy and hard to read due to the extended decimal data being shown.

Specifics (please complete the following information):

• Python Version: 3.10.12
• Reflex Version: 0.55
• OS: Kubuntu 22.04
• Browser (Optional): Chrome (latest for this Kubuntu release)

_REF-3243

[Manas1820]

Looks like the current implementation aligns with the documentation. By default, the type property of XAxis is considered category, rather than a numeric value. Consequently, the graph was interpreting the data as a string. Specifying the type as number resolves this issue, and the graph behaves as expected.

"""Welcome to Reflex! This file outlines the steps to create a basic app."""

import numpy as np
import reflex as rx
from rxconfig import config

# Generate x values from -20 to 20 with 500 points
x = np.linspace(-20, 20, num=500)
# Compute the y values as the square of x
y = x**2

# Prepare the data in the required format
data = []
for xd, yd in zip(x, y):
    data.append({"x": xd, "y": yd})

def index() -> rx.Component:
    return rx.recharts.line_chart(
        rx.recharts.line(
            data_key="y",
            stroke="#8884d8"
        ),
        rx.recharts.x_axis(data_key="x", allow_decimals=False, type_="number"),
        rx.recharts.y_axis(),
        data=data,
    )

# Create and configure the app
app = rx.App()
app.add_page(index)

I hope this clarifies the situation and helps with your implementation.

[adhami3310]

seems to be working as intended