Various Linechart Issues (missing domain prop, not working allow_decimal prop, not working tick_count prop)

[s-kruschel]

Describe the bug
Working with the rx.recharts.line_chart component I stumpled across several issues / bugs.

Missing domain prop.
Similar to this issue #3083 which was solved via PR #3652. Also the X_Axis component does miss the domain prop. Also I would like to suggest to add the domain prop directly to the axis component, instead of separately to the Y_Axis and X_Axis component as both should inherit domain from Axis - if I'm not wrong.

Not working allow_decimal prop
As I have numerical x- and y-values I would like to set allow_decimals = False. From my understanding, this should show integers as x-ticks instead of decimals. So e.g. 2.3445345234 should become 2 for the x-tick. However, setting it True, False or Default, does not make any difference.

Not working tick_count prop
As I have severals hundreds of values, I do not want to see every x-tick for every value, but an appropriate amount of ticks (e.g. 15). Setting tick_count = 15 does not show me 15 ticks but e.g. 2. This could be just a side-effect due to the length of the x-ticks when all decimals are shown in the plot. However, I'm not sure about that.

To Reproduce

import reflex as rx

data = [
        {"name": 1.23342434, "uv": 4000, "pv": 2400, "amt": 2400},
        {"name": 2.34245245234, "uv": 3000, "pv": 1398, "amt": 2210},
        {"name": 3.34456345, "uv": 2000, "pv": 9800, "amt": 2290},
        {"name": 4.5435345, "uv": 2780, "pv": 3908, "amt": 2000},
        {"name": 5.23543453, "uv": 1890, "pv": 4800, "amt": 2181},
        {"name": 6.2345345, "uv": 2390, "pv": 3800, "amt": 2500},
        {"name": 7.435345, "uv": 3490, "pv": 4300, "amt": 2100},
    ]


def index() -> rx.Component:
    return rx.recharts.line_chart(
        rx.recharts.line(data_key="uv", type_="step", dot=False),
        rx.recharts.x_axis(
            data_key="name",
            type_="number",
            domain=["dataMin", "dataMax"],
            allow_decimals=False, # I'd expect that only integers are shown as x-ticks.
            tick_count=5, # I'd expect that exact 5 ticks are shown on the x-axis. 
        ),
        rx.recharts.y_axis(),
        data=data,
        width="50%",
        height=300,
    )

Screenshots

Specifics (please complete the following information):

• Python Version: 3.10.3
• Reflex Version: 0.5.8.
• OS: macOS

[dimritium]

@s-kruschel I tested with 0.5.9 and it seemed to work without any issue for tick_count and allow_decimal.

[s-kruschel]

@dimritium Thanks for looking into this issue.

I only partly agree. Indeed, after upgrading to 0.5.9 the issue seems to be resolved. However, it is only due to the fact, that it overwrote my changes related to the domain prop. According to Recharts' XAxis documentation, also the XAxis component should have a domain prop - that's why I added it leading to my issues. As far as I understand it can be used to limit the X-Axis scale to e.g. 2 - 6 instead of 0 - 8 (according to the used example above). At least that is exactly what happens to the YAxis if I set e.g. rx.recharts.y_axis(domain=[1000, 4000]).

As soon as I implement that prop myself, it is not working anymore.

However, your comment was helpful as we now know, that allow_decimal and tick_count are indeed working. They only do not work, as soon as a domain prop is set.

I also tried to make similar changes like @Lendemor did in PR #3652 just for XAxis, however somehow it does not work.

Or, how would you limit the x-axis ticks / x-axis scale to not show the "empty value ranges" (in our example: 0- ~1.7 and ~7.6 - 8) and allow_decimals = False?

[dimritium]

@s-kruschel I will take another look at source code, but last time I saw it seemed like domain is missing in XAxis implementation.

YAxis is working correctly with domain, right?

[s-kruschel]

@dimritium exactly, domain is missing in XAxis implementation. That's why I added it and expected similar behaviour like for the YAxis. However, I was not able to get it to work. YAxis is indeed working, at least if setting domain. I do not know if it is working in combination withallow_decimals and tick_count.

I now implemented a workaround by calculating the ticks by myself and pass it to the ticks prop. However, this is not very nice and rather hacky.

[dimritium]

@s-kruschel ok thanks, will try to test it today, might be able to raise a PR for this.

[dimritium]

@s-kruschel I was able to make domain work, but then allow_decimals doesn't work :(
I found that this is a bug in recharts.js itself (JS library being used by reflex)

Reflex fix for domain:
Added domain for XAxis

Working XAxis domain but allow_decimals fail:

I also tested a fiddle with Recharts.js which also fails to respect allow_decimals if domain prop is present:
JS Recharts fiddle