55
votes
What kind of chart is this?
This is an absolute 'No no' in creating charts. This is a very bad way of representing data, to make it look like Donut chart but non-functional. It doesn't matter if the thickness is proportional to ...
- 3,186
53
votes
Background for black and white chart
White is giving the appearance as the absence of data. Data visualization is not about what you intend, it's about what they perceive.
Black and white have connotations as opposites. Some cultural ...
- 24.4k
38
votes
How to indicate that something isn't to scale?
You could:
Remove the axis line entirely. If the diagram is not to scale, then the axis line itself is the confounding/confusing element of the UX that is causing failed perception. Use simple labels ...
- 693
35
votes
Background for black and white chart
Stacked bar charts often use a darker colour at the bottom and lighter colour at the top. Bolder darker colours look strong and more supportive of what's on top. Your chart bars looks top heavy, with ...
- 70.8k
34
votes
What kind of chart is this?
The most approximate chart to the provided images is a Donut Chart. Refer to this link about how to use donut charts.
- 5,106
33
votes
How should I visualize the average of two bars in a bar chart?
You could show the average in a large bar, and put the separate categories inside in smaller bars.
If you use Excel and use two axes, make sure they both have the same scale.
- 439
30
votes
Graph with overlapping labels
You have several visualization problems to solve in one graph. How are the users interacting with this?
Your question is focused mostly on labels, however, you also mentioned showing when an element ...
- 24.4k
27
votes
Showing a large amount of trend-lines on a single graph
For a quick look, rendering all the lines with low opacity allows seeing the most common values and any outliers quickly:
Then you can provide a way to select groups or specific measurements to ...
- 459
23
votes
Accepted
How to indicate that something isn't to scale?
Start by figuring out what you want to communicate
Since you are (rightly) looking for a reasoned, non-hacky way to lay this out, you can start with first principles.
1. Understand the layout pattern
...
- 40.7k
22
votes
How to indicate that something isn't to scale?
I have graduated as a Petroleum Engineer, so perhaps I can help you here.
This is a domain specific problem and the right solution depends on the kind of equipment you're using in the oil well. Let ...
- 3,420
22
votes
Background for black and white chart
If black and white maps to the colors of the products, then consider outlining the white bar to add some contrast.
Some Tips: What to consider when creating stacked column charts
- 5,106
21
votes
What kind of chart is this?
Topologically, it looks the same as a Spider chart with 4 variables, but each variable is displayed as a quarter-circle instead of a point.
- 1,826
19
votes
Accepted
Graph with overlapping labels
If it is absolutely necessary to see all the amounts in detail all the time you could go with a variation of your second solution but still keep the figures in one column. like this
Alternatively you ...
- 3,135
18
votes
What kind of chart is this?
That looks like a form of polar area diagram.
Also known as a ‘rose diagram’, this is almost 200 years old, and was popularised by Florence Nightingale to highlight death rates in different months:
...
- 311
16
votes
Accepted
Pie Chart VS Doughnut Chart: When to use each?
A doughnut (or donut) chart serves a similar purpose to a pie chart, except that it is able to show more than one set of data. Think of it as a pie chart with an additional dimension.
See the example ...
- 703
15
votes
How should I visualize the average of two bars in a bar chart?
If you really just mean the average of the two numbers, why not just leave the gray bars out, with nothing in their place? It's pretty easy to estimate visually. I think that's why there are few ...
- 301
14
votes
How to indicate that something isn't to scale?
Broken axes are only useful if they are intended to be used sparingly.
If, as you say, the axis is broken everywhere, it makes more sense to use a table instead describing the relevant points.
+---...
- 270
14
votes
How should I visualize the average of two bars in a bar chart?
A simple idea would be to show the average as a line graph, like this:
- 3,269
14
votes
How should I visualize the average of two bars in a bar chart?
Your second one seems fine to me to be honest. It's the least extra 'ink', and it's how single series bar charts show averages, you're just doing it for the items at each x value. You can see an ...
- 1,773
13
votes
Is there a visual way to represent drag capability?
You can add a scrollbar or preview chart to clearly indicate that users can zoom in/out and interact with the chart. This makes instructional text unnecessary. See the following demos.
In addition ...
- 336
11
votes
Accepted
UI design for showing charts
A business intel tool at it's best will allow views into an organization that fit multiple personas, roles, and modes of analysis. The specific views are almost infinitely variable, but they often ...
- 21.2k
11
votes
How to show negative values in a pie chart?
Use the right visualization
Pie charts represent constituents of a whole. As you've discovered, this doesn't work when numbers can go into the red.
Use bar or line charts for more flexible (and ...
- 21.2k
11
votes
Accepted
Is there a visual way to represent drag capability?
When the cursor enters the graph area, change its symbol to a "move cursor" :
EDIT :
An alternative solution is use this icon when the mouse enters the graph area :
and this icon when user clicks ...
- 7,761
11
votes
Showing a large amount of trend-lines on a single graph
What's the use case here, what are you users looking for?
I would try to focus on the insights that need to be derived from this graph, and see if there's a way to isolate them. E.g. just the outliers,...
- 30.5k
10
votes
Accepted
Is multistability a good thing on a donut?
UX Horror: Making users think
Here are some reasons why it's bad:
Color is not helping:
It's very hard to tell just by looking at the Contacts chart if blue/green portion matches the number, there ...
- 10.4k
10
votes
Accepted
What kind of chart is this?
Since the attributes are not distribution, you could show the initial score, and place a severity breakdown below. Allow hovertips and details for drilldown.
Instead of focusing on the current chart (...
- 24.4k
9
votes
How to visualize data when one data series is significantly bigger than the others
As others have suggested, I'd suggest using logarithmic scales.
I recreated your chart as close as possible with logarithmic scales using ZingChart, a JavaScript charting library. There are no ...
- 191
9
votes
Accepted
How to show negative values in a pie chart?
If by some reason you really have to show negative values in a pie chart (which in our project we do), you may consider using the following style:
In the above chart, the summation of all values is ...
- 122
9
votes
Accepted
How to present a wide chart on mobile devices?
Your best bet in this case is to make the left column fixed and allow scroll on the remaining columns. You can see an example (and script to do it) at DataTables Fixed Columns.
On top of this, since ...
- 33.9k
Only top scored, non community-wiki answers of a minimum length are eligible