Chart annotations

Note: Chart annotations only work for legacy charts (including line, line+bar, and area charts).

If your organization started with Mode after July 12, 2017, you might not have access to legacy charts and chart annotations. Instead, check out our tips for adding text to any report here.

Sometimes a chart isn't enough to clearly communicate the data on its own. Annotations are helpful for showing when key events occurred, especially when they have a noticeable impact on the data. You can use chart annotations to indicate when business changes happened (such as a new product launch) or highlight seasonal events like holidays.

The line chart below of weekly San Francisco Bike Share trips includes four clear dips. Adding annotations allows the reader to instantly understand that these dips are associated with major holidays, and likely no cause for concern.

View Mode Analysis

Click Powered by Mode to duplicate this example and add annotations to your own charts. Learn more about using HTML to customize your reports.L to customize your reports.

Annotate charts

Once you've added a chart to your report, you can add annotations with the following steps.

Add the stylesheet links and script tags to the top of the HTML:

<link rel="stylesheet" href="//rawgithub.com/Caged/d3-tip/master/examples/example-styles.css">
<link rel="stylesheet" href="https://mode.github.io/alamode/alamode.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js"></script>
<script src="https://mode.github.io/alamode/alamode.min.js"></script>

Add the customizable snippet at the bottom of the HTML:

<script>

alamode.chartAnnotations(
  {
	chart_id: "chart_27ff7ecf3359",
	query_name: "Trips",
	x_axis_column: "week",
	comment_values: ["2013-11-25","2014-11-24","2013-12-23","2014-12-22"],
	comments: ["Thanksgiving","Thanksgiving","Xmas","Xmas"],
	orientations: ["v","v","v","v"]
  }
)

</script>

You can customize each chart's annotations by editing the parameters in the snippet:

• chart_id: The ID of the Mode chart you want to add annotations to. You'll find this ID in the pre-populated HTML code in a line that looks like this: <mode-chart id="chart_27ff7ecf3359" dataset="dataset" options="chart_options"></mode-chart>.
• query_name: The name of the query that returns the chart's dataset. If you update the name of the query, you’ll need to update it here as well.
• x_axis_column: The dataset column that returns the values on your chart's x-axis.
• group_by: If you're grouping by a column to create your chart, this should be the name of the column you're grouping by. Note that if a series on your chart isn't present for every x-value, the annotation may appear in the wrong place.
• comment_values: An array of x-axis values that define where you want to place your annotations. Note that these values must be in the same format as your raw query results, which you can access by clicking Display Table in the left sidebar of the Query Editor.
• comments: An array of annotations to display. The annotations will be displayed with their corresponding x-axis values.
• orientations: An array of orientations for each annotations. Annotations can be either vertical or horizontal. Use v for vertical annotations; use h for horizontal annotations. If you want to add a horizontal annotation to a chart with multiple y-axes, you have to specify which axis you want to annotate by using h-left or h-right. See an example of horizontal annotations here.