chartjs-plugin-annotation

What is chartjs-plugin-annotation?

The chartjs-plugin-annotation package is a plugin for Chart.js that allows you to add annotations to your charts. These annotations can be lines, boxes, or labels that highlight specific areas or points on the chart, making it easier to convey additional information or emphasize certain data points.

What are chartjs-plugin-annotation's main functionalities?

Line Annotation

This feature allows you to add a horizontal or vertical line to your chart. The line can be used to mark a specific value on the x or y axis. In this example, a horizontal line is added at the y-value of 25 with a label 'Threshold'.

{
  type: 'line',
  mode: 'horizontal',
  scaleID: 'y-axis-0',
  value: '25',
  borderColor: 'red',
  borderWidth: 2,
  label: {
    enabled: true,
    content: 'Threshold'
  }
}

Box Annotation

This feature allows you to add a rectangular box to your chart. The box can highlight a specific area on the chart. In this example, a box is drawn from January to March on the x-axis and from 10 to 50 on the y-axis.

{
  type: 'box',
  xScaleID: 'x-axis-0',
  yScaleID: 'y-axis-0',
  xMin: 'January',
  xMax: 'March',
  yMin: 10,
  yMax: 50,
  backgroundColor: 'rgba(101, 33, 171, 0.5)',
  borderColor: 'rgb(101, 33, 171)',
  borderWidth: 1
}

Label Annotation

This feature allows you to add a label at a specific point on the chart. The label can contain text and can be styled with various options. In this example, a label is added at the point (February, 30) with the text 'This is a label'.

{
  type: 'label',
  xValue: 'February',
  yValue: 30,
  backgroundColor: 'rgba(0,0,0,0.8)',
  content: ['This is a label'],
  font: {
    size: 12
  },
  color: 'white',
  position: 'center'
}

Other packages similar to chartjs-plugin-annotation

chartjs-plugin-datalabels

The chartjs-plugin-datalabels package is another plugin for Chart.js that allows you to display labels on data points. While chartjs-plugin-annotation focuses on adding annotations like lines and boxes, chartjs-plugin-datalabels is more about adding labels directly to the data points themselves.

chartjs-plugin-zoom

The chartjs-plugin-zoom package provides zoom and pan functionalities for Chart.js charts. While it doesn't offer annotation features, it allows users to interact with the chart by zooming in and out or panning across the data, which can be useful for detailed data analysis.

chartjs-plugin-crosshair

The chartjs-plugin-crosshair package adds a crosshair to Chart.js charts, which can be used to highlight the exact position of the cursor on the chart. This is somewhat similar to annotations in that it helps to highlight specific points, but it is more focused on real-time interaction.

README

chartjs-plugin-annotation.js

An annotation plugin for Chart.js >= 4.0.0

---

This plugin needs to be registered. It does not function as inline plugin.

---

For Chart.js 3.7.0 to 3.9.1 support, use version 2.2.1 of this plugin

For Chart.js 3.0.0 to 3.6.2 support, use version 1.4.0 of this plugin

For Chart.js 2.4.0 to 2.9.x support, use version 0.5.7 of this plugin

This plugin draws lines, boxes, points, labels, polygons and ellipses on the chart area.

Annotations work with line, bar, scatter and bubble charts that use linear, logarithmic, time, or category scales. Furthermore you can use a doughnut label annotation which can be used to add contents (text, image, canvas) in the middle area of the doughnut charts.

View this example

Documentation

You can find documentation for chartjs-plugin-annotation at www.chartjs.org/chartjs-plugin-annotation.

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.