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,196
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.6k
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 ...
- 71k
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,578
32
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.
- 429
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.6k
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 ...
- 458
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,578
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,415
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 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,310
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,783
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.3k
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.3k
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,781
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,...
- 31.1k
10
votes
Accepted
Displaying placeholder / skeleton screen for a (large) graph
Your placeholders need to be explicit enough to allow users understanding what they are waiting for during loading time.
Are we waiting for the chart lib to load ? data ? maybe the whole component ?
...
- 1,155
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.6k
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 ...
- 37.3k
9
votes
What data visualization fit my Air pollution app
My suggestion is about UX, rather than on UI and visualization.
Your job is to solve a problem, not make a picture. This is from the Three charts are all I need, as well as the following quote:
...
- 22.6k
9
votes
Displaying bar graph with large data point names on mobile screen
A couple of things you might want to be aware of, that if you stick to as a rule of thumb, generally guide mobile information flow in the right direction:
Try to keep font sizes around 14pt for ...
- 300
8
votes
Showing a large amount of trend-lines on a single graph
One nice approach can be to use a shaded area which covers the entire range of your data, with all of the lines overlaid. This can give an impression of trends without showing too much clutter.
Adding ...
- 177
6
votes
How to visualize data when one data series is significantly bigger than the others
How about discontinuing the y-axis, don't remember what the technique is called so couldn't find any image.
It involves using the saw line cutting the y-axis so that below the saw line, in your case, ...
- 5,299
Only top scored, non community-wiki answers of a minimum length are eligible