Leaderboard

🧭 Overview

A leaderboard shows ranking among categories. It consists of a series of bars representing a quantitative metric for comparable entities. This viz allows to quickly benchmark all entities.

📊 Example Use Case

• Top-selling products or services

• User activity rankings

• Department or team performance comparison

• Most accessed content or features

• Metric-based competition or gamification tracking

⭐ Key Features

• Categorize by Bars: Helps compare subgroups independently within the same chart.

• Order Bars Within Categories: Enhances readability and comparison inside groupings.

• Enable Drill-down: Supports exploratory analysis without leaving the chart context.

• Show Rank for Bars: Makes positions explicit without relying solely on visual length.

Configuration

New Leaderboard

Learn how to create a leaderboard using the new design with this step-by-step guide. Explore the interactive walkthrough below to get started quickly, then dive into the full configuration reference table for in-depth details.

Chart Configuration Step-by-Step

	Option	How does it work?
Category
	Bar category	The bar category corresponds to a column in your dataset, such as 'Product Type'.
	Category by bars	Organizes bars into separate categories or groupings, allowing segmented ranking.
	Enable drill-down	Allows users to click on a bar to explore more detailed or related data.
	Show rank for bars	Displays a numeric rank for each bar based on its value position.
Value
	Bar height	The bar height represents a value from your dataset. You can select an aggregation method from the menu, which may vary depending on the chart type.
	Precision	Precision determines the level of detail in how your values are displayed. By default, measures use a .2f format, meaning they are shown with two decimal places. Example: A value of 3.14159 will be displayed as 3.14 when using .2f formatting.
	Unit	Unit represents the total quantity or category being measured for a KPI. It defines what the values correspond to, providing context for better interpretation.
	Sentiment	Four different sentiment statuses (positive, warning, negative, neutral) can be used to color bars, enhancing visual distinction. Note: Sentiments can be customized in the app theme.
	Reverse height order	Inverts the direction of bar heights, so lower values appear higher or vice versa.
Additional parameters
	ID	Unique chart Id
	Add complementary value	The complementary value is displayed in the data label, providing additional context and making it easier for viewers to interpret the data at a glance. It is possible to add a precision, an unit and a sentiment.
	Add user chart guide	Lead your chart viewers through the narrative of your data.
Chart performance		Technical performance

Style Configuration

	Option	How does it work?
Bars
	Bars	Customize the bar color to align with your branding preferences.

Legacy Leaderboard

This page provides a step-by-step guide for creating a leaderboard using the legacy design.

*Mandatory parameters

Section	Option	Configuration Tutorial
	Dataset*	Select the dataset used by the chart
	Label*	Your label of choice
	Value*	Your value of choice
Legend	Display Legend	Toggle the legend display
Legend	Additional Info	Display contextual in-depth info
Legend	Bar Selected By Default	Select a bar by default
Sort	Sort Bars	Select ascending or descending order
Sort	Display Rank For Sorted Bars	Display the rank of each sorted bars
Variation	Variation	Display a variation badge next to the value based on a column containing the variations
Variation	Variation Legend	Display a legend for your variation
Variation	Hide Empty Variation	Hide variation badge if the value is empty
Groups	Groups	Breakdown labels into groups based on a column containing the groups
Groups	Groups Order	Order group based on a column, on an advanced order or a custom order
Groups	Groups Additional Info	Add a legend to your groups
Groups	Recycle Groups Colors	Reuse groups colors when chart data changes (filters changes for example)
Packs	Packs	Group labels together based on a column
Packs	Display Pack Names	Display or not the packs names
Packs	Packs Order	Order pack based on a column, on an advanced order or a custom order
Drill	Drill	Click on labels and see children details
Drill	Drill Children Order	Order children based on a column, on an advanced order or a custom order
Enrich Chart	Average	Add a vertical average bar based on a value or a column
Enrich Chart	Average Legend	Display a legend for your average bar
Enrich Chart	Additional Values	Display additional values next to the main one (will not be displayed on mobile)
Enrich Chart	Target	Represent target but use it with caution as it is preferable to use the bullet tile to represent targets
Enrich Chart	Sparklines	See the Sparklines section
Display	Scale	Define the bars scale using two bounds
Display	Size	Define the chart size when having multiple ones
Display	Mobile Size	Define the chart size when having multiple ones on mobile
Display	Custom CSS Class	Set a custom CSS class to target this specific chart with CSS
Tutorial	ID	Enter an ID. Change the ID to display the tutorial again. All tutorials with the same ID will be displayed only once
Tutorial	Message	Enter your message | This will be displayed to your users
Tutorial	Always display this tutorial	By default the tutorial is shown once only