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
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
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
- The area fill is presented below the data line.
- The data area fill color conforms with the PatternFly color palette: https://www.patternfly.org/styles/color-palette/
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.
- 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.