Chart.Annotation.js

An annotation plugin for Chart.js >= 2.1.3

Currently draws lines and boxes on the chart area.

Configuration

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

{
    annotation: {
        annotations: [{
            type: 'line',
            mode: 'horizontal',
            scaleID: 'y-axis-0',
            value: '25',
            borderColor: 'red',
            borderWidth: 2
        }]
    }
}

Line Annotations

Vertical or horizontal lines are supported.

{
    type: 'line',
    // set to 'vertical' to draw a vertical line
    mode: 'horizontal',
 
    // ID of the scale to bind onto
    scaleID: 'y-axis-0',
 
    // Data value to draw the line at
    value: 25,
 
    // Line color
    borderColor: 'red',
 
    // Line width
    borderWidth: 2,
 
    // Line dash
    // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
    borderDash: [2, 2],
 
    // Line Dash Offset
    // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
    borderDashOffset: 5
}

Box Annotations

Box annotations are supported. If one of the axes is not specified, the box will take the entire chart dimension.

The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the box is expanded out to the edges

{
    type: 'box',
 
    // ID of the X scale to bind onto
    xScaleID: 'x-axis-0',
 
    // ID of the Y scale to bind onto
    scaleID: 'y-axis-0',
 
    // Left edge of the box. in units along the x axis
    xMin: 25,
 
    // Right edge of the box
    xMax: 40,
 
    // Top edge of the box in units along the y axis
    yMax: 20,
 
    // Bottom edge of the box
    yMin:  15,
 
    // Stroke color
    borderColor: 'red',
 
    // Stroke width
    borderWidth: 2,
 
    // Fill color
    backgroundColor: 'green'
}

To-do Items

The following features still need to be done:

• Point Annotations
• Text annotations

Installation

To download a zip, go to the Chart.Annotation.js on Github

To install via npm:

npm install Chart.Annotation.js --save

Documentation

You can find documentation for Chart.js at www.chartjs.org/docs.

Contributing

Before submitting an issue or a pull request to the project, please take a moment to look over the contributing guidelines first.

License

Chart.Annotation.js is available under the MIT license.