dash-cute-charts 0.0.4
A cutechart integration for DashPlotly
License: MIT

## 💡 Idea

![](https://img.shields.io/badge/-ReactJS-orange) ![](https://img.shields.io/badge/-PYTHON-green) ![](https://img.shields.io/badge/-DASH-red) ![](https://img.shields.io/github/issues/muntakim1/dash_cute_charts) [![GitHub license](https://img.shields.io/github/license/muntakim1/dash_cute_charts)](https://github.com/muntakim1/dash_cute_charts/blob/main/LICENSE) [![GitHub stars](https://img.shields.io/github/stars/muntakim1/dash_cute_charts)](https://github.com/muntakim1/dash_cute_charts/stargazers) [![GitHub forks](https://img.shields.io/github/forks/muntakim1/dash_cute_charts)](https://github.com/muntakim1/dash_cute_charts/network)

[chart.xkcd-react](https://www.npmjs.com/package/chart.xkcd-react) 📊 is an interesting visualization library written in React based on chart.xkcd, the chart style of [chart.xkcd-react](https://www.npmjs.com/package/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](https://dash.plotly.com/). I tried to combine both dashplotly with [chart.xkcd-react](https://www.npmjs.com/package/chart.xkcd-react) ended up building the [dash_cute_charts](https://github.com/muntakim1/dash_cute_charts) component for dash.

![image](/demo-assets/20190819131226.gif)

Get started with demo example:

1. `git clone https://github.com/muntakim1/dash_cute_charts.git`
2. Install Dash and its dependencies: https://dash.plotly.com/installation
3. Run `python usage.py`
4. Visit http://localhost:8050 in your web browser, Click here for the [Live Demo](https://dash-cute-chart-example.herokuapp.com/)

## 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

```python
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](./COMPONENTS.md)

## Contributing

See [CONTRIBUTING.md](./CONTRIBUTING.md)

### Install dependencies

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

1. Install npm packages
    ```
    $ npm install
    ```
2. Create a virtual env and activate.

    ```
    $ virtualenv venv
    $ . venv/bin/activate
    ```

    _Note: venv\Scripts\activate for windows_

3. Install python packages required to build components.
    ```
    $ pip install -r requirements.txt
    ```
4. 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
        ```

## Maintainer 🤵

![](/demo-assets/rsz_profile.jpg)

Muntakimur Rahaman

IBM Certified Data Scientist

website: [www.muntakim.xyz](www.muntakim.xyz)

## Credits 🙏

[chart.xkcd-react](https://www.npmjs.com/package/chart.xkcd-react)
[chart.xkcd](https://github.com/timqian/chart.xkcd)

## 📃 License

MIT [©muntakim](https://github.com/muntakim1/)