Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
When building dashboards that involve any kind of leaderboard or competitive comparison, it’s always good to show how rankings shift over time. Not just "who's #1 right now," but the full story: who climbed, who dropped, when the shift happened.
Qlik Sense doesn't have a native bump chart. The usual workaround is a line chart with pre-calculated ranks, but I wanted to push this further and add some more interactivity and options.
The idea for creating this extension came after doing some updates on the Formula1 web app which uses a native D3.js chart, so I wanted to transfer that code over to a Qlik Sense extension that can be reused in other apps.
The extension makes it easy for you. You just add two dimensions and one measure, and it takes care of everything else: ranking, time sorting, labels, hover highlighting, and field selections. The object properties will let you customize it to your needs.
In this post I'll walk through what it does, how it's structured, and how you can use it for various use cases.
Github Repo: https://github.com/olim-dev/qlik-bump-chart
What is a Bump Chart?
A bump chart shows how entities change position relative to each other over time. Each entity gets a colored line. Rank #1 sits at the top. As rankings shift, lines cross, and you immediately see who's moving up, who's falling, and when an overtake happens.
What can you do with this extension?
- Track rankings over any time dimension (quarters, months, weeks, laps)
- Highlight top performers, bottom performers, or biggest movers automatically
- Toggle between rank mode (auto-calculated) and position mode (raw measure as Y-axis)
- Replay the line-drawing animation
- Click labels or lines to make Qlik selections
- Customize everything: line style, dot size, colors, labels, grid, tooltips
Use Cases
The pattern is always the same: entities, time periods, and a measure.
- Sales: rep leaderboard over months
- Marketing: brand awareness tracking, campaign effectiveness over quarters
- Finance: fund performance rankings
- HR: employee performance trends, team productivity rankings
- Operations: supplier quality rankings, efficiency metric evolution
- Sports: league standings, player rankings across a season, F1 race position over laps
How to set it up
Add two dimensions and one measure:
- Dimension 1: the entity to rank (Product, Sales Rep, Team, Driver)
- Dimension 2: the time period (Quarter, Month, Week, Lap)
- Measure: the value that determines rank (Sum(Sales), Avg(Score), Max(Position))
I have attached a Text file with some sample datasets that you can inline-load in a new app to test it.
Quick tour of the object properties
The property panel has clear labels for which dimension goes on which axis. Here are the sections that matter most:
Chart Settings: Maximum Entities (2-30, sweet spot is 8-15), Rank Direction (highest or lowest value = #1), Line Style (smooth, straight, step).
Position Mode: Instead of auto-calculating ranks, use the raw measure value as the Y position. Great for race data where position is already known.
Labels: Position them on the right, left, or both sides. Rank change indicators (triangle arrows) show how many spots an entity moved. Clicking a label triggers a Qlik selection.
Highlight: Automatically highlight top N, bottom N, or biggest movers with a configurable glow color.
Colors: Six built-in palettes (Vibrant, Qlik Classic, Category 10, Extended 20, Cool, Warm) plus a custom background color.
Animation: Toggle transitions on/off, adjust duration (100-1500ms), and a "Replay Animation" button to re-run the line-drawing effect.
Selections: Toggle selections on/off
The extension folder structure
qlik-bump-chart/
qlik-bump-chart.qext Extension definitions
qlik-bump-chart.js Main entry (Qlik lifecycle, paint, selections)
qlik-bump-chart-properties.js Property panel definition
qlik-bump-chart-renderer.js D3 rendering engine
qlik-bump-chart-data.js Data processing, ranking, time sorting
qlik-bump-chart-constants.js Defaults, palettes, timing values
qlik-bump-chart-style.css All CSS
lib/
d3.v7.min.js D3.js v7
- The main JS handles the Qlik lifecycle.
- The data module processes the hypercube, sorts time periods, and calculates ranks.
- The renderer draws everything with D3.
- The properties file defines the right-panel UI.
- The constants file holds all defaults, color palettes, and timing values in one place.
Tips
- Limit entities to 8-15 for readability. More than that and lines become hard to follow.
- Use Highlight Mode to draw attention to the story (top performers, biggest movers).
- Position Mode is great for pre-calculated position data like F1 race results.
- Pair with a table or KPI object nearby for exact values at glance.
Let me know in the comments if you have any questions or feedback!
Thanks for reading.
Ouadie