Displaying overlapping user data reflecting the status of an inventory in a horizontal stacked bar chart
I have an app in which users can track items. The app will flag when there are issues with items:
Warnings (orange UI colour)
- Low stock
- Expiring this month
Problems (red UI colour)
- Out of stock
- Expired
Items may have both a warning and a problem (e.g. an item with low stock that is expired).
There is a simple summary chart to summarise their inventory to the user.
This summarises 15 items; 1 has only a problem, 3 have only a warning, and 2 have both. The rest have no issues. Here the items with both are shown with overlapping orange and red lines. I am concerned that it looks confusing to have a separate number for the combined section, even though the numbers all add to the total.
Another option is to simplify it and show any items that have a problem as red (including those that also have a warning), and then show in orange those that only have warnings.
I think this is simpler and easier to see at a glance, but does not convey the full information. This might be acceptable as problems (red) are likely to be of more interest to the user than warnings (orange).
I would be grateful for advice on which provides the best user experience, or ways in which either could be improved.