A component that displays Vega-Lite/Altair charts.

Generate a chart using Altair and pass it via state; it’ll be converted to Vega-Lite specification.

state["my_chart"] = chart

Afterwards, you can reference the chart in the specification using the syntax @{my_chart}.

Alternatively, you can work with Vega-Lite directly.

​
Fields

NameTypeDescriptionOptions
Chart specificationObjectVega-Lite chart specification. Pass a Vega Altair chart using state or paste a JSON specification.-
Custom CSS classesTextCSS classes, separated by spaces. You can define classes in custom stylesheets.-

​
Low code usage

This component can be declared directly in Python, using backend-driven UI.

ui.VegaLiteChart(content={
        "spec": {}, # Union[Dict, str] 
        "cssClasses": "", # str 
    }
)

​
Reference