year-over-year bar chart years

Question

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.)

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:

Answer 1

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:

---

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:

Answer 2

From the above discussions, seems like you want to be super clear to the user. As well as you don't want to think of information on hover etc.

Therefore I suggest the old-school, straightforward way of just labelling it upfront. But ya, it comes with its own pros (clear and familiar) and cons (not good for all screen sizes, less aesthetic etc.. you know.)