Custom Visualizations in AI/BI Dashboards: Build a Pareto Chart with Vega-Lite

pstyld — Mon, 03 Aug 2026 19:50:51 GMT

Need a visualization your standard AI/BI dashboard widgets can't create? Databricks AI/BI custom visualizations let you use Vega-Lite to build highly tailored charts. Learn how to craft a dynamic Pareto analysis with automated sorting, dynamic labels, background shading and Genie-assisted code enhancements.

Re: Custom Visualizations in AI/BI Dashboards: Build a Pareto Chart with Vega-Lite

hschimanski — Thu, 06 Aug 2026 22:12:35 GMT

Super cool to see Vega Lite to create custom visuals in Databricks dashboards! One thing I am missing, which is key of interactive dashboards: Can you also click and mark something on the Vega Lite custom visual which is then used to filter or highlight in other standard visuals or tables of the dashboard? Is that maybe on your roadmap for custom visuals?

Re: Custom Visualizations in AI/BI Dashboards: Build a Pareto Chart with Vega-Lite

pstyld — Tue, 11 Aug 2026 14:12:38 GMT

Great question @hschimanski

Here is the doc for it: Filter other widgets on selection.

There are some requirements listed in the doc. Here is the updated vega lite spec from this blog that uses cross filtering.

A few key points:

params goes inside the layer with the clickable mark, not at the root of the layered spec
fields must reference the field names from your widget's Fields config
Only dimension fields work (not aggregated measures)

To test it, try this.
1. Create a new bar chart widget (or any widget you want) that uses the following:

X axis - defect_category
Y axis - SUM(defect_count)

2. Then update the vega lite in the custom viz with this:

{ "$schema": "https://vega.github.io/schema/vega-lite/v6.json", "width": "container", "height": "container", "data": { "name": "databricks_query" }, "encoding": { "x": { "field": "defect_category", "type": "nominal", "sort": { "op": "min", "field": "sort_order", "order": "ascending" }, "axis": { "title": "Defect category", "labelAngle": -40 } } }, "layer": [ { "transform": [ { "filter": "datum.pareto_group === 'Key Issue Drivers'" } ], "mark": { "type": "rect", "color": "#FF5F46", "opacity": 0.15 } }, { "params": [ { "name": "databricks_mark_selection", "select": { "type": "point", "fields": [ "defect_category" ] } } ], "mark": { "type": "bar", "width": { "band": 0.8 }, "stroke": null }, "encoding": { "y": { "field": "defect_count", "type": "quantitative", "axis": { "title": "Defect count" } }, "color": { "field": "pareto_group", "type": "nominal", "scale": { "domain": [ "Key Issue Drivers", "Minor Issues", "Cumulative %" ], "range": [ "#FF5F46", "#C4CCD6", "#1B5162" ] }, "legend": { "title": null, "orient": "top" } }, "fillOpacity": { "condition": { "param": "databricks_mark_selection", "value": 1 }, "value": 0.4 }, "stroke": { "condition": { "param": "databricks_mark_selection", "empty": false, "value": { "expr": "colors.markHighlightColor" } }, "value": null }, "strokeWidth": { "condition": { "param": "databricks_mark_selection", "empty": false, "value": 2 }, "value": 0 } } }, { "layer": [ { "mark": { "type": "area", "color": "#1B5162", "opacity": 0.05, "line": false }, "encoding": { "y": { "field": "cumulative_percent", "type": "quantitative", "axis": { "title": "Cumulative %", "orient": "right" } } } }, { "mark": { "type": "line", "point": { "size": 80, "filled": true } }, "encoding": { "y": { "field": "cumulative_percent", "type": "quantitative" }, "color": { "datum": "Cumulative %", "type": "nominal" } } }, { "transform": [ { "calculate": "round(datum.cumulative_percent) + '%'", "as": "cum_label" } ], "mark": { "type": "text", "dy": -12, "fontSize": 12, "fontWeight": "bold", "color": "#1B5162" }, "encoding": { "y": { "field": "cumulative_percent", "type": "quantitative" }, "text": { "field": "cum_label", "type": "nominal" } } }, { "mark": { "type": "rule", "color": "#0b2026", "strokeDash": [ 6, 4 ], "size": 2 }, "encoding": { "x": null, "y": { "datum": 80 } } }, { "transform": [ { "filter": "datum.defect_category === 'Label Error'" } ], "mark": { "type": "text", "text": "80% of defects", "align": "center", "baseline": "bottom", "dy": -1, "fontSize": 13, "fontWeight": "bold", "color": "#0b2026" }, "encoding": { "y": { "datum": 80 } } }, { "transform": [ { "filter": "datum.pareto_group === 'Key Issue Drivers'" }, { "joinaggregate": [ { "op": "max", "field": "sort_order", "as": "max_rank" } ] }, { "filter": "datum.sort_order === round((1 + datum.max_rank) / 2)" } ], "mark": { "type": "text", "text": "Fix these first", "align": "center", "baseline": "middle", "fontSize": 15, "fontWeight": "bold", "color": "#98102A" }, "encoding": { "y": { "datum": 92 } } }, { "transform": [ { "calculate": "datum.pareto_group === 'Key Issue Drivers' ? 1 : 0", "as": "is_kd" }, { "calculate": "datum.pareto_group === 'Key Issue Drivers' ? datum.cumulative_percent : 0", "as": "kd_cum_val" }, { "joinaggregate": [ { "op": "count", "as": "total_cats" }, { "op": "sum", "field": "is_kd", "as": "kd_count" }, { "op": "max", "field": "kd_cum_val", "as": "kd_cum" } ] }, { "filter": "datum.sort_order === round(datum.total_cats * 0.7)" }, { "calculate": "datum.kd_count + ' of ' + datum.total_cats + ' categories drive ' + round(datum.kd_cum) + '% of all defects'", "as": "summary" } ], "mark": { "type": "text", "align": "center", "baseline": "middle", "fontSize": 15, "fontWeight": "bold", "color": "#1B3139" }, "encoding": { "y": { "datum": 55 }, "text": { "field": "summary", "type": "nominal" } } } ] } ], "resolve": { "scale": { "y": "independent" } }, "config": { "autosize": { "type": "fit", "contains": "padding" } } }

Example

article Custom Visualizations in AI/BI Dashboards: Build a Pareto Chart with Vega-Lite in Technical Blog

Custom Visualizations in AI/BI Dashboards: Build a Pareto Chart with Vega-Lite

Re: Custom Visualizations in AI/BI Dashboards: Build a Pareto Chart with Vega-Lite

Re: Custom Visualizations in AI/BI Dashboards: Build a Pareto Chart with Vega-Lite