streamlit/streamlit

Tick styling inconsistent in `st.bokeh_chart()` vs `streamlit_bokeh()` for caliber theme

Open

#11,346 创建于 2025年5月13日

在 GitHub 查看
 (4 评论) (11 反应) (0 负责人)Python (4,161 fork)batch import
area:stylingfeature:st.bokeh_chartpapercutpriority:P3status:confirmedtype:bugupstream

仓库指标

Star
 (44,008 star)
PR 合并指标
 (平均合并 4天 23小时) (30 天内合并 283 个 PR)

描述

Checklist

  • I have searched the existing issues for similar issues.
  • I added a very descriptive title to this issue.
  • I have provided sufficient information below to help reproduce this issue.

Summary

streamlit_bokeh fails to generate correct axes using the caliber theme after setting the plot background and border colors. The tick styling fails to output ticks of the requested color. Legacy st.bokeh_chart() renders the ticks as expected.

Reproducible Code Example

# See: https://github.com/pr3d4t0r/SSScoring/blob/master/LICENSE.txtl

# Streamlit Bokeh bug report runner


import bokeh.models as bm
import bokeh.plotting as bp
import streamlit as st

backgroundColorName='#2c2c2c'
colorName = 'lightsteelblue'
THEME='caliber'
x = [ x for x in range(1,6) ]
y = [ 6, 7, 6, 4, 5, ]


def BUG_st_bokeh():
    # REQUIRES: pip install streamlit_bokeh
    from streamlit_bokeh import streamlit_bokeh

    plot = bp.figure(
                title='TICK MARKS MISSING - theme: %s' % THEME,
                width=500,
                height=300,
                background_fill_color=backgroundColorName,
                border_fill_color=backgroundColorName,
    )
    plot.title.text_font = 'Arial'
    plot.title.text_color = 'red'
    plot.xaxis.axis_label_text_color=colorName
    plot.xaxis.major_label_text_color=colorName
    plot.xaxis.axis_line_color=colorName
    plot.xaxis.major_tick_line_color=colorName
    plot.xaxis.minor_tick_line_color=colorName
    plot.yaxis.axis_label_text_color=colorName
    plot.yaxis.major_label_text_color=colorName
    plot.yaxis.axis_line_color=colorName
    plot.yaxis.major_tick_line_color=colorName
    plot.yaxis.minor_tick_line_color=colorName
    plot.line(x, y, line_color='orange')
    linearAxis = bm.LinearAxis(
            axis_label_text_color = colorName,
            axis_line_color = colorName,
            major_label_text_color = colorName,
            axis_label = 'Foo',
            major_tick_line_color='yellow',
            minor_tick_line_color='yellow',
            y_range_name = 'Bar'
    )
    plot.extra_y_ranges = { 'Bar': bm.Range1d(start = 0, end = 10) }
    plot.add_layout(linearAxis, 'left')
    streamlit_bokeh(plot, use_container_width=False, theme=THEME)


def WORKS_st_bokeh_chart():
    # REQUIRES: pip install bokeh==2.4.3
    import bokeh.io as bi

    bi.curdoc.theme = THEME
    plot = bp.figure(
                title='TICK MARKS SHOW - theme: %s' % THEME,
                width=500,
                height=300,
                background_fill_color=backgroundColorName,
                border_fill_color=backgroundColorName,
    )
    plot.title.text_font = 'Arial'
    plot.title.text_color = colorName
    plot.xaxis.axis_label_text_color=colorName
    plot.xaxis.major_label_text_color=colorName
    plot.xaxis.axis_line_color=colorName
    plot.xaxis.major_tick_line_color=colorName
    plot.xaxis.minor_tick_line_color=colorName
    plot.yaxis.axis_label_text_color=colorName
    plot.yaxis.major_label_text_color=colorName
    plot.yaxis.axis_line_color=colorName
    plot.yaxis.major_tick_line_color=colorName
    plot.yaxis.minor_tick_line_color=colorName
    plot.line(x, y, line_color='orange')
    linearAxis = bm.LinearAxis(
            axis_label_text_color = colorName,
            axis_line_color = colorName,
            major_label_text_color = colorName,
            axis_label = 'Foo',
            major_tick_line_color='yellow',
            minor_tick_line_color='yellow',
            y_range_name = 'Bar'
    )
    plot.extra_y_ranges = { 'Bar': bm.Range1d(start = 0, end = 10) }
    plot.add_layout(linearAxis, 'left')
    st.bokeh_chart(plot, use_container_width=False)


if '__main__' == __name__:
    WORKS_st_bokeh_chart()
    # BUG_st_bokeh()

Steps To Reproduce

  1. Save the reproducible code example as buggy.py
  2. Ensure that bokeh==2.4.3 is installed and that streamlit_bokeh is not present in the current environment
  3. streamlit run buggy.py - This code uses st.bokeh_chart() and renders the ticks for the x, y, and extra y axes/ranges
  4. Close the browser and Ctrl-C to exit streamlit
  5. Go to line 95 of the reproducible example and comment out # WORKS_st_bokeh_chart()
  6. Go to line 96 of the reproducible example and enable BUG_st_bokeh()
  7. Install streamlit_bokeh and its dependencies
  8. streamlit run buggy.py - This code uses streamlit_bokeh() and fails to render ticks for the x, y, and extra y axes/ranges. Inspecting the output shows that the ticks are present in a dark grey color, unaffected by rendeding settings in bm.LinearAxis construction and bp.plot instance configuration.

The implementations of WORKS_st_bokeh_chart() and BUG_st_bokeh() are identical (check with diff -y if needed).

Expected Behavior

Plots rendered using the caliber theme feature tick marks along the axes. When using st.bokeh_chart() and Bokeh 2.4.3 (legacy) the plots render the tick marks for the main axes and for any extra X or Y ranges and axes.

Current Behavior

streamlit_bokeh fails to generate correct axes using the caliber theme after setting the plot background and border colors. The tick styling fails to output ticks of the requested color. Legacy st.bokeh_chart() renders the ticks as expected.

Compare the output from both function calls (legacy st.bokeh_chart() vs streamlit_bokeh() generated by identical code. This must be executed to experience the differences.

Is this a regression?

  • Yes, this used to work in a previous version.

Debug info

  • Streamlit version: 1.45.1
  • Python version: 3.13.3, others prior
  • Operating System: macOS 15.4.1
  • Browser: Firefox, Safari, LibreWolf, Brave

All browsers run at their latest available GA version.

Additional Information

No response

贡献者指南