Custom Charts
Custom charts are available in Beta for those that want additional customization and an extended library of charts. The charts are powered by vega-lite - the link will take you to some example galleries of what you can build using this powerful charting library. This includes heat maps, bubble plots, box plots and more.
Custom visualizations are a Beta feature.
This means we have limited documentation and support. We may also change the way these options work in the future.
Known limitations
These new Vega-lite powered charts offer enhanced flexibility and a broader range of visualizations, but there are important limitations to be aware of, particularly concerning interactivity and dashboard integration like:
- Drill-Down Functionality: The ability to drill into metrics by grouping them with dimensions (e.g., “Drill by”) is not available in Custom Charts.
- View Underlying Data: Users cannot click on data points within Custom Charts to view the underlying records that compose those data points.
- Cross-Filtering: Interactive filtering across dashboard tiles by selecting elements within a chart (also known as cross-filtering) is not supported in Custom Charts.
Getting Started
The general steps to create a custom chart are as follows:
- Return the data you need for your chart as normal using the Lightdash UI to select relevant dimensions and metrics.
- Head to the chart configuration options, in the drop down, you should see an option for custom charts as long as it has been enabled.
- Select a template to load a sample configuration for the chart selected.
- Adjust the config to your needs!
Below we describe the different templates, and what kind of data works best.
Vega templates
Bar chart
You can already do this with presets in Lightdash, but it’s a simple example you should be able to get working quickly.
- This chart works best for a simple
string or date
dimension and anumeric
metric
Here is a more complete example for bar charts with tooltips
and pivot
Heatmaps
Heatmaps can currently only be created using the Custom Charts feature.
- This chart works best for a simple
string or date
dimension and astring
dimension, using anumeric
metric ascolor
You should output a heatmap with the standard Vega-Lite settings that looks like the one below:
Bubble Plots
Bubble plots build on top of standard scatter plot visualizations, by allowing you to adjust the size of a given point based on the output of a field. Here’s one looking at some Healthcare data.
- This chart works best for a simple
string or date
dimension and anumeric
metric for they
axis and anothernumeric
metric for the size
You should output a bubble plot with the standard Vega-Lite settings that looks like the one below:
Funnel charts
Funnel charts are ideal for visualizing a flow or process where the quantity decreases step-by-step, such as sales pipelines, conversion rates, or order processes. Each stage is represented as a bar whose width reflects the corresponding value.
This chart works best when you have a categorical dimension (like a status or step name) and a numeric metric (such as order amount or count) to measure at each step.
- This chart works best for a simple
string
dimension ( like a status or step name) and anumeric
metric (such as order amount or count) to measure at each step.
Make sure you don’t have any extra dimensions, otherwise the funnel chart will not get generated correctly.
This is just a sample of the template. Funnel chart configurations are a bit more complex than other charts, so we recommend loading the template directly in Lightdash instead of copying this code manually. The template will automatically map your data fields into the configuration.
You should output a funnel chart with the standard Vega-Lite settings that looks like the one below:
Waterfall charts
Waterfall charts are used to show how an initial value is affected by a series of positive and negative changes over time or across different categories. They are perfect for visualizing how different factors contribute to a total, like revenue changes, customer growth, or budget breakdowns.
Each bar represents a step: increases are shown in one color (e.g., green), decreases in another (e.g., red), and the final total in a third (e.g., blue).
- This chart works best with a
string or date dimension
for the x-axis (like a year or stage) and twonumeric metrics
for the y-axis: one representing the starting point and the other representing the ending point. The difference between these two values defines the height and direction (increase or decrease) of each bar. - Additionally, you could use a
string dimension
to color the bars
You should output a waterfall chart with the standard Vega-Lite settings that looks like the one below:
Map charts
Map charts are perfect for visualizing data that has geographic coordinates, such as customer locations, sales regions, or shipment routes. They combine a background map (usually countries, states, or regions) with your data points overlaid as markers.
- This chart works best when you have
latitude and longitude fields
(you can use table calculations for that too) to plot the points on the map, and optionally anumeric metric
to adjust the size of each point (like total sales or number of customers).
In this example, the base world map is drawn using a TopoJSON file of countries, and data points are plotted as circles, with their size based on the total order amount.
You should output a map chart with the standard Vega-Lite settings that looks like the one below:
To load additional maps, you can specify a full URL on the data layer, and adjust the projection if needed, for example here is the code for a detailed map of United States:
It will give you something like this map:
You can find more examples on the Vega lite official website.