Most of the time, overlapped objects mean either that the designer is not done yet or that he does not hold functionality, usability, or aesthetics in high regard (and evidently did not read this book). However, there is a rarely seen third option: the charts were meticulously located one on top of the other so that together they display information in a way that cannot be achieved otherwise.
Range charts are built with two components—a main trend displayed in the foreground and a colored area in the background that serves as the context. It is commonly used to monitor exchange rates, stock markets, and bond pricing due to the completeness of the vision that it can convey. The main benefit of this visualization is that it can show the minimum, maximum, and average values and, by comparison, the spread between its limits, all at the same time.
Example: Average temperature per hour.
Relevant features: Overlapping charts.
To create such a chart, perform the following steps:
- Create a new line chart using
Hour_Rangeas the dimension. - Add the following expressions:
Label
Definition
Line Style
Min
min(Temperature)'<W.1>'Avg
avg(Temperature)Max
max(Temperature)'<W.1>' - In the Presentation tab, unselect the Show Legend box.
- As we are only displaying one type of metric (temperatures), a monochromatic palette will work neatly. You can choose an intense color for the main expression (
Avg) and lighten it up for the secondary ones (Min/Max). So, go to the Colors tab and create the chart's palette:
- As you can see, by this point the only element missing is the colored area between the thin lines. This effect will be created by overlapping the two charts. However, in order to make it work, both objects must be formatted in the exact same way. Therefore, unlike any of the previous recipes, we need to do the entire tuning of the chart in the middle of the process. Take some time to adjust the titles, axes, and fonts as you prefer.
- Copy and paste the object. From now on, we will call them the Foreground and Background charts, respectively.
- Open the Foreground chart's properties and set the Background Transparency to 100% in the Colors tab, as in the following image:
- We will leave the Foreground chart aside for the moment and focus on its Background twin. Open the Properties window and delete the second expression (
Avg). - In the Style tab, select the fourth Look: Area Chart.
- As you can see, the area chart stacks all the expressions, so the top value will not represent the highest temperature, but the sum of the highest and the lowest values for that
Hour. Therefore, we need to change the definition of theMaxexpression (which is now the second one) to:max(Temperature) - min(Temperature)
- Now, the two areas visually correspond to the Foreground chart. In the Colors tab, set the Transparency value of the first tile to 100% so that the area next to the axis becomes invisible.
- The second tile will look great if we use the same color applied in the Foreground chart. However, it should be even lighter so that it would not steal much of the user's attention.
- When using this kind of trick, it is vital to remember to adjust the layers so that the order of the objects does not change. Go to the Layout tab in the Background chart and set Custom Layer to
10. - In the Foreground chart, set Custom Layer to
15. - Now, the moment of truth: overlap both objects using the alignment buttons in the design bar.
- Now, you are the proud owner of a range chart!
Undeniably, overlapping objects is a dangerous bet. Though it can help you create visually appealing dashboards, it is rarely necessary to overload a dashboard with colors and shapes. However, sometimes the situation calls for extreme measures. These are some examples of visualizations built with overlapping objects.
This is a little twist from the last recipe. You can create a crusted line chart by overlapping an area chart and a traditional line chart with a broader width.
