New Component: streamlit-g2, a new way to draw charts

🧩 Custom Components
1

streamlit G2

G2 is a visualization grammar for dashboard building, data exploration and storytelling.

This project was created to allow us to render G2 charts in streamlit.

examples
examples2426×1260 109 KB

Installation

pip install streamlit-g2

Usage

import streamlit as st
from streamlit_g2 import g2

options = {
    "type": "interval",
    "data": [
        { "genre": 'Sports', "sold": 275 },
        { "genre": 'Strategy', "sold": 115 },
        { "genre": 'Action', "sold": 120 },
        { "genre": 'Shooter', "sold": 350 },
        { "genre": 'Other', "sold": 150 },
    ],
    "encode": {
        "x": "genre",
        "y": "sold",
        "color": "genre",
    }
}

g2(options=options, style={"width": "100%", "height": "300px"}, key="streamlit_g2")

example
example1320×958 11.5 KB

API

Now, There is only one API for streamlit-g2, named g2, see the options in G2 Spec API.

Property Description Type Default
options the options for the visualization, say chart.options(options) G2options | null -
style the style of the container CSSProperties -

License

MIT@hustcc.

3 Likes
2

Hi @hustcc

Do you have a demo app showing streamlit-g2 in action to share? Anyways, this is super nice, thanks for creating this!

4

hello, demo is here: https://antv-g2.streamlit.app/ , and how can I publish the library into streamlit component gallary?