Line Chart

Description

Line chart shows how a given value changes over continuous intervals. It displays the series of data points (called markers) connected by lines segments.

It is the easiest visualization for the human mind to observe trends over time, understand patterns in data, quickly detect that something unusual happened. Multiple categories can be displayed at the same chart to compare the trend between different groups or products.

Category

  • Trend
  • Patterns
  • Comparison

Plot

The plot is a part of keen.io/charts package and can be used in React environment as standalone component.

Variations

  • Simple line chart - Neighboring markers are connected by straight lines. This type is the best when you need to show the precise measurements.

  • Spline line chart - Lines connecting the data points are interpolated to the smooth curves. This type can be used to empathize the general trend. When we want to observe the general trend, our brain smooths the lines itself. You can decrease the cognitive load by smoothing the chart for your viewer. However be aware that spline lines may disturb the perception of your detailed data. It may be perceived that there is more data between connected data points.

  • Step line chart - Data points are connected by straight horizontal and vertical lines. It is used to monitor sudden value changes.

  • Multi-series line chart - This type simply presents more than one line on the chart. It is useful variation to see how the set of metrics compare to each other in time.

  • Stacked line chart - Displays a set of line series on one chart that do not overlap or intersect. They are cumulative at each point.

API

Property Description Type Default
data Chart data Record<string, any> -
labelSelector Name of data object property used to create labels on axis string -
minValue Minimum value for axis number or “auto” “auto”
maxValue Maximum value for axis number or “auto” “auto”
keys Keys picked from data object used to generate lines string[] [“value”]
disabledKeys Keys that are disabled for rendering data series string[] []
curve Lines interpolation enum[linear, spline, step] “linear”
markRadius Mark radius number 4
strokeWidth Line thickness number 1
xScaleSettings X Scale settings ScaleSettings { type: ‘band’ }
yScaleSettings Y Scale settings ScaleSettings { precision: ‘month’, type: ‘time’ }
xAxisTitle Title for X Axis string -
yAxisTitle Title for Y Axis string -
gradientMode Gradient on/off boolean true
areaMode Area mode boolean false
groupMode Group mode enum[grouped, stacked] “grouped”
stackMode Stack mode enum[normal, percent] “normal”
theme Theme used for chart styling Theme Keen Theme
svgDimensions SVG height and width Dimension “auto”
margins SVG margins Margins { top: 50, right: 20, bottom: 50, left: 40 }

Theme

List of theme properties supported by Line Chart widget.

Property Description Type
colors Colors applied on bars string[]
axisX Axis X theme settings Axis
axisY Axis Y theme settings Axis
gridX Grid X theme settings Grid
girdY Grid Y theme settings Grid
tooltip Tooltip settings Tooltip

Composition

Line charts typically are horizontal. The horizontal x-axis displays continuous intervals, the vertical y-axis shows the measured values.

The line chart does not necessarily need to have a value axis origin always set to zero(in contrast to the bar chart). Values are represented by point along value scale, not through the size. Starting from zero may not present your data most effectively.

Choose the baseline that is best for your data. Remember to make it clear to the viewers that the baseline position does not represent zero by proper axis labeling.

Color

When you show many categories on a multi-series line chart it may be a good idea to use different colors for each of them.

Annotations

  • If you want to monitor the general trend, turn markers off to make the plot less busy visually. Without points, the chart focuses on the trend in the data. Individual observations are missed.
  • If you aim for more detailed representation of data add grid and markers. They increase the precision of judgment.
  • Be careful with the multi-series line chart. If there are too many overlapping lines, the chart may lose readability. If the lines are well separated then your chart should be clear.

Playground