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