panel icon indicating copy to clipboard operation
panel copied to clipboard

Using Bar Charts from pandas styling on Tabulator causes the columns' widths to misalign

Open Kadek opened this issue 3 years ago • 0 comments

ALL software version info

Python 3.8.8 panel 0.13.0a43

Description of expected behavior and the observed behavior

Expected behaviour: Using Bar Charts from pandas styling should result in the same visuals as the reference page shows https://pandas.pydata.org/pandas-docs/stable/user_guide/style.html#Bar-charts

Observed behaviour: The column using Bar Chart has different width than its header. Additionally, it seems the width of the table changes slightly on every stream of a new point.

Complete, minimal, self-contained example code that reproduces the issue

import numpy as np
import pandas as pd
import panel as pn

df = pd.DataFrame(np.random.randn(1, 5), columns=list('ABCDE'))
styled = pn.widgets.Tabulator(df, height=500)

styled.style.bar(subset=['A'], color=['#d65f5f'])


def start_updating(*args):
    pn.state.add_periodic_callback(update, period=1000)

def update():
    df = pd.DataFrame(np.random.randn(1, 5), columns=list('ABCDE'))
    styled.stream(df)

button = pn.widgets.Button(name="Start")
button.on_click(start_updating)

pn.Column(button, styled).servable()

Stack traceback and/or browser JavaScript console output

Screenshots or screencasts of the bug in action

https://user-images.githubusercontent.com/2953645/159011293-ef60f7b2-4714-4bc1-9978-2cf98066f263.mp4

Kadek avatar Mar 18 '22 13:03 Kadek