Custom Charts

Vanna 2.0 provides flexible chart creation using Plotly and Vega-Lite specifications.

Chart Component

Create interactive visualizations using the ChartComponent:

from vanna.components.rich import ChartComponent

chart = ChartComponent(
    type="plotly",  # or "vega-lite"
    spec={...},  # Chart specification
    title="Sales Trends",
    description="Monthly revenue breakdown"
)

Plotly Charts

Plotly provides a wide range of interactive chart types with excellent defaults.

Bar Chart

chart = ChartComponent(
    type="plotly",
    spec={
        'data': [{
            'x': ['Q1', 'Q2', 'Q3', 'Q4'],
            'y': [12500, 15000, 13500, 18000],
            'type': 'bar',
            'name': 'Revenue',
            'marker': {'color': '#2D5F8D'}
        }],
        'layout': {
            'title': 'Quarterly Revenue',
            'xaxis': {'title': 'Quarter'},
            'yaxis': {'title': 'Revenue ($)'},
            'hovermode': 'closest'
        }
    },
    title="2024 Revenue"
)

Line Chart

chart = ChartComponent(
    type="plotly",
    spec={
        'data': [{
            'x': ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
            'y': [10, 15, 13, 17, 20],
            'type': 'scatter',
            'mode': 'lines+markers',
            'name': 'Conversions'
        }],
        'layout': {
            'title': 'Monthly Conversions',
            'xaxis': {'title': 'Month'},
            'yaxis': {'title': 'Count'}
        }
    }
)

Multi-Series Chart

chart = ChartComponent(
    type="plotly",
    spec={
        'data': [
            {
                'x': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
                'y': [12, 15, 14, 18, 20],
                'type': 'scatter',
                'mode': 'lines',
                'name': 'Product A'
            },
            {
                'x': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
                'y': [8, 10, 12, 11, 14],
                'type': 'scatter',
                'mode': 'lines',
                'name': 'Product B'
            }
        ],
        'layout': {
            'title': 'Weekly Sales by Product',
            'legend': {'x': 0, 'y': 1}
        }
    }
)

Pie Chart

chart = ChartComponent(
    type="plotly",
    spec={
        'data': [{
            'labels': ['Desktop', 'Mobile', 'Tablet'],
            'values': [45, 35, 20],
            'type': 'pie',
            'hole': 0.4  # Donut chart
        }],
        'layout': {
            'title': 'Traffic by Device Type'
        }
    }
)

Scatter Plot

chart = ChartComponent(
    type="plotly",
    spec={
        'data': [{
            'x': [1, 2, 3, 4, 5],
            'y': [10, 20, 15, 25, 30],
            'mode': 'markers',
            'type': 'scatter',
            'marker': {
                'size': [10, 20, 30, 40, 50],
                'color': [10, 20, 15, 25, 30],
                'colorscale': 'Viridis',
                'showscale': True
            }
        }],
        'layout': {
            'title': 'Correlation Analysis'
        }
    }
)

Vega-Lite Charts

Vega-Lite uses a declarative grammar for creating visualizations:

Bar Chart

chart = ChartComponent(
    type="vega-lite",
    spec={
        'mark': 'bar',
        'data': {
            'values': [
                {'category': 'A', 'value': 28},
                {'category': 'B', 'value': 55},
                {'category': 'C', 'value': 43}
            ]
        },
        'encoding': {
            'x': {'field': 'category', 'type': 'nominal'},
            'y': {'field': 'value', 'type': 'quantitative'}
        }
    }
)

Time Series

chart = ChartComponent(
    type="vega-lite",
    spec={
        'mark': 'line',
        'data': {
            'values': [
                {'date': '2024-01-01', 'value': 100},
                {'date': '2024-01-02', 'value': 150},
                {'date': '2024-01-03', 'value': 120}
            ]
        },
        'encoding': {
            'x': {
                'field': 'date',
                'type': 'temporal',
                'axis': {'title': 'Date'}
            },
            'y': {
                'field': 'value',
                'type': 'quantitative',
                'axis': {'title': 'Value'}
            }
        }
    }
)

Creating Charts in Tools

The VisualizeDataTool generates charts automatically from CSV data:

from vanna.tools import VisualizeDataTool

tool = VisualizeDataTool(file_system=file_system)

# The LLM can call this tool to create charts
# Args: filename, chart_type, x_column, y_column, title

Custom Visualization Tool

Create a tool that generates custom charts:

from vanna.core.tool import Tool, ToolContext, ToolResult
from vanna.components import UiComponent, ChartComponent
from pydantic import BaseModel

class ChartArgs(BaseModel):
    data: List[Dict[str, Any]]
    x_field: str
    y_field: str
    chart_type: str = "bar"

class CustomChartTool(Tool[ChartArgs]):
    @property
    def name(self) -> str:
        return "create_custom_chart"
    
    @property
    def description(self) -> str:
        return "Create a custom interactive chart from data"
    
    def get_args_schema(self):
        return ChartArgs
    
    async def execute(self, context: ToolContext, args: ChartArgs) -> ToolResult:
        # Build Plotly spec
        spec = {
            'data': [{
                'x': [row[args.x_field] for row in args.data],
                'y': [row[args.y_field] for row in args.data],
                'type': args.chart_type
            }],
            'layout': {
                'xaxis': {'title': args.x_field},
                'yaxis': {'title': args.y_field}
            }
        }
        
        chart = ChartComponent(
            type="plotly",
            spec=spec,
            title=f"{args.y_field} by {args.x_field}"
        )
        
        return ToolResult(
            success=True,
            result_for_llm=f"Created {args.chart_type} chart",
            ui_component=UiComponent(
                rich_component=chart,
                simple_component=SimpleTextComponent(text="Chart created")
            )
        )

Advanced Plotly Features

Subplots

from plotly.subplots import make_subplots
import plotly.graph_objects as go

fig = make_subplots(
    rows=2, cols=1,
    subplot_titles=('Revenue', 'Profit')
)

fig.add_trace(
    go.Bar(x=['Q1', 'Q2', 'Q3'], y=[100, 150, 120]),
    row=1, col=1
)

fig.add_trace(
    go.Scatter(x=['Q1', 'Q2', 'Q3'], y=[30, 45, 35]),
    row=2, col=1
)

chart = ChartComponent(
    type="plotly",
    spec=fig.to_dict()
)

Interactive Features

spec = {
    'data': [{
        'x': data['x'],
        'y': data['y'],
        'type': 'scatter',
        'mode': 'markers',
        'marker': {'size': 10},
        'hovertemplate': '<b>%{text}</b><br>Value: %{y}<extra></extra>',
        'text': data['labels']
    }],
    'layout': {
        'hovermode': 'closest',
        'clickmode': 'event+select',
        'dragmode': 'zoom'
    }
}

Best Practices

1. Choose the right chart type - Match visualization to data type
2. Keep it simple - Don’t overcomplicate visualizations
3. Use color intentionally - Highlight important data
4. Add clear labels - Title, axis labels, legends
5. Make it interactive - Enable hover, zoom, pan
6. Consider colorblind users - Use accessible color schemes
7. Optimize for mobile - Charts should be responsive

See Also

• Built-in Tools
• Custom Tools
• Web UI Overview