A dash component for CuteCharts

💡 Idea

chart.xkcd-react 📊 is an interesting visualization library written in React based on chart.xkcd, the chart style of chart.xkcd-react is so beautiful that I love it at first sight. 😍😍

There is no doubt that Modern JavaScript has more advantages in interaction as well as visual effects. Besides that, as we all know, Python 🐍 is an expressive language and is loved by data science community. To build data sciecne products the community love to use dash. I tried to combine both dashplotly with chart.xkcd-react ended up building the dash_cute_charts component for dash.

Get started with demo example:

git clone https://github.com/muntakim1/dash_cute_charts.git
Install Dash and its dependencies: https://dash.plotly.com/installation
Run python usage.py
Visit http://localhost:8050 in your web browser, Click here for the Live Demo

Usage 👨‍🏫

What’s new 🍭:

1. Added new charts (stacked,scatter and radarcharts)
2. Fixed some bugs.

Install

Install the dash-cute-charts from pypip using below command

pip install dash-cute-charts

Usage with Dash

import dash
import dash_html_components as html
from dash.dependencies import Input, Output

import dash_cute_charts

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        # Pie Chart
        dash_cute_charts.PieChart(
            id="pieChart",
            title="What Tim made of",
            dataset=[
                {
                    "data": [500, 200, 80, 90, 100],
                }
            ],
            labels=["a", "b", "e", "f", "g"],
            options=[
                {
                    "innerRadius": 0.5,
                }
            ],
        ),
        # Line Chart
        dash_cute_charts.LineChart(
            id="lineChart",
            title="Monthly income of an indie developer",
            xLabel="Month",
            yLabel="$ Dollors",
            labels=["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
            dataset=[
                {
                    "label": "Plan",
                    "data": [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000],
                },
                {
                    "label": "Reality",
                    "data": [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
                },
            ],
        ),
        # BarChart
        dash_cute_charts.BarChart(
            id="barchart",
            title="github stars VS patron number",
            dataset=[
                {
                    "data": [100, 2],
                }
            ],
            labels=["github stars", "patrons"],
            options=[{"yTickCount": 2}],
        ),
    ]
)


if __name__ == "__main__":
    app.run_server(debug=True)

Components 🧱

See COMPONENTS.md

Contributing

See CONTRIBUTING.md

Install dependencies

If you have selected install_dependencies during the prompt, you can skip this part.

Install npm packages
```
$ npm install
```
Create a virtual env and activate.
```
$ virtualenv venv
$ . venv/bin/activate
```
Note: venv\Scripts\activate for windows
Install python packages required to build components.
```
$ pip install -r requirements.txt
```
Install the python packages for testing (optional)
```
$ pip install -r tests/requirements.txt
```

Run code in a Python environment:
1. Build your code
```
$ npm run build
```
2. Run and modify the usage.py sample dash app:
```
$ python usage.py
```