/*@jsxRuntime automatic @jsxImportSource react*/ /* Jeamlit supports several different charting libraries, and our goal is to continually add support for more. Right now, the most basic library in our arsenal is [Matplotlib](https://matplotlib.org/). Then there are also interactive charting libraries like [Vega Lite](https://vega.github.io/vega-lite/) (2D charts) and [deck.gl](https://github.com/uber/deck.gl) (maps and 3D charts). And finally we also provide a few chart types that are "native" to Streamlit, like `st.line_chart` and `st.area_chart`. */ /* screenshot

Simple area charts

Display an area chart. ```java st.area_chart(my_data_frame) ``` screenshot

Simple bar charts

Display a bar chart. ```java st.bar_chart(my_data_frame) ``` screenshot

Simple line charts

Display a line chart. ```java st.line_chart(my_data_frame) ``` screenshot

Simple scatter charts

Display a line chart. ```java st.scatter_chart(my_data_frame) ``` screenshot

Scatterplots on maps

Display a map with points on it. ```java st.map(my_data_frame) ``` */ /* ## Advanced chart elements screenshot

Matplotlib

Display a matplotlib.pyplot figure. ```java st.pyplot(my_mpl_figure) ``` screenshot

Altair

Display a chart using the Altair library. ```java st.altair_chart(my_altair_chart) ``` screenshot

Vega-Lite

Display a chart using the Vega-Lite library. ```java st.vega_lite_chart(my_vega_lite_chart) ``` screenshot

Plotly

Display an interactive Plotly chart. ```java st.plotly_chart(my_plotly_chart) ``` screenshot

Bokeh

Display an interactive Bokeh chart. ```java st.bokeh_chart(my_bokeh_chart) ``` screenshot

PyDeck

Display a chart using the PyDeck library. ```java st.pydeck_chart(my_pydeck_chart) ``` screenshot

GraphViz

Display a graph using the dagre-d3 library. ```java st.graphviz_chart(my_graphviz_spec) ``` */ /* screenshot

Plost

A deceptively simple plotting library for Streamlit. Created by [@tvst](https://github.com/tvst). ```python import plost plost.line_chart(my_dataframe, x='time', y='stock_value', color='stock_name',) ``` screenshot

HiPlot

High dimensional Interactive Plotting. Created by [@facebookresearch](https://github.com/facebookresearch). ```python data = [{'dropout':0.1, 'lr': 0.001, 'loss': 10.0, 'optimizer': 'SGD'}, {'dropout':0.15, 'lr': 0.01, 'loss': 3.5, 'optimizer': 'Adam'}, {'dropout':0.3, 'lr': 0.1, 'loss': 4.5, 'optimizer': 'Adam'}] hip.Experiment.from_iterable(data).display() ``` screenshot

ECharts

High dimensional Interactive Plotting. Created by [@andfanilo](https://github.com/andfanilo). ```python from streamlit_echarts import st_echarts st_echarts(options=options) ``` screenshot

Streamlit Folium

Streamlit Component for rendering Folium maps. Created by [@randyzwitch](https://github.com/randyzwitch). ```python m = folium.Map(location=[39.949610, -75.150282], zoom_start=16) st_data = st_folium(m, width=725) ``` screenshot

Spacy-Streamlit

spaCy building blocks and visualizers for Streamlit apps. Created by [@explosion](https://github.com/explosion). ```python models = ["en_core_web_sm", "en_core_web_md"] spacy_streamlit.visualize(models, "Sundar Pichai is the CEO of Google.") ``` screenshot

Streamlit Agraph

A Streamlit Graph Vis, based on [react-grah-vis](https://github.com/crubier/react-graph-vis). Created by [@ChrisDelClea](https://github.com/ChrisDelClea). ```python from streamlit_agraph import agraph, Node, Edge, Config agraph(nodes=nodes, edges=edges, config=config) ``` screenshot

Streamlit Lottie

Integrate [Lottie](https://lottiefiles.com/) animations inside your Streamlit app. Created by [@andfanilo](https://github.com/andfanilo). ```python lottie_hello = load_lottieurl("https://assets5.lottiefiles.com/packages/lf20_V9t630.json") st_lottie(lottie_hello, key="hello") ``` screenshot

Plotly Events

Make Plotly charts interactive!. Created by [@null-jones](https://github.com/null-jones/). ```python fig = px.line(x=[1], y=[1]) selected_points = plotly_events(fig) ``` screenshot

Streamlit Extras

A library with useful Streamlit extras. Created by [@arnaudmiribel](https://github.com/arnaudmiribel/). ```python chart += get_annotations_chart(annotations=[("Mar 01, 2008", "Pretty good day for GOOG"), ("Dec 01, 2007", "Something's going wrong for GOOG & AAPL"), ("Nov 01, 2008", "Market starts again thanks to..."), ("Dec 01, 2009", "Small crash for GOOG after..."),],) st.altair_chart(chart, use_container_width=True) ``` */ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ h1: "h1", a: "a", span: "span", p: "p", h2: "h2", pre: "pre", code: "code" }, _provideComponents(), props.components), {TileContainer, RefCard, Image} = _components; if (!Image) _missingMdxReference("Image", true); if (!RefCard) _missingMdxReference("RefCard", true); if (!TileContainer) _missingMdxReference("TileContainer", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h1, { id: "chart-elements", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#chart-elements", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Chart elements"] }), "\n", _jsx(_components.p, { children: "Jeamlit only supports Apache Echarts for charting, but our goal is to continually add support for more charting libraries." }), "\n", "\n", _jsxs(_components.h2, { id: "simple-chart-elements", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#simple-chart-elements", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Simple chart elements"] }), "\n", _jsx(TileContainer, { children: _jsxs(RefCard, { href: "/develop/api-reference/charts/jt.echarts", children: [_jsx(Image, { pure: true, alt: "screenshot", src: "/images/api/components/echarts.jpg" }), _jsx("h4", { children: "ECharts" }), _jsx(_components.p, { children: "Display a chart using the Apache ECharts library." }), _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-java", children: "Jt.echarts(myChartConfig).use();\n" }) })] }) }), "\n", "\n"] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Chart elements

Simple chart elements

ECharts

Still have questions?