New Component: streamlit_apex_charts

[akshanshkmr]

Hi Community,

I am pleased to present my latest component streamlit_apex_charts.
it’s just a wrapper over ApexCharts.js

Installation

pip install streamlit-apex-charts

Getting started

import numpy as np
import pandas as pd
from streamlit_apex_charts import line_chart

df = pd.DataFrame(np.random.randint(1,10,size=(10, 3)),columns=['Apple', 'Microsoft', 'Google'])
line_chart('Zoomable Line chart',df)

Demo

Not like we don’t have enough charting options in streamlit
But I just liked the material-ui like style of apex charts.

Again the charts are fully customizable and work with data frames just like native streamlit charts.
Excited to see what the community builds with this.

Thanks,
Akshansh

[andfanilo]

You’re on fire @akshanshkmr hope to test that really soon!

I love that we have more and more charting libraries in Streamlit, a dream coming true

• In your demo app, it would be a good idea to add the code to display each graph, not only the API for the method, so I can just copy/paste/edit !
• As always, could you update the Components Tracker ? Thanks a lot!

Have a nice day
Fanilo

[BeyondMyself]

Great, nice work.
This example is very beautiful.
a little change, it can support common chart types.

import numpy as np
import pandas as pd
import streamlit as st
from streamlit_apex_charts import line_chart, bar_chart, pie_chart, area_chart, radar_chart

st.set_page_config(layout="wide")

df = pd.DataFrame(np.random.randint(1,10,size=(10, 3)),columns=['Apple', 'Microsoft', 'Google'])

line_chart('Line chart',df)
c1, c2 = st.columns(2)
with c1:
	bar_chart('Bar chart',df)
	pie_chart('Pie chart',df)
with c2:
	area_chart('Area chart',df)
	radar_chart('Radar chart',df)

If it also can support other chart types will be more fine, such as heatmap, gauge, treemap and etc.
And if have an argument like “label_show=True” to let the label show or not, legend_positon=Top, Bottom, Left, Right and more arguments.

[akshanshkmr]

Thanks a lot @andfanilo I’ll modify the demo app

[akshanshkmr]

Thanks for the suggestions @BeyondMyself . this is a work in progress and I’ll continue to add more and more chart types, as far as hiding the label is concerned you can just pass an empty string in the title

[AvratanuBiswas]

Another great work @akshanshkmr

[akshanshkmr]

FYI:Added treemap and ability to pass chart_options(dict)
with the latest version

[BeyondMyself]

@akshanshkmr

These useful widgets were removed from component?
Yesterday, I can see them, today after I updated, I can not see them any more?
Can you recover them?
Thank you.

[akshanshkmr]

Hey,

I can still see these, can you please let me know for which chart are you observing this?

Thanks,
Akshansh

[BeyondMyself]

I used the bar_chart
those functions just disappear.
current version is 1.0.2

[akshanshkmr]

Thanks for reporting, I was able to reproduce this too,

I guess this is happening when we try to set custom labels for x-axis,
only bar_chart is affected so seems like an issue on ApexCharts’ side.

I’ll try to come up with a workaround for this, or log a bug request on their end.

Edit: You can use this as a quick band-aid:

bar_chart('Bar chart',df,chart_options={'labels':[]})

Thanks,
Akshansh

[BeyondMyself]

@akshanshkmr

chart_options={'labels':[]}

got error

[akshanshkmr]

Please upgrade to the latest version

[asehmi]

This is very nice. I hadn’t come across ApexCharts. Do you have any comparison with ECharts?

Thanks,
Arvindra

[akshanshkmr]

Hi Arvindra,

Apexcharts are just more visually appealing, but echarts are more powerful.

Thanks,
Akshansh

[asehmi]

I’ll look into it. I’ve become quite impressed with ECharts, but ApexCharts API looks quite easy to use.

Questions:

1. Do you have plans to enable chart events (clicks, bounding boxes, etc.) and send data back to Streamlit?
2. I want to use multiple charts of one type in a page. Is this supported via unique component instance keys?
3. Will you be handling Streamlit themes (essentially inheriting the active Streamlit theme)?

Thanks,
Arvindra

[akshanshkmr]

Hi Arvindra,

I do have plans to integrate chart events in the future but due to bandwidth constraints not sure about the timelines.

Yes you can use multiple charts with unique keys

I already handle themes, is there an issue you noticed?

Thanks,
Akshansh

[asehmi]

@akshanshkmr

is there an issue you noticed

No issue… I haven’t actually tried it yet but hope to soon

[asehmi]

@akshanshkmr When is your GitHub link for this going live/public?

[napoles3d]

Added to