New Component: streamlit_apex_charts

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

Open in Streamlit github_badge

Not like we donā€™t have enough charting options in streamlit :joy:
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

6 Likes

Youā€™re on fire @akshanshkmr :fire: hope to test that really soon!

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

  • 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 :balloon:
Fanilo

1 Like

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.

3 Likes

Thanks a lot @andfanilo Iā€™ll modify the demo app

1 Like

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

1 Like

Another great work @akshanshkmr :slight_smile:

1 Like

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

@akshanshkmr
image
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.

Hey,

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

Thanks,
Akshansh

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

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

got error

Please upgrade to the latest version

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

Thanks,
Arvindra

Hi Arvindra,

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

Thanks,
Akshansh

1 Like

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

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

No issueā€¦ I havenā€™t actually tried it yet :frowning: but hope to soon :rocket:

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

Added to
Streamlit App

1 Like