Leaderboard

Purpose & Application

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.

📝 For example, I want to know which of my regions is performing best?

The leaderboard is good when there are more than 10 categories to compare.

It can also help compare up to 3 KPIs for each of these categories.

Key features

What makes this chart a killer story?

• On the fly ranking! You have to click on the arrow to filter according to the variation, otherwise you might miss it. It’s good to see best/worst performer for a given period, but what about identifying the best/worst evolution from last period? With our smooth UX, you’ll see right away the ranks changes.

France is my top selling country in 2019, but is only improving by 0.001% versus last year, while Germany is progressing: +36.6% versus last year.

• Smooth drill functionality to get a deeper level of analysis 🔎.

• Average column can be used to make a vertical line appear, so that you can compare your bars to the overall average.

My best shop has sold 300K€ of cheese this year, how is it going comparing to the average of all my different shops?

• Sparklines are the variation end-game boss ⚔️. It allows you to show your user a X years / months / whatever evolution as a sparkline on the right side of each bar.

I want to have a global vision of the performance of Bordeaux’s 🍷 shop, right from its opening.

• Colors coding add some colors to your chart 🎨 which can be a great way to help decision makers to focus on what’s important.

I have several shops by region, and I want to be able to have both an overview and a drill down option.

• Additional values are available for both single bars or groups, and allows your App Builder to display complementary informations within the legend of the leaderboard.

I’ve sold 200K€ of candies 🍭 in 2019, but what is the associated margin? I can add it as an additional value that will be displayed when the user will click on a bar.

Configuration

*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