[🐛 BUG] How to use the yaxis property of chart

[AlexandreSajus]

What went wrong? 🤔

The documentation for chart refers to a yaxis:

But I'm not sure how I am supposed to use it to title the yaxis. This does not work:

import pandas as pd

import taipy.gui.builder as tgb
from taipy.gui import Gui

data = pd.DataFrame({"Product": ["Shovel", "Rake", "Hoe"], "Price": [10, 5, 7]})

yaxis = "Price (USD)"

with tgb.Page() as page:
    tgb.chart(data="{data}", yaxis="{yaxis}")

Gui(page).run()

layout is a workaround:

import pandas as pd

import taipy.gui.builder as tgb
from taipy.gui import Gui

data = pd.DataFrame({"Product": ["Shovel", "Rake", "Hoe"], "Price": [10, 5, 7]})

layout = {"yaxis": {"title": "Price (USD)"}}

with tgb.Page() as page:
    tgb.chart(data="{data}", layout="{layout}")

Gui(page).run()

Runtime Environment

Windows 11

Browsers

Chrome

OS

Windows

Version of Taipy

4.0.2

Acceptance Criteria

• A unit test reproducing the bug is added.
• Any new code is covered by a unit tested.
• Check code coverage is at least 90%.
• The bug reporter validated the fix.
• Related issue(s) in taipy-doc are created for documentation and Release Notes are updated.

Code of Conduct

• I have checked the existing issues.
• I am willing to work on this issue (optional)

[manaschakrabortty]

Hi @AlexandreSajus,

Thank you for sharing the issue! I can understand the confusion regarding how to use the yaxis property in the chart component.

It seems like the issue stems from the way yaxis is being passed. In your first example, you're trying to pass the title directly through yaxis="{yaxis}", but that approach doesn't seem to work as expected. The second approach with the layout workaround is correct because it wraps the yaxis title inside the layout object.

For clarity, the layout object is where you define the properties for the chart axes, including titles, and other configurations like grid lines, ticks, etc. So, using the layout approach ensures the chart correctly renders with the desired properties.

If you have further questions or need additional clarification, feel free to ask!

Hope this helps!

[AlexandreSajus]

Hi @AlexandreSajus,

Thank you for sharing the issue! I can understand the confusion regarding how to use the yaxis property in the chart component.

It seems like the issue stems from the way yaxis is being passed. In your first example, you're trying to pass the title directly through yaxis="{yaxis}", but that approach doesn't seem to work as expected. The second approach with the layout workaround is correct because it wraps the yaxis title inside the layout object.

For clarity, the layout object is where you define the properties for the chart axes, including titles, and other configurations like grid lines, ticks, etc. So, using the layout approach ensures the chart correctly renders with the desired properties.

If you have further questions or need additional clarification, feel free to ask!

Hope this helps!

Not sure if using AI to answer GitHub issues is the best way to start your career Mr. Chakrabortty 🤔 🤔 🤔