Posted by & filed under Data Visualization.

This blog addresses the initial design for the line chart pattern in PatternFly.  We are specifically interested in finding out expectations for interactions.

* How would you expect the user to interact with the line chart?
* How would you expect the info tip to behave?

Please leave comments with any questions or suggestions you may have!

The most common use case for line charts is to compare several data sets, or to show data over a period of time.

Multiple lines on the same chart allow the user to visualize relationships between varying data sets, such as correlated events, similarities or unexpected differences.  We recommend displaying no more than 6 lines on a single graph to avoid confusion.


Axis Labels & Tick Marks

When the use case is visualizing data over a period of time, the horizontal axis represents time values and the vertical axis represents values.  Axis labels are typically shown on both axis, and have associated major tick marks.  Minor tick marks are a useful tool for the user to be able to estimate values.

Grid Lines

Horizontal grid lines are recommended, since they help the user visualize the value.  Vertical grid lines are unnecessary when visualizing data over a period of time.


For recommendations on line colors, see the PatternFly Color Palette.  Points can optionally be shown to represent the data points on the line.

Info Tips

We suggest that an info tip be shown, including the time value associated with the data points along with each series name and data point


Some applications may allow the user to perform actions associated with a line.  In this case, rIght clicking on a line could bring up a contextual menu with associated actions.

Zooming in and out within the chart could be accomplished with a mouse or by changing a an associated time filter.  This topic will not be covered in the initial round of design.


PatternFly legends have already been discussed in both the Donut Chart and Bar Chart conceptual design and

Data Points

In the initial round of design, we are not covering these topics:

* Handling missing data points
* Handling outlier data points

2 Responses to “Line Charts : Visualizing data over a period of time”

  1. When should we use a line chart vs. a vertical bar chart? Line charts seem superior for showing trends, but there may be other tradeoffs. Line charts can sometimes be misleading as they infer linear interpolation between data points. This is not always representative of actual values between points. For this reason, I would only expect info tips to be placed on the datapoints themselves, unless there is meaning in returning values for the intervening values.

  2. @Matt, I think that makes sense. I’m working to update the documentation to address your comments. Here’s what I’ve got now:

    “The most common use case for line charts is to compare several data sets, or to show data over a period of time. Line charts are successful at showing smaller changes that may exist. For larger changes, you might want to consider using a bar chart.”

    The word bar chart would link to the bar chart page. Additionally, I’ve requested that the bar chart documentation also be updated to point back to the line chart. Do you think the following provides the clarification you are looking for?

    Regarding the data points, I agree and can add that clarification to the documentation.


Leave a Reply

(will not be published)