1212
GitHub - andfanilo/streamlit-echarts: A Streamlit component to render ECharts. · GitHub
Skip to content

andfanilo/streamlit-echarts

Repository files navigation

Streamlit - ECharts

A Streamlit component to display ECharts.

Streamlit App


Requirements

  • Python >= 3.10

Installation instructions

uv pip install streamlit-echarts

To also use PyECharts charts with st_pyecharts:

uv pip install streamlit-echarts[pyecharts]

Usage instructions

import streamlit as st
from streamlit_echarts import st_echarts

options = {
    "xAxis": {
        "type": "category",
        "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    "yAxis": {"type": "value"},
    "series": [{"data": [820, 932, 901, 934, 1290, 1330, 1320], "type": "bar"}],
}

st_echarts(options=options, height="400px")

API Reference

st_echarts(options, ...)

Parameter Type Default Description
options dict required ECharts option object
theme str | dict "" "streamlit", "dark", or a custom theme dict
events dict[str, str] None Map of ECharts event names to JS handler strings; return value becomes the component return value
height str "300px" Any valid CSS height (e.g. "500px", "50vh")
width str "100%" Any valid CSS width (e.g. "100%", "600px")
renderer "canvas" | "svg" "canvas" ECharts renderer; "svg" is better for print/accessibility
map Map | None None GeoJSON map to register, created via Map(map_name=..., geo_json=...)
key str | None None Stable widget key; prevents remount and animation replay on rerun
on_change callable | None None Python callback invoked when the component fires a chart event
on_select "ignore" | "rerun" | callable "ignore" Selection behavior: "rerun" triggers a Streamlit rerun; a callable is invoked on selection change
selection_mode str | tuple[str] ("points","box","lasso") Which interactions to enable: "points" (click), "box" (rect brush), "lasso" (polygon brush)

st_pyecharts(chart, ...)

Convenience wrapper that converts a PyECharts chart instance to a dict and calls st_echarts. Requires pip install streamlit-echarts[pyecharts]. Accepts the same parameters as st_echarts (replacing options with chart).

JsCode(js_string)

Wraps a JavaScript string so the frontend evaluates it as a live function rather than a plain string. Use wherever ECharts expects a callback (formatters, symbol sizes, color functions, …).

JsCode("function(params){ return params.value * 2 }")

Map(map_name, geo_json, special_areas=None)

Registers a GeoJSON map with ECharts. Pass the returned object to st_echarts(map=...) and reference map_name in a geo or map series.


Selection / Interactions

Use on_select to enable structured selection events, similar to st.plotly_chart:

result = st_echarts(options=options, on_select="rerun", selection_mode="points", key="my_chart")

selected = result["selection"]
if selected["point_indices"]:
    st.write("Selected indices:", selected["point_indices"])

selection_mode accepts "points" (click), "box" (rect brush), "lasso" (polygon brush), or a tuple of multiple modes. See the demo app for more examples.

Using with PyECharts

Install the optional pyecharts extra:

uv pip install streamlit-echarts[pyecharts]

Then use st_pyecharts to render PyECharts chart instances directly:

import streamlit as st
from pyecharts import options as opts
from pyecharts.charts import Bar
from streamlit_echarts import st_pyecharts

b = (
    Bar()
    .add_xaxis(["Microsoft", "Amazon", "IBM", "Oracle", "Google", "Alibaba"])
    .add_yaxis(
        "2017-2018 Revenue in (billion $)", [21.2, 20.4, 10.3, 6.08, 4, 2.2]
    )
    .set_global_opts(
        title_opts=opts.TitleOpts(
            title="Top cloud providers 2018", subtitle="2017-2018 Revenue"
        )
    )
)

st_pyecharts(b, height="500px")

st_pyecharts accepts the same parameters as st_echarts (theme, events, on_select, etc.). Under the hood it calls chart.dump_options() and passes the result to st_echarts.

Alternatively, you can convert PyECharts options manually without installing the extra:

import json
from streamlit_echarts import st_echarts

st_echarts(options=json.loads(b.dump_options()), height="500px")

Demo Application

A comprehensive demo application containing dozens of ECharts and PyECharts examples is available in the root of the repository. You can use it as an integration test to verify the component's functionality:

Note: You will need extra dependencies installed to run all examples in the demo:

uv pip install pyecharts pandas faker
uv run streamlit run demo_app.py

Project status

This project is in best-effort status — I occasionally add features I personally need through agentic coding, but I'm not actively reviewing larger issues or pull requests from the community. If you're looking to add a bigger feature, you're welcome to fork it!

Please add a thumbs up HERE if you wish to see a native implementation maintained by the Streamlit team.

Contributing

See CONTRIBUTING.md for development setup, testing, building, and publishing.

About

A Streamlit component to render ECharts.

Topics

Resources

License

Contributing

Stars

Watchers

Forks

Contributors