1

I'm trying to mock up a dashboard widget with a bar chart comparing values in a rolling year-over-year timeframe. By it's nature, this chart will usually overlap three calendar years. Example: Year-over-year of January is 2024 vs 2023, but December is 2023 vs 2022.

I'm attempting to give clarity on what years are being compared.

Here's an image with 2 scenarios using what I've created so far. I added a year/year sub-label to show the relevant years when the year changes or at the start of the chart. Something about it feels awkward – especially when the year/hear label is at the end, like it would be right now.

Maybe someone knows a clearer way to convey this?

(Note: I'm fully aware that a line chart might be better. Worth a conversation with the client - but these are largely finite 'month' values, not continuous numbers.)

enter image description here

I attempted to apply @Morco 's suggestion to my use case, but I suspect it still makes things confusing, because of the color shift. This is why I tried using 'previous year' instead of a specific year. I won't have a full 3 years data, as it is deleted and unavailable. I only have a rolling 2 year span. See below: enter image description here

1
  • After reading your explanation, your first example looks valid to me. It allows to see upward and downward movements of the bars in a timespan of multiple years. It all depends on the purpose of the chart so maybe you need to elaborate on that and why the current design feels awkward.
    – jazZRo
    Jan 7 at 9:14

1 Answer 1

0

I think you are overcomplicating the chart.

A basic chart that compares 3 years would have:

  1. Three types of bars, one for each year
  2. Time displayed as months on X axis
  3. Values displayed as steps on Y axis
  4. Values for the visible bars
  5. A legend with years and bar types

For example:

enter image description here


Regarding your mockup, my suggestions would be:

  1. Display the actual year instead of "Previous year" in order to make it obvious and timeproof.

  2. Show all bars for every month where you have data (1-3 bars for each month).

  3. Don't duplicate the months, because it's harder to compare all years.

  4. Show the values for each bar if users need to compare them.

  5. Add extra information or UI elements only if that adds extra value to users.

  6. Remember that not everyone has graph literacy, so keep things as simple and obvious as possible.


Update #1:

If you only have 2 columns at all times and you want to avoid the visual confusion related to left/right positioning of each year, you can create a visual transition between the years.

For example, if you use a ghost bar, it can look like this:

enter image description here

4
  • There's not a scenario where I would have three years of January compared. It's only 2 columns compared. So I'd be concerned that using your approach, I would have a confusing table. Let's imagine 4 colors, 2022, 2023, 2024 + current building month. If I was comparing April 2023 through March 2024, to it's previous year, I end up shifting colors of bars for Jan, Feb, March... and it makes a clean comparison a little more confusing. I'll edit the initial post to add an image of what I'm describing.
    – turpentyne
    Jan 6 at 20:36
  • I added update #1 to my answer. Also, I don't see the point of highlighting the current month if it's always the last one.
    – Morco
    Jan 7 at 1:46
  • Re: the last month - It's highlighted because that's the month not complete yet, so numbers are still being calculated.
    – turpentyne
    Jan 7 at 3:11
  • It might be better to call it "in progress" or "partial" in order to make more sense for the chart itself. Words like "current" impose some time constraints on the viewer of the chart.
    – Morco
    Jan 7 at 8:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.