Sparklines in Big Number charts

Mode's Big Number charts are great for communicating high-level trends. Adding a sparkline to a Big Number chart shows your audience how the metric has performed over time.

Add a sparkline to a Big Number chart

The example below shows a Big Number chart revealing the count of San Francisco crime incidents weekly, and features a sparkline showing the trend over time.

View Mode Analysis

Click Powered by Mode to duplicate this report and add a sparkline to your Big Numbers chart. Learn more about using HTML to customize your reports.

Add the stylesheet link and script tag to the top of the HTML:

<link rel="stylesheet" href="https://mode.github.io/alamode/alamode.min.css">
<script src="https://mode.github.io/alamode/alamode.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.js'></script>

This tag calls back to an open-source library called alamode.js, which provides an easy way to build some of our users' favorite visualizations.

Add the customizable snippet at the bottom of the HTML:

<script>
  
  alamode.bigNumberSparkline(
	{
  	  "chart_id":"chart_52fb8c96df3f",
  	  "query_name": "Query 1",
  	  "value_column": "crime_incidents",
  	  "x_axis_column": "week"
	}  
  )
  
</script>

1. chart_id: The ID of the Big Number chart you want to turn into a link. You’ll find this ID in the pre-populated HTML code in a line that looks like this: <mode-chart id="chart_52fb8c96df3f" dataset="dataset" options="chart_options"></mode-chart>.
2. query_name: The name of the query that returns the Big Number chart data. If you update the name of the query, you’ll need to update it here as well.
3. value_column: The dataset column that contains the y-axis values of your metric.
4. x_axis_column: The dataset column that returns the values on your chart’s x-axis.