streamlit-chart-js

Streamlit-ChartJS Component

Streamlit-ChartJS is a custom component to render Chart.js interactive charts in Streamlit! 🎈

Table of Contents

• Installation
• Getting Started
• Available Charts
  • Line Chart
  • Bar Chart
  • Stacked Bar Chart
  • Pie Chart
  • Donut Chart
  • Polar Area Chart
  • Radar Chart
  • Bubble Chart
  • Scatter Chart
• Available Parameters
• Contributing

Installation

You can install the component via pip:

pip install streamlit-chartjs

Getting Started

After installation, import st_chartjs in your Streamlit app. Here’s how you can quickly create a basic bar chart:

import streamlit as st
from streamlit_chartjs.st_chart_component import st_chartjs


bar_chart_data = {
    "labels": ["January", "February", "March", "April"],
    "datasets": [
        {
            "label": "Sales",
            "data": [10, 20, 30, 40],
            "borderWidth": 1,
        }
    ],
}

# Display the chart
st_chartjs(data=bar_chart_data, chart_type="bar", title="This is a Bar Chart")

Available Charts

Streamlit-ChartJS offers a diverse range of chart types for interactive data visualization. Refer to the below sections for example gifs and the corresponding code snippets for each chart type.

Line Chart

import streamlit as st
from streamlit_chartjs.st_chart_component import st_chartjs

line_chart_data = {
    "labels": ["January", "February", "March", "April", "May", "June", "July"],
    "datasets": [
        {
            "label": "Dataset 1",
            "data": [10, 20, 15, 30, 25, 40, 35],
            "backgroundColor": "rgba(255, 99, 132, 0.2)",
            "borderColor": "rgba(255, 99, 132, 1)",
            "borderWidth": 3,
            "fill": False,
        },
        {
            "label": "Dataset 2",
            "data": [250, 300, 200, 350, 400, 300, 450],
            "backgroundColor": "rgba(54, 162, 235, 0.2)",
            "borderColor": "rgba(54, 162, 235, 1)",
            "borderWidth": 3,
            "fill": False,
            "lineTension": 0.4,
        },
        {
            "label": "Dataset 3",
            "data": [1000.0, 833.33, 1166.67, 666.67, 1000.0, 1500.0, 1333.33],
            "backgroundColor": "rgba(75, 192, 192, 0.2)",
            "borderColor": "rgba(75, 192, 192, 1)",
            "borderWidth": 3,
            "fill": False,
            "lineTension": 0.2,
        },
    ],
}

st_chartjs(
    data=line_chart_data,
    chart_type="line",
    title="Line Chart",
    legend_position="bottom",
    x_axis_title="Months",
    y_axis_title="Growth Rate",
)

Bar Chart

import streamlit as st
from streamlit_chartjs.st_chart_component import st_chartjs

bar_chart_data = {
    "labels": ["January", "February", "March", "April"],
    "datasets": [
        {
            "label": "Dataset 1",
            "data": [65, 59, 80, 81],
            "backgroundColor": [
                "rgba(255, 99, 132, 0.2)",
                "rgba(54, 162, 235, 0.2)",
                "rgba(255, 206, 86, 0.2)",
                "rgba(75, 192, 192, 0.2)",
            ],
            "borderColor": [
                "rgba(255, 99, 132, 1)",
                "rgba(54, 162, 235, 1)",
                "rgba(255, 206, 86, 1)",
                "rgba(75, 192, 192, 1)",
            ],
            "borderWidth": 1,
        }
    ],
}

st_chartjs(
    data=bar_chart_data,
    chart_type="bar",
    title="Bar Chart",
    legend_position="bottom",
    x_axis_title="Months",
    y_axis_title="Sales Amount",
)

Stacked Bar Chart

import streamlit as st
from streamlit_chartjs.st_chart_component import st_chartjs

stacked_bar_data = {
    "labels": ["Q1", "Q2", "Q3", "Q4"],
    "datasets": [
        {
            "label": "Dataset 1",
            "data": [50, 60, 70, 60],
            "backgroundColor": "rgba(161, 189, 67, 0.5)",
        },
        {
            "label": "Dataset 2",
            "data": [50, 60, 70, 60],
            "backgroundColor": "rgba(255, 99, 132, 0.5)",
        },
        {
            "label": "Dataset 3",
            "data": [50, 60, 70, 60],
            "backgroundColor": "rgba(51, 238, 184, 0.5)",
        },
        {
            "label": "Dataset 4",
            "data": [30, 40, 60, 90],
            "backgroundColor": "rgba(54, 162, 235, 0.5)",
        },
    ],
}

st_chartjs(
    data=stacked_bar_data, chart_type="bar", title="Stacked Bar Chart", stacked=True)

Pie Chart

import streamlit as st
from streamlit_chartjs.st_chart_component import st_chartjs

pie_chart_data = {
    "labels": ["Green", "Purple", "Orange"],
    "datasets": [
        {
            "label": "Dataset 4",
            "data": [200, 150, 100],
            "backgroundColor": ["#4BC0C0", "#9966FF", "#FF9F40"],
            "hoverBackgroundColor": ["#4BC0C0", "#9966FF", "#FF9F40"],
        }
    ],
}
st_chartjs(data=pie_chart_data, chart_type="pie", title="Pie Chart", legend_position="bottom")

Donut Chart

