-1

I am looking for a detailed code example for a line chart with at least 2 y-axis that have different ranges.

I am aware of the example in the documentation here: https://docs.taipy.io/en/release-2.1/manuals/gui/viselements/charts/basics/#adding-a-trace

But following the given snipets it doesn't work for me. I am assuming that I interpret some of the given code segments not correct.

Any help that shows a complete code example would be helpful.

Uwes
  • 17
  • 3

1 Answers1

0

Here the code you want to look for. The second chart has two y axis.

from taipy import Gui

x_range = range(-10, 11)

# The data set holds the _x_ series and two distinct series for _y_
data = {
    "Date": x_range,
    "Starts": [x*x for x in x_range],
    "Duration": [(100-x*x)/50 for x in x_range]
}

layout = {
    "yaxis2": {
      # Second axis overlays with the first y axis
      "overlaying": "y",
      # Place the second axis on the right
      "side": "right",
      # and give it a title
      "title": "Second y axis"
    },
    "legend": {
      # Place the legend above chart
      "yanchor": "bottom"
    }
}

page = """
# Basics - Multiple axis

Shared axis:
<|{data}|chart|x=Date|y[1]=Starts|y[2]=Duration|height=300px|>

With two axis:
<|{data}|chart|x=Date|y[1]=Starts|y[2]=Duration|yaxis[2]=y2|layout={layout}|height=300px|>
"""

Gui(page).run()

yaxis[2]=y2 refers to the second 'y' of the graph. This syntax somes from the Plotly yaxis anchor.

Florian Jacta
  • 1,143
  • 1
  • 2
  • 5
  • Hi Florian, no unfortunately not what I am looking for. I need to yaxis, one left, one right of the chart with two very different ranges, let say one scales from 0 to 10.000 the other from 0 to 10. – Uwes Jun 27 '23 at 16:09
  • I understand what you want to do. I edited my answer; tell me if it solves your issue! – Florian Jacta Jun 28 '23 at 14:39
  • Hi Florian, thanks, that helps and answers my question. One thing came up during my test that puzzled me. I changed the dataset into: data = { "Date": x_range, "Starts": [x*x for x in x_range], "Duration": [(100-x*x)/50 for x in x_range] } I assumed I need to change the chart element like this: <|{data}|chart|x=Date|y[1]=Starts|y[2]=Duration|yaxis[2]=Duration|layout={layout}|height=300px|> But unfortunately the second yaxis disappeared. Seems that I have not understood the principals of topic. – Uwes Jun 28 '23 at 16:11
  • I edited my answer again. To make it work, you must change all 'y2' to 'Duration' without changing 'yaxis[2]=y2'. The 'yaxis' syntax is the syntax from Plotly. – Florian Jacta Jun 29 '23 at 12:04
  • Perfect, thank you Florian, this helps me to better understand the systematic behind the visual element in combination with the underlying Plotly. – Uwes Jun 30 '23 at 13:30