Sparkline

A sparkline is a small chart that helps users to analyze data and understand trends and patterns (e.g. CPU Utilization in an environment). Sparklines are commonly used in tables, reports and dashboards.

Example

Less than one year remaining

Description

sparkline_callout2
  1. Sparkline: The sparkline is blue with a light blue fill, which helps to visually define the x axis.
  2. Tooltip: Use a tooltip on hover to display additional information about exact points on the sparkline such as values or percentages. A vertical line and dot may be added to accentuate the user’s hover point.

Example

Less than one year remaining

Reference Markup

<script src="components/c3/c3.min.js"></script>
<script src="components/d3/d3.min.js"></script>
<div id="sparkline-chart-2" class="chart-pf-sparkline"></div>
<div>Less than one year remaining</div>
<script>
  var c3ChartDefaults = $().c3ChartDefaults();
  var sparklineChartConfig = c3ChartDefaults.getDefaultSparklineConfig();
  sparklineChartConfig.bindto = '#sparkline-chart-2';
  sparklineChartConfig.data = {
    columns: [
      ['%', 10, 14, 12, 20, 31, 27, 44, 36, 52, 55, 62, 68, 69, 88, 74, 88, 91],
    ],
    type: 'area'
  };
  var sparklineChart = c3.generate(sparklineChartConfig);
</script>