You need to convert all obj columns into str because of how Streamlit serializes dataframes with pyarrow
if canvas_result.json_data is not None:
objects = pd.json_normalize(canvas_result.json_data["objects"])
for col in objects.select_dtypes(include=["object"]).columns:
objects[col] = objects[col].astype("str")
Hey! Not sure 
I admit Iām not a superuser of ECharts, youāll have to dig into the gallery Examples - Apache ECharts and copy paste snippets of JSON to achieve what you need
Hope this helps as a start,
Fanilo
Hello, I am not too familiar with streamlit itself, neither with echarts. But I identified the combination of these two as a potential easy solver for my problem. Normally I work just on the backend, but I need to do some visualization for clients this time. What I need to visualize is a 3D vector field. That is a space with points and arrows. And some basic interactivity, like zooming, rotating, etcā¦ Since I work in python, I though, it could be done with these tools. But before I deep dive into both of them, I want to ask, if I am right - can this be done with steamlit-echarts? I found some examples on vanilla echarts, that suggest that it is possible. But I am not sure, if the 3D will work. Here is the example, which drives my attention:
Any thoughts? Any advice?
Thank you @andfanilo & @all 
First of all, just want to say thanks @andfanilo. This package is awesome!
I wonder if anyone could help me with the following? Iāve been trying to implement a gauge chart, but the animation doesnāt seem to work - the gauge just jumps from 0 to the value extremely quickly without animating the rise correctly. The code is as follows:
The chart is within another module echarts_module.py
def gauge(value):
option = {
"tooltip": {
"formatter": '{a} <br/>{b} : {c}%'
},
"series": [
{
"name": 'Current',
"type": 'gauge',
"progress": {
"show": False
},
"axisLine": {
"lineStyle": {
"width": 6,
"color": [
[0.2, 'rgb(235, 34, 14)'],
[0.4, 'rgb(242, 99, 9)'],
[0.6, 'rgb(250, 197, 21)'],
[0.8, 'rgb(117, 198, 5)'],
[1, 'rgb(56, 182, 14)']
]
}
},
"detail": {
"valueAnimation": True,
"formatter": f'{value}%',
"color": 'auto'
},
"data": [
{
"value": value,
"name": '%'
},
]
}
]
}
st_echarts(option, height="400px", key="echarts-1")
which is called as follows in my app.py
#set cols etc
with col1:
value = 55
echarts_module.gauge(value)
Hi @andfanilo !
Thank you so much for this component!
Iām trying to put the echarts into separate tabs.
(1) in tab1: some inputs (specified by user) to be used in subsequent tabs. Inputs are wrapped in a form with a submit button
(2) in tab2: I have couple of charts under this tab that take input from tab1. I also want to enable mouse event in tab2 charts so that the user can zoom in/out for any interesting findings.
I realise the mouse event will always trigger the streamlit to rerun and all the results in tab2 are gone, hence I need to go back to tab1 and click submit again. However, the results in tab2 are the same as the original results I had in the previous run.
Could anyone help me with this or is there any alternatives to overcome this issue?
Thanksss!!!
Hi all : )
Was wondering if anyone ever figured out how to programmatically get an echart plot as an image (png)?
Iāve developed a dashboard that Iām pretty proud of but the last thing users want is a way to export all plots into a powerpoint. Would be happy to explain further if needed.
Thanks!
Hi all,
I noticed that in echart-v5.3, there is a new way to format the value in tooltips, like this:
Hi @andfanilo,
Iāve been trying to implement the events to get the areaās selected on the parallel axis chart. Iām curious as to how you reference the chart on your mapping process? When you map from python events to the javascript.
The event function I want to use is here:
However I am unable to reference the chart object that the on(ā¦) function is based on:
Any ideas on how to get the output?
I havenāt tried yet, but it should work with
value_formatter: JsCode("function (value) { returnvalue + 'ml'; }").js_code
Though st-echarts is not yet using streamlit-echarts v5.3 so it may not work
Fanilo
Hey, I hope youāre the one who created st_echarts events function unable to reference chart object Ā· Issue #48 Ā· andfanilo/streamlit-echarts (github.com) we can track the conversation there!
Right now I donāt think thatās possible, but I havenāt tried on my side. What happens if you write this instead of myChart ?
Also I think the series data and index are located in params, reading from Event and Action - Concepts - Handbook - Apache ECharts. I havenāt tried but does
function(params) { console.log(params.data); }
give back the series data? Iām not sure youāll get the active state in there but hopefully it does appear.
Hey @andfanilo, yes it was me that opened that issue. I will continue the conversation there.
Yes, I have tried this way but nothing happened with this line. I see. Do you know when this function will be available in st-echarts?
@andfanilo: Very great package, thank you.
I am just getting startet with streamlit and already have a great experience, especially because I always wanted to work with echarts because of its versatility.
For now I wanted to try this example: Examples - Apache ECharts
The problem is that it isnt animated. I am just getting the chart with all its data after the animation. I also added the following inside of options:
"animation":True, "animationDuration": 10000,
Also I tried to set the renderer to canvas or svg. But no Change.
Does anybody has an Idea how to implement the chart like it is displayed at the echarts example page of apache?
Today I met the same issue as Perter. And I found it is caused by browserās CORS error. Though I am not familiar with this error. But it can be fixed by disable the in chrome.
And I also tested in Edge, It does not have such issue as Chrome.
Iām trying to make a line and bar chart using st_echarts and separating them with a st.tabs
However, when the second tab is selected, the chart is not displayedā¦
from streamlit_echarts import st_echarts
import streamlit as st
tab1, tab2 = st.tabs(['Chuva prevista', 'Chuva observada'])
with tab1:
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": "line"}
],
}
st_echarts(options=options)
with tab2:
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)
hi krishna, I would like to know if an user interacts with a radar chart and the input can be logged and displayed, is that possible with this package?
I would like to know how it would be possible to make the background color transparent, just like it worked in other previous versions of streamlit
Hello everyone, I have an issue with ECharts since version 1.28 of Streamlit. I use Streamlit with a custom background, which is practically black with some lighter lines. I prefer the ECharts graphs to have a transparent background. Until Streamlit version 1.28, this was the default behavior, but now it seems that ECharts graphs have a white background (if itās the default Streamlit theme, most people probably donāt notice). However, Iād like to change it back to transparent.
Hereās a snippet of my code:
def graphics():
data = [
{
"name": "Recalculation",
"children": [
{
"name": "Starburst",
"children": [
{"name": "Order"},
{"name": "Commission"},
]
},
]
}
]
chart = {
'series': [{
'type': 'tree',
'data': data,
'orient': 'RL',
'lineStyle': {
"color": "#222",
},
'label': {
'position': 'left',
'verticalAlign': 'middle',
'align': 'right',
'color': '#fff',
'fontSize': 12,
},
'leaves': { # nodos hojas
'label': {
'position': 'right',
'verticalAlign': 'middle',
'align': 'left'
}
},
}]
}
st_echarts(chart, height="120px", width="100%")
Currently, the best Iāve achieved is setting a black background using the above line of code. However, when I try to use rgba(0, 0, 0, 0) for transparency, it reverts to white. Even with rgba(0, 0, 0, 0.5) , I get a gray color. Does anyone know how to fix this issue? For now, Iāll stick with version 1.28 until itās resolved.
@andfanilo Hi, I am currently using streamlit-echarts to complete my data visualization role, when I deploy multiple charts in my page, I get flickers instead of dynamic data updates using st.rerun refresh, I wonder if there is a way to fix this problem, is it caused by too much code?
thank you!
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.
