Posted by & filed under Data Visualization.

Overview

A “Single Area Chart” is used to provide metrics for a single data set. While similar to a line chart, in both form and function, it offers an area fill for visual emphasis. The area fill below the line also functions to indicate cumulative data.

  • The most common use case for area charts is to show trending over a continuous scale (usually time.)
  • Use this instead of a line chart when you need to provide more visual emphasis than a simple line chart would offer. For more information about line charts, see: https://www.patternfly.org/patterns/line-chart/#single-line-chart

The Proposal

Note: The Area chart design and implementation is already available in PatternFly. The intent of this blog post is to discuss and present usage guidelines for the existing design. See: https://www.patternfly.org/patterns/area-charts/#single-area-chart

Description

Area Chart

1) Chart Title

  • Provide a title that describes the chart.

2) Data Line

  • A solid line is used at the top of the area chart to show a total value.
  • Use straight lines (linear interpolation), if it’s important to display more precise data values.

3) Interactive Data Points

  • Specific data points may be represented by dots on the line portion of the area chart.
  • To help the user see which point they are hovering over, the dot expands and a vertical line is displayed.
  • Present a tooltip providing associated values for that specific data point.

4) Data Area Fill

5) Chart Lines

  • Axis lines:
      • The “x” axis is commonly used for time values, and the “y” axis is used for metric values.
      • Use consistent spacing for the axis line label intervals and tick marks.
      • Tick marks are optional.   
  • Grid lines:
      • Horizontal grid lines (Recommended): The lines help users associate a point in the chart with a value on the axis.
      • Vertical Grid lines (Optional): While helpful, in some contexts they might create visual noise.

Legend (Optional) * For an example, see: https://www.patternfly.org/patterns/line-chart/#line-chart

  • A legend associates the data set with a color mapping.
  • The legend may be used to provide detailed information about the data set.
  • Position the legend below, or to the right of the chart.

Open Issues

  • Line smoothing: Is the line interpolation configurable?

What’s not covered in the current design but will be considered in future sprints:

  • Multi-line area chart (“Area Chart”)
  • Stacked area charts.
  • Representing breaks in data within the chart.
  • Customization for line interpolation.

5 Responses to ““Area chart: Coloring within the lines.””

  1. Thanks for posting this! A couple questions:
    – Would there be labels for the axes themselves? If so, how would they be oriented to the chart?
    – Are the only points that are hoverable the dots that appear on the line?

    Reply
    • Hi Sj, thanks for checking it out!
      RE: Axis labels? The reference design/implementation did not include general x/y axis labels that apply to the entire axis. I think that’s a great recommendation for a design enhancement.
      RE: Hover-able? – It appears that any point along the vertical grid line where the dot sits is hover-able. Areas between the dots do not appear to be hover-able.
      * You can can check out the implemented example and reference markup, directly at: https://www.patternfly.org/patterns/area-charts/#single-area-chart

      Reply
  2. Matt Carrano

    It would help to provide some guidance on when to use an area chart vs. a line chart. They are very similar and I’m not clear on when I’s want to use one or the other. Possibly provide some examples or area chart usage?

    Reply
    • Thanks for your feedback Matt! I have some info about that in the second sentence:
      “While similar to a line chart, in both form and function, it offers an area fill for visual emphasis. The area fill below the line also functions to indicate cumulative data.”
      Given your feedback, I’m thinking we should call those out as bullet points in the pattern documentation so they won’t get missed. Do you think that will help?

      Reply

Leave a Reply

(will not be published)