import streamlit as st
from streamlit_chartjs.st_chart_component import st_chartjs

donut_chart_data = {
    "labels": ["Red", "Blue", "Yellow"],
    "datasets": [
        {
            "label": "Dataset 3",
            "data": [300, 50, 100],
            "backgroundColor": ["#FF6384", "#36A2EB", "#FFCE56"],
            "hoverBackgroundColor": ["#FF6384", "#36A2EB", "#FFCE56"],
        }
    ],
}
st_chartjs(data=donut_chart_data, chart_type="doughnut")

Polar Area Chart

import streamlit as st
from streamlit_chartjs.st_chart_component import st_chartjs

polar_area_chart_data = {
    "labels": ["Red", "Green", "Yellow", "Grey", "Blue"],
    "datasets": [{
        "data": [11, 16, 7, 3, 14],
        "backgroundColor": ["#FF6384", "#4BC0C0", "#FFCE56", "#E7E9ED", "#36A2EB"]
    }]
}

st_chartjs(
    data=polar_area_chart_data,
    chart_type="polarArea",
    title="Polar Area Chart",
    legend_position="bottom",
)

Radar Chart

import streamlit as st
from streamlit_chartjs.st_chart_component import st_chartjs

radar_chart_data = {
    "labels": ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
    "datasets": [
        {
            "label": "My First dataset",
            "backgroundColor": "rgba(179,181,198,0.2)",
            "borderColor": "rgba(179,181,198,1)",
            "pointBackgroundColor": "rgba(179,181,198,1)",
            "pointBorderColor": "#fff",
            "pointHoverBackgroundColor": "#fff",
            "pointHoverBorderColor": "rgba(179,181,198,1)",
            "data": [65, 59, 90, 81, 56, 55, 40],
        },
        {
            "label": "My Second dataset",
            "backgroundColor": "rgba(255

,99,132,0.2)",
            "borderColor": "rgba(255,99,132,1)",
            "pointBackgroundColor": "rgba(255,99,132,1)",
            "pointBorderColor": "#fff",
            "pointHoverBackgroundColor": "#fff",
            "pointHoverBorderColor": "rgba(255,99,132,1)",
            "data": [28, 48, 40, 19, 96, 27, 100],
        },
    ],
}

st_chartjs(
    data=radar_chart_data,
    chart_type="radar",
    title="Radar Chart",
    legend_position="bottom",
)

Bubble Chart

import streamlit as st
from streamlit_chartjs.st_chart_component import st_chartjs

# Data for a Bubble Chart
bubble_chart_data = {
    "datasets": [
        {
            "label": "Dataset 1",
            "data": [
                {"x": 20, "y": 30, "r": 15},
                {"x": 40, "y": 10, "r": 10},
                {"x": 25, "y": 25, "r": 20},
            ],
            "backgroundColor": "rgba(255, 99, 132, 0.6)"
        },
        {
            "label": "Dataset 2",
            "data": [
                {"x": 30, "y": 20, "r": 10},
                {"x": 20, "y": 30, "r": 20},
                {"x": 15, "y": 40, "r": 25},
            ],
            "backgroundColor": "rgba(54, 162, 235, 0.6)"
        }
    ]
}

st_chartjs(data=bubble_chart_data, chart_type="bubble", canvas_height=500, canvas_width=700)

Scatter Chart

import streamlit as st
from streamlit_chartjs.st_chart_component import st_chartjs

scatter_chart_data = {
    "datasets": [
        {
            "label": "Group A",
            "data": [
                {"x": 10, "y": 20},
                {"x": 15, "y": 10},
                {"x": 20, "y": 15},
            ],
            "backgroundColor": "rgba(255, 99, 132, 0.6)"
        },
        {
            "label": "Group B",
            "data": [
                {"x": 25, "y": 30},
                {"x": 30, "y": 25},
                {"x": 35, "y": 35},
            ],
            "backgroundColor": "rgba(54, 162, 235, 0.6)"
        }
    ]
}

st_chartjs(data=scatter_chart_data, chart_type="scatter", canvas_height=500, canvas_width=700)

Available Parameters

Streamlit-ChartJS offers various parameters to customize your charts extensively:

• data: The data for the chart, following the Chart.js data structure.
• chart_type: Type of chart you want to render (e.g., "bar", "line", "pie", "doughnut", "radar", "polarArea", "bubble", "scatter").
• canvas_width: Width of the chart canvas in pixels. Default is 700.
• canvas_height: Height of the chart canvas in pixels. Default is 700.
• title: Title of the chart. Default is "Custom Chart Title".
• legend_position: Position of the chart's legend. Options include "top", "left", "bottom", "right". Default is "top".
• x_axis_title: Title for the x-axis. Default is "Category".
• y_axis_title: Title for the y-axis. Default is "Value".
• stacked: A boolean to indicate whether the chart should be stacked. Applicable to "bar" chart types. Default is False.

These parameters allow you to tailor the chart appearance and functionality to fit your application's needs.

Contributing

I welcome contributions! Here’s how you can help:

• Report Bugs: Notice something off? Open an issue here.
• Suggest Features: Got a great idea? Share it as an issue on GitHub.
• Improve Documentation: Spot a typo or a confusing section? Your edits are welcome!
• Submit Pull Requests: Fixed something or added a feature? Fork the repo, make your changes, and submit a PR.

Your input helps make Streamlit-ChartJS even better! 🙌