Quick Start Guide

This guide will get you started with Streamlit Lightweight Charts Pro in minutes.

Basic Usage

  1. Import the library:

import streamlit as st
from streamlit_lightweight_charts_pro import renderChart
import pandas as pd

  1. Prepare your data:

# Create sample data
data = pd.DataFrame({
    'time': pd.date_range('2023-01-01', periods=100),
    'value': range(100, 200)
})

  1. Render the chart:

renderChart(data, title="My First Chart", height=400)

Complete Example

import streamlit as st
from streamlit_lightweight_charts_pro import renderChart
import pandas as pd
import numpy as np

st.title("Financial Chart Example")

# Generate sample candlestick data
dates = pd.date_range('2023-01-01', periods=100)
np.random.seed(42)

data = pd.DataFrame({
    'time': dates,
    'open': 100 + np.cumsum(np.random.randn(100)),
    'high': 100 + np.cumsum(np.random.randn(100)) + 2,
    'low': 100 + np.cumsum(np.random.randn(100)) - 2,
    'close': 100 + np.cumsum(np.random.randn(100)),
})

# Render candlestick chart
renderChart(
    data,
    title="Stock Price",
    height=500,
    seriesType='candlestick'
)

Multiple Series

Add multiple series to a single chart:

from streamlit_lightweight_charts_pro import renderChart

# Main price data
price_data = pd.DataFrame({
    'time': pd.date_range('2023-01-01', periods=100),
    'value': 100 + np.cumsum(np.random.randn(100))
})

# Volume data
volume_data = pd.DataFrame({
    'time': pd.date_range('2023-01-01', periods=100),
    'value': np.random.randint(1000, 10000, 100)
})

renderChart(
    price_data,
    title="Price with Volume",
    height=500,
    additionalSeries=[
        {'data': volume_data, 'type': 'histogram'}
    ]
)

Interactive Features

Handle user interactions:

result = renderChart(
    data,
    title="Interactive Chart",
    height=400,
    key="my_chart"
)

if result:
    st.write("Chart state:", result)

Customization

Customize chart appearance:

renderChart(
    data,
    title="Customized Chart",
    height=600,
    seriesType='area',
    lineColor='#2962FF',
    topColor='rgba(41, 98, 255, 0.3)',
    bottomColor='rgba(41, 98, 255, 0.0)',
    lineWidth=2
)

Common Patterns

Pattern 1: Real-time Updates

import time

placeholder = st.empty()

while True:
    # Fetch new data
    new_data = fetch_latest_data()

    # Update chart
    with placeholder:
        renderChart(new_data, height=400)

    time.sleep(1)

Pattern 2: User Controls

# Sidebar controls
chart_type = st.sidebar.selectbox(
    "Chart Type",
    ["line", "area", "candlestick"]
)

height = st.sidebar.slider("Height", 300, 800, 400)

# Render with user settings
renderChart(
    data,
    seriesType=chart_type,
    height=height
)

Next Steps