Skip to main content

Render Ant Design Charts in Streamlit

Project description

<h1 align="center">
<b>Streamlit Charts</b>
</h1>

<div align="center">

[Ant Design Charts](https://ant-design-charts.antgroup.com/) is AntV React component library, Simple and easy to use React chart library.

This project was created to allow us to render charts in streamlit, [live demo](https://ant-design-charts.streamlit.app/).

![examples](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*11uNQrnKdFoAAAAAAAAAAAAADmJ7AQ/original)
![npm Version](https://img.shields.io/npm/v/@ant-design/charts)
![npm Download](https://img.shields.io/npm/dm/@ant-design/charts)
[![GitHub stars](https://img.shields.io/github/stars/ant-design/ant-design-charts)](https://github.com/ant-design/ant-design-charts/stargazers)
[![npm License](https://img.shields.io/npm/l/@ant-design/charts.svg)](https://www.npmjs.com/package/@ant-design/charts)

</div>


## Installation

```
pip3 install streamlit-charts
```


## Usage

```py
import streamlit as st
from streamlit_charts import charts

options = {
"height": 400,
"data": [
{ "genre": "Sports", "sold": 275 },
{ "genre": "Strategy", "sold": 115 },
{ "genre": "Action", "sold": 120 },
{ "genre": "Shooter", "sold": 350 },
{ "genre": "Other", "sold": 150 },
],
"xField": 'genre',
"yField": 'sold',
"colorField": "genre",
"style": {
"radiusTopLeft": 10,
"radiusTopRight": 10,
},
}

charts(type="Column", options=options, key="streamlit-charts")
```

<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*aPxqSpQcsUQAAAAAAAAAAAAADmJ7AQ/original" width="640" alt="example">


## API

Now, There is only one API for `streamlit-charts`, named `charts`, see the `type | options` in [Ant Design Charts](https://ant-design-charts.antgroup.com/).

| Property | Description | Type | Default |
| -------- | --------------------------------------------------------------------------------------------------------------- | --------------------- | ------- |
| type | the chart type of the charts, eg: `Line、Column、Bar、Pie...` | `Str` | `Column` |
| options | the options for the visualization | `Options` | - |


## Development

- Building frontend code by running `npm run start` in fold `streamlit_charts/frontend`.
- Run the example by running `streamlit run streamlit_charts/__init__.py` with `_RELEASE = False`.


## License

MIT@[lxfu1](https://github.com/lxfu1).

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

streamlit-charts-0.1.1.tar.gz (5.0 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

streamlit_charts-0.1.1-py3-none-any.whl (4.9 kB view details)

Uploaded Python 3

File details

Details for the file streamlit-charts-0.1.1.tar.gz.

File metadata

  • Download URL: streamlit-charts-0.1.1.tar.gz
  • Upload date:
  • Size: 5.0 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/4.0.2 CPython/3.8.9

File hashes

Hashes for streamlit-charts-0.1.1.tar.gz
Algorithm Hash digest
SHA256 c174ab2b98d86a829c4cd33b7927c496ffa2d55c17efc18b82c9b22ef3db495e
MD5 e789a1ec3cbe149c09b731b65e3984fb
BLAKE2b-256 7896890a1eca0b96786715279fb90954a92ec5f48a2855006cc6f23a31f5a988

See more details on using hashes here.

File details

Details for the file streamlit_charts-0.1.1-py3-none-any.whl.

File metadata

File hashes

Hashes for streamlit_charts-0.1.1-py3-none-any.whl
Algorithm Hash digest
SHA256 cf8fb19344604b84f15b2a29a10f6c2cb328e562e30f76bd89341fd1448eafbd
MD5 12c31c24c754246aa2dcd374a11efa73
BLAKE2b-256 88ec14700756c56146bd442b564b8902a13dbada34beeafbd6f230975918f69c

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page