SlopeGraph for QlikView (D3SlopeGraph QlikView Extension)

Some weeks ago the chart type “Slope Graph”, invented by Eward Tufte in 1983, was first brought to my attention.

When I first saw it I thought that it would be quite easy to bring this chart also to the QlikView world. But after some research I realized that Slopegrahps have some drawbacks which are quite tricky to solve.

I have found quite a dozen of nice implementations out there but none of them was really satisfying me. So this little project was a perfect playground for me to understand challenges when creating chart-visualizations better. It really was the first project where I did not only adapt existing visualizations based on D3 to be used in QlikView, instead I created a new implementation of Slopegraphs in D3 (by combining several existing approaches).

Here is the result:

D3SlopeGraph QlikView Extension

Some Theory about Slopegraphs

Edward Tufte states: “Slopegraphs compare changes over time for a list of nouns located on an ordinal or interval scale” and he also first published and example in his book “The Visual Display of Quantitative Information” in 1983:

Tufte, Edward. The Visual Display of Quantitative Information. Cheshire, Connecticut: Graphics Press; 1983; p. 158

Slopegraph Example by Edward Tufte

Advantages and Scenarios for Using SlopeGraph

  • Slopegraphs are very minimal visualizations, there is no unnecessary information
  • It is easy to capture changes over time
  • The same type of data is shown on the left and right side using the same units of measurement
  • “Any time you’d use a line chart to show a progression of univariate data among multiple actors over time, you might have a good candidate for a SlopeGraph” (source)


The most important and relevant drawback of using Slopegraphs is that if you have a lot of dimensions with similar values the visualization becomes messy very quickly (see some screenshots below demonstrating this).

My Approach for Slopegrahps

To overcome the above described drawback I have chosen a combination of several approaches based on the default visualization:

Default Visulization

Handling Conflicting Label
In the above displayed example you’ll see that three dimensions on the left side share the same value for 2012. Instead of displaying them upon each other the dimensions are shown one below the other.

Emphasizing Dimensions
If you hover a dimension, the current dimension will be emphasized / highlighted

Highlighting hovered dimensions

Displaying a Summary
While hovering a dimension a tooltip will be displayed with a short summary. This is especially useful if you have a lot of dimensions with little movement from one to the other time period:

ToolTip for hovered dimensions

Text Fadout for Colliding Labels
But there is still the issue that if you have a lot of dimensions with similar values that they will collide:

Label Collisions

There are many suggestions how this can be solved, I have chosen an interactive one where conflicting labels will be faded out if you hover a dimension:

Conflicting Labels - Resolution

Still to Many Dimensions & Messy Visualization
There are situation where all the above described solutions are not sufficient. Especially if you are using a lot of dimensions this can happen.

Messy result because of conflicting labels

There are two possible solutions:

  • Use a different chart type
  • Increase either the size of the chart object (extension) or increase the size of the plotting area. By doing so you’ll see a vertical scroll-bar, but certainly, the user has to scroll …

Same data as above but with a larger plotting area (+ scroll-bars)

Caution for Touch-Devices
It is at this point important to mention that the approaches I have chosen are not really a perfect fit for mobile devices (especially if you think of touching devices which at the same time excludes hovering items …). I’ll have to investigate on this …


In my opinion it is really worth giving this type of chart a try (and I would not be surprised if we’ll see Slopegraphs much more often in the future). But this type of chart is also not a “generalist”, usage and configuration has to be considered with caution.

Download Extension, Demo + Source Code

The solution called “D3SlopeGraph QlikView Extension” is published under MIT-license and free to use (but still, I am happy to hear your feedback!!!)

Issues, Bugs, Wishes

If you have any issues please post them here.

Additional Articles on the Web

Bookmark and Share

and tagged , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.