Description

Easily view trends in data over a period of time (e.g.: rising sales and large changes over time).
The Y axis shows numeric values and the X axis represents some key measurements (usually time).
Line charts are clear and easy to understand since you can see the specific trend for individual data group. Area charts are representing a volume especially as the part of the whole or when demonstrating the gap between variables.

Basic Flow

<< Relevant only for patterns that have a more complex flow than the typical control (e.g. drag & drop) >>

Types

Type	Usage	Image
Line chart
Area chart
Chart with Stacked/Grouped (upto 100%), Overlapping area charts

Usage & Behavior

General guidelines

Easily view trends in data over a period of time (e.g.: rising sales and large changes over time).
Line chart enables enables comparing trend of multiple variables while area chart demonstrate the difference between them.

Line chart

enables comparing trend of multiple variables.
enables discussing trends over a certain time.
The Y axis shows numeric values and the X axis represents some key measurements (usually time).
Clear and easy to understand since you can see the specific trend for individual data group.
Useful when you need to compare multiple values line is better, or to show different data groups, or easily show positive or negative relationships between two or more variables.
When more than 2 areas overlapping it’s not readable (even while using transparency).
If your goal is to let readers understand the distribution of your selected data, or how a data group performed within a certain time period.
Useful for knowing general tendency and some other related details in your values.

Area chart

Area charts have a close pattern to line charts.
However, the room/gap between each line and the X axis is filled with a certain color, which demonstrate the difference between the displayed variables.
Very suitable for showing part-to-whole details.
Ideal for indicating the change among different data sets.
If your goals include the composition of some aspects of the data.
We have two basic categories: stacked and 100% stacked charts.

Overlapping Area charts

<<TBD rephrase>> Similar to grouped bar charts, overlapping bar charts are used to represent a comparison between two categories on the basis of multiple variables. But that’s not all, it’s specifically used when one variable is a part of another variable.

<<Show real example - WFM>>

Overlapping Line charts

Area - Line charts interactions

<<TBD convert to LUX>>

Structure

<<Describe the different parts that structure the component. See example: Numeric stepper structure >>

Placement and Positioning

<<Where should the component be located on the screen. See example: Pagination placement and positioning>>

Default State

<<When there is more than one state for control or area. Including default values> see example: Numeric stepper default state >>

Content

<<Including labels, microcopy, number of items, order of items etc… See example: Buttons content >>

Internal Logic

<<if there is a certain mechanism that cannot be separated from the component. See example: Data tables internal logic >>

<<use Click target to describe the interaction>>
<<TBD - add a simple example of tooltip>>
Example from Queue analytics for overlay area chart

States

<<Remove non-related states or use NA to emphasize the component don’t have that state. See Text fields states >>

State	Image	Comment
Regular
Hover
Active
Selected
Selected, Hover
Disabled
Read Only
Error
Warning
Focused
Focused, Hover
Focused, Selected

Interaction

<<for example, how to change value – type, arrows, use slider. See example: Numeric stepper interaction>>

Validations and errors

<<Show images for Errors and warnings. See example: Radio button validations and errors>>

Transitions

<<Where possible describe shortly and demonstrate transitions or animations of the component pattern with animated GIF>>

Best practices

Use Line chart:

for showing comparisons, distributions, or trends between continuous data sets.

Don’t use

<…>

General:

You could try solid lines instead of straight lines.
Make sure the height of your individual line does not beyond the normal range. Hence try not to fill the full screen of your chart, instead, leave some room at the top.
You should not add too many lines to show your purpose.

Use Area chart:

for summation relations for more than two different data groups.

Don’t use

<…>

General:

Do not insert too many data categories (should better no more than five data groups).
Try to highlight the most important data group of your resources.
Avoid very light or very close colors for your data groups. Make sure all of your details in the chart do not fade into the background.

Future Version (TBD)

< Edge cases, uncertain aspects, incomplete description>

<…>
<…>

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

Focus management

	Text field	Drop-down
	<<Images with Focus>>	<<Images with Focus>>
Tab	<<Description >>
Space
Enter
Esc
Arrows

Focus regions

1st level regions

<<Image>>

1st level	2nd level	3rd level

Design

Zeplin link	Screen thumbnail
<<Short Zeplin link. You Use this >>	<<Screen with 200 width>>

Code

<<a box containing the code - when there is no code to present use the Coming Soon GIF>>

To delete afterwards:

https://uxdesign.cc/guide-to-data-visualization-comparison-part-1-678382ceef00

Timeline Chart (new)