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
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
Last updated