chartjs-plugin-annotation.js

An annotation plugin for Chart.js >= 2.4.0

This plugin draws lines and boxes on the chart area.

Annotations work with line, bar, scatter and bubble charts that use linear, logarithmic, time, or category scales. Annotations will not work on any chart that does not have exactly two axes, including pie, radar, and polar area charts.

Configuration

To configure the annotations plugin, you can simply add new config options to your chart config.

{

plugins: {

annotation: {

// Defines when the annotations are drawn.

// This allows positioning of the annotation relative to the other

// elements of the graph.

//

// Should be one of: afterDraw, afterDatasetsDraw, beforeDatasetsDraw

// See http://www.chartjs.org/docs/#advanced-usage-creating-plugins

drawTime: 'afterDatasetsDraw', // (default)

// Mouse events to enable on each annotation.

// Should be an array of one or more browser-supported mouse events

// See https://developer.mozilla.org/en-US/docs/Web/Events

events: ['click'],

// Double-click speed in ms used to distinguish single-clicks from

// double-clicks whenever you need to capture both. When listening for

// both click and dblclick, click events will be delayed by this

// amount.

dblClickSpeed: 350, // ms (default)

// Array of annotation configuration objects

// See below for detailed descriptions of the annotation options

annotations: [{

drawTime: 'afterDraw', // overrides annotation.drawTime if set

id: 'a-line-1', // optional

type: 'line',

mode: 'horizontal',

scaleID: 'y-axis-0',

value: '25',

borderColor: 'red',

borderWidth: 2,

// Fires when the user clicks this annotation on the chart

// (be sure to enable the event in the events array below).

onClick: function(e) {

// `this` is bound to the annotation element

}

}]

}

}

}