ENH: I wish add a parameter to adjust bar function's height in Styler

[slsongge]

Is your feature request related to a problem?

I have a 'Styler' object, I wish add a parameter that can adjust bar's spacing to the bar function.

eg:
now the bar example like bottom:

but I wish like bottom:

Thx!!!

[MarcoGorelli]

Hi @slsongge - could you write a descriptive title please?

I wish add a parameter

As in, are you interested in contributing it?

[rluong003]

Hi, I'm new to open source. May I work on this?

[rluong003]

take

[rluong003]

@MarcoGorelli any pointers on how to do this?
I created a dataframe that goes from 1-10.
I used the render() function to take the HTML of the dataframe and recreate the table in JSFiddle.
I tried adding this CSS property in JSFiddle into the td tags :

border-bottom: 20px solid white;

and this seemed to create the spacing I wanted.

However, when I tried to inject this CSS property into the css_bar() function in the _bar static method as a string, it doesn't work when I run the bar function in my Jupyter notebook.

[MarcoGorelli]

Hi @rluong003 - I'm not familiar with CSS or with this part of the code, sorry

cc @TomAugspurger in case you have suggestions

[TomAugspurger]

I'm not too familiar with it either.

…

On Mon, Sep 28, 2020 at 11:54 AM Marco Gorelli ***@***.***> wrote: Hi @rluong003 <https://github.com/rluong003> - I'm not familiar with CSS or with this part of the code, sorry cc @TomAugspurger <https://github.com/TomAugspurger> in case you have suggestions — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#36419 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKAOIQ5A2HDOJYS6OP2FXTSIC5V5ANCNFSM4RP7BH7A> .

[rluong003]

@attack68 I see you have added many improvements to the Styler class recently, do you have any pointers on how to solve this?

[attack68]

The _bar function works by adding a linear gradient background via CSS.
The simplest way I can think of doing this would be to add a margin or padding option to the cell to create the spacing, but that might have other unintended consequences and/or might not work.

Failing that, there might be another ways of manipulating the data or css to do this, but it would be quite complicated.

But, to be honest, the bar function is kind of a hack to get a bar chart in the background. This feature enhancement is really a hack to a hack, and would be rarely used.
If padding or margin did not work I would be inclined to pass on the request as simply being too esoteric with a high coding cost.

[MarcoGorelli]

I would be inclined to pass on the request as simply being too esoteric with a high coding cost

Agreed - closing for now then to (slightly) declutter the issue tracker

[attack68]

Actually realised a simple way of doing this:

1. Add no-repeat center to the background CSS value
2. Add background-size: 100% 50%; to control the vertical width of the bar.

df = pd.DataFrame({"A": [10, 11, 13, 15]})
df.style.bar(align="left", vmin=3, color=["#d65f5f", "#5fba7d"], width=60)

with CSS modified to:

#T_4bb6b_row0_col0 {
  width: 10em;
  background: linear-gradient(90deg,#5fba7d 35.0%, transparent 35.0%) no-repeat center;
  background-size: 100% 30%;
}
#T_4bb6b_row1_col0 {
  width: 10em;
  background: linear-gradient(90deg,#5fba7d 40.0%, transparent 40.0%) no-repeat center;
  background-size: 100% 30%;
}
#T_4bb6b_row2_col0 {
  width: 10em;
  background: linear-gradient(90deg,#5fba7d 50.0%, transparent 50.0%) no-repeat center;
  background-size: 100% 30%;
}
#T_4bb6b_row3_col0 {
  width: 10em;
  background: linear-gradient(90deg,#5fba7d 60.0%, transparent 60.0%) no-repeat center;
  background-size: 100% 30%;
}

the design is:

instead of:

[slsongge]

thank you