How to control the length of Horizontal bar in Ipyvizzu

Question

I want to control the length of Horizontal bar because when animation ends some of the values does not fit inside the bars. In the image below value of Air Canada does not fit inside the bar so I want to increase the overall length of all the bars proportionally or take the label outside the bar.

Also during the animation I get the passenger count as decimal value which does not make sense,I have tried to control it using numberFormat and maxFractionDigits but no success.

filter_format = "(" + \
    " || ".join([f"record['Operating Airline'] == '{item}'" for item in top10_airlines]) + ")"

config = {
    "channels": {
        "y": {
            "set": ["Operating Airline"],
        },
        "x": {"set": ["Passenger Count"]},
        "label": {"set": ["Passenger Count"]},
        "color": {"set": ["Operating Airline"]},
    },
    "sort": "byValue",
}

style = Style(
    {
        "plot": {
            "paddingLeft": 120,
            "paddingTop": 25,
            "yAxis": {
                "color": "#ffffff00",
                "label": {"paddingRight": 10},
            },
            "xAxis": {
                "title": {"color": "#ffffff00"},
                "label": {
                    "color": "#ffffff00",
                    #"numberFormat": "grouped",
                    #"numberFormat": "prefixed",
                    "maxFractionDigits":"0",
                },
            },
            "marker": {
                "colorPalette": "#d9ed92ff #b5e48cff #99d98cff #76c893ff #52b69aff"
                    + " #34a0a4ff #168aadff #1a759fff #1e6091ff #184e77ff"
            },
        },
    }
)

chart = Chart(display=DisplayTarget.END)



#chart.animate(data.filter(filter_format), style)
chart.animate(data, style)
#chart.animate(Config(config))

for year in years:
    config["title"] = f"Airlines Passenger Count in {year}"
    #print(month)
    chart.animate(
        Data.filter(f"parseInt(record.Year) == {year} && {filter_format}"),
        Config(config),
        duration=1,
        x={"easing": "linear", "delay": 0},
        y={"delay": 0},
        show={"delay": 0},
        hide={"delay": 0},
        title={"duration": 0, "delay": 0},
    )

chart.animate(
    Config(
        {
            "channels": {
                "x": {"attach": ["Year"]},
                #"label": {"set": "Passenger Count"},
            }
        }
    ),
    duration=1,
)
chart.feature("tooltip", True)

Answer 1

The label you would like to control is the marker label. But in your code, maxFractionDigits is set for the xAxis labels. So you should set "plot.marker.label.maxFractionDigits" to 0 instead to control the labels next to the markers.

"marker": {
  "label": {
    "maxFractionDigits": 0
  }
},

Also, I see that you set the axis label color to transparent. It can also be switched off entirely through the configuration:

"x": {"set": ["Passenger Count"], "labels": False },

---

Regarding the overall length of all the bars: you can decrease the left and right padding of the plot, and you can decrease the default max value of the x-axis from 110% to 100%. If it still not fits, then your only option is to decrease the font size of the marker labels.

in the config:

"x": {"set": ["Passenger Count"], "range": { "max": "100%" } }

in the style:

"plot": {
  "paddingRight": 0
}

If you want to move the label out of the center of the marker to the side, you will need to set the plot.marker.label.position style parameter to "right".