Line Chart

Line Chart

The most common use case for line charts is to compare several data sets, or to show data over a period of time. As a rule of thumb, line charts are a great way to show continuous data over time. If you want to show and compare categorical data, you may consider using a bar chart.

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.

Jump to Line Chart or Single Line Chart

Line Chart

#example1

Single Line Chart

#example-2

Line Chart

#callout-1

  1. Horizontal Axis Labels: When visualizing data over a period of time, the horizontal axis labels display time
  2. Vertical Axis Labels: When visualizing data over a period of time, the vertical axis labels display values.
  3. Axis Tick Marks (optional): Major and minor tick marks on both axes may be shown.
  4. Grid Lines (optional):
    • Horizontal grid lines are recommended.
    • Vertical grid lines are not recommended.
  5. Line: - Interaction (optional): If supported, right clicking on an individual line will bring up a contextual menu with associated actions. - Data Point: Data points are visually represented as dots on the line. A user can view information related to a specific data point by hovering over it. To help the user see which point they are hovering, the dot expands and a vertical line is displayed. In addition, a tooltip should appear with the associated values for that specific point in time. - Color: For recommendations on line colors, see the Color Palette.
  6. Legend: It is recommended to include a legend to define the colors on the chart. On the line chart, may be left aligned and centered underneath the chart or left aligned and to the right of the chart. - Interactive Legend (optional): Clicking on a series in the legend should toggle the visibility of the series in the chart. Hovering over a series in the legend will highlight the blocks associated with that attribute.

PatternFly Core Example


Jump to Line Chart or Single Line Chart

Line Chart

Reference Markup

<script src="components/c3/c3.min.js"></script>
<script src="components/d3/d3.min.js"></script>
<div id="line-chart-3" class="line-chart-pf"></div>
<script>
  var lineChartDataColumns = [
    ['data1', 30, 200, 100, 400, 150, 250],
    ['data2', 50, 220, 310, 240, 115, 25],
    ['data3', 70, 100, 390, 295, 170, 220],
    ['data4', 10, 340, 30, 290, 35, 20],
    ['data5', 90, 150, 160, 165, 180, 5]
  ];
  var singleLineChartDataColumns = [
    ['data1', 30, 200, 100, 400, 150, 250]
  ];

  var c3ChartDefaults = $().c3ChartDefaults();
  var lineChartConfig = c3ChartDefaults.getDefaultLineConfig();
  lineChartConfig.bindto = '#line-chart-3';
  lineChartConfig.data = {
    columns: lineChartDataColumns,
    type: 'line'
  };
  var lineChart = c3.generate(lineChartConfig);
</script>

Single Line Chart

Reference Markup

<script src="components/c3/c3.min.js"></script>
<script src="components/d3/d3.min.js"></script>
<div id="donut-chart-4" class="line-chart-pf"></div>
<script>
  var lineChartDataColumns = [
    ['data1', 30, 200, 100, 400, 150, 250],
    ['data2', 50, 220, 310, 240, 115, 25],
    ['data3', 70, 100, 390, 295, 170, 220],
    ['data4', 10, 340, 30, 290, 35, 20],
    ['data5', 90, 150, 160, 165, 180, 5]
  ];
  var singleLineChartDataColumns = [
    ['data1', 30, 200, 100, 400, 150, 250]
  ];

  var singleLineChartConfig = c3ChartDefaults.getDefaultSingleLineConfig();
  singleLineChartConfig.bindto = '#donut-chart-4';
  singleLineChartConfig.data = {
    columns: singleLineChartDataColumns,
    type: 'line'
  };
  var singleLineChart = c3.generate(singleLineChartConfig);
</script>