New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

chartjs-plugin-annotation

Package Overview
Dependencies
Maintainers
3
Versions
37
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

chartjs-plugin-annotation - npm Package Compare versions

Comparing version 0.5.7 to 1.0.0-beta

dist/chartjs-plugin-annotation.esm.js

3

LICENSE.md
The MIT License (MIT)
Copyright (c) 2016 Evert Timberg
Copyright (c) 2020 chartjs-plugin-annotation Contributors
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

@@ -5,0 +6,0 @@

{
"name": "chartjs-plugin-annotation",
"description": "Annotations for Chart.js",
"version": "0.5.7",
"version": "1.0.0-beta",
"author": "Evert Timberg <evert.timberg@gmail.com>",
"license": "MIT",
"main": "src/index.js",
"main": "dist/chartjs-plugin-annotation.js",
"module": "dist/chartjs-plugin-annotation.esm.js",
"repository": {

@@ -12,27 +13,42 @@ "type": "git",

},
"files": [
"dist/*.js",
"types/*.d.ts"
],
"scripts": {
"test": "gulp jshint",
"build": "gulp build"
"build": "rollup -c",
"dev": "karma start --auto-watch --no-single-run --browsers chrome --grep",
"lint": "eslint samples/**/*.html src/**/*.js",
"test": "concurrently \"npm:test-*\"",
"test-types": "tsc -p types/test/",
"test-lint": "npm run lint",
"test-karma": "karma start --auto-watch --single-run --coverage --grep"
},
"devDependencies": {
"browserify": "^13.0.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-insert": "^0.5.0",
"gulp-jshint": "^2.0.0",
"gulp-replace": "^0.5.4",
"gulp-streamify": "^1.0.2",
"gulp-uglify": "^1.5.3",
"gulp-util": "^3.0.7",
"gulp-watch": "^4.3.10",
"inquirer": "^1.0.2",
"jshint": "^2.9.2",
"jshint-stylish": "^2.2.1",
"merge-stream": "^1.0.0",
"semver": "^5.1.0",
"vinyl-source-stream": "^1.1.0"
"@rollup/plugin-commonjs": "^17.0.0",
"@rollup/plugin-node-resolve": "^11.0.1",
"chart.js": "^3.0.0-beta.7",
"chartjs-test-utils": "^0.1.1",
"concurrently": "^5.3.0",
"eslint": "^7.17.0",
"eslint-config-chartjs": "^0.3.0",
"eslint-plugin-es": "^4.1.0",
"eslint-plugin-html": "^6.1.1",
"karma": "^5.2.3",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage": "^2.0.3",
"karma-firefox-launcher": "^2.1.0",
"karma-jasmine": "^4.0.1",
"karma-jasmine-html-reporter": "^1.5.4",
"karma-rollup-preprocessor": "^7.0.5",
"pixelmatch": "^5.2.1",
"rollup": "^2.35.1",
"rollup-plugin-istanbul": "^3.0.0",
"rollup-plugin-terser": "^7.0.2",
"typescript": "^4.1.3"
},
"dependencies": {
"chart.js": "^2.4.0"
}
}
"peerDependencies": {
"chart.js": "^3.0.0-beta.7"
},
"dependencies": {}
}
# chartjs-plugin-annotation.js
An annotation plugin for Chart.js >= 2.4.0
[![CDNJS version](https://img.shields.io/cdnjs/v/chartjs-plugin-annotation.svg)](https://cdnjs.com/libraries/chartjs-plugin-annotation)
This plugin draws lines and boxes on the chart area.
An annotation plugin for Chart.js >= 3.0.0
For Chart.js 2.4.0 to 2.9.x support, use [version 0.5.7 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v0.5.7)
This plugin draws lines, boxes, points and ellipses 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.
![Example Screenshot from Dropbox](https://www.dropbox.com/s/92cmt8zrth55z55/Screenshot%202017-05-20%2018.26.39.png?dl=1)
![Example Screenshot from Dropbox](https://www.dropbox.com/s/92cmt8zrth55z55/Screenshot%202017-05-20%2018.26.39.png?raw=1)

@@ -19,41 +23,46 @@ [View this example on CodePen](https://codepen.io/compwright/full/mmQMrZ/)

{
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)
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)
// 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)
// Fires when an annotation is hovered.
enter: function(context) {
// context: {chart, element}
},
// 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,
// Array of annotation configuration objects
// or Object with the annotation configuration objects, one for each key
// See below for detailed descriptions of the annotation options
annotations: [{
drawTime: 'afterDraw', // overrides annotation.drawTime if set
display: true,
type: 'line',
scaleID: 'y',
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
}
}]
}
// Event hooks can be defined per annotation (`click` below) or
// at chart level (`enter` above). If defined in both places,
// the one defined per annotation takes precedence.
// Fires when the user clicks this annotation on the chart
click: function(context) {
// context: {chart, element}
}
}]
}
}
}

@@ -63,2 +72,3 @@ ```

### Line Annotations
Vertical or horizontal lines are supported.

@@ -68,96 +78,96 @@

{
type: 'line',
type: 'line',
// optional drawTime to control layering, overrides global drawTime setting
drawTime: 'afterDatasetsDraw',
// If true, display the annotation, default is true
// A callback can also be used:
// display(context) {
// // context: {chart, element}
// return true;
// },
display: true,
// optional annotation ID (must be unique)
id: 'a-line-1',
// optional drawTime to control layering, overrides global drawTime setting
drawTime: 'afterDatasetsDraw',
// set to 'vertical' to draw a vertical line
mode: 'horizontal',
// ID of the scale to bind onto
scaleID: 'y',
// ID of the scale to bind onto
scaleID: 'y-axis-0',
// Data value to draw the line at
value: 25,
// Data value to draw the line at
value: 25,
// Optional value at which the line draw should end
endValue: 26,
// Optional value at which the line draw should end
endValue: 26,
// Line color
borderColor: 'red',
// Line color
borderColor: 'red',
// Line width
borderWidth: 2,
// Line width
borderWidth: 2,
// Line dash
// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
borderDash: [2, 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,
// Line Dash Offset
// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
borderDashOffset: 5,
label: {
// Background color of label, default below
backgroundColor: 'rgba(0,0,0,0.8)',
label: {
// Background color of label, default below
backgroundColor: 'rgba(0,0,0,0.8)',
// optional drawTime to control labels' layering; defaults to this element's drawTime
drawTime: 'afterDatasetsDraw',
// Font family of text, inherits from global
fontFamily: "sans-serif",
font: {
// Font family of text, inherits from global
family: "sans-serif",
// Font size of text, inherits from global
fontSize: 12,
// Font size of text, inherits from global
size: 12,
// Font style of text, default below
fontStyle: "bold",
// Font style of text, default below
style: "bold",
// Font color of text, default below
fontColor: "#fff",
// Font color of text, default below
color: "#fff",
},
// Padding of label to add left/right, default below
xPadding: 6,
// Padding of label to add left/right, default below
xPadding: 6,
// Padding of label to add top/bottom, default below
yPadding: 6,
// Padding of label to add top/bottom, default below
yPadding: 6,
// Radius of label rectangle, default below
cornerRadius: 6,
// Radius of label rectangle, default below
cornerRadius: 6,
// Anchor position of label on line, can be one of: top, bottom, left, right, center. Default below.
position: "center",
// Anchor position of label on line, can be one of: top, bottom, left, right, center. Default below.
position: "center",
// Adjustment along x-axis (left-right) of label relative to above number (can be negative)
// For horizontal lines positioned left or right, negative values move
// the label toward the edge, and positive values toward the center.
xAdjust: 0,
// Adjustment along x-axis (left-right) of label relative to above number (can be negative)
// For horizontal lines positioned left or right, negative values move
// the label toward the edge, and positive values toward the center.
xAdjust: 0,
// Adjustment along y-axis (top-bottom) of label relative to above number (can be negative)
// For vertical lines positioned top or bottom, negative values move
// the label toward the edge, and positive values toward the center.
yAdjust: 0,
// Adjustment along y-axis (top-bottom) of label relative to above number (can be negative)
// For vertical lines positioned top or bottom, negative values move
// the label toward the edge, and positive values toward the center.
yAdjust: 0,
// Whether the label is enabled and should be displayed
enabled: false,
// Whether the label is enabled and should be displayed
enabled: true,
// Text to display in label - default is null
content: "Test label"
},
// Text to display in label - default is null. Provide an array to display values on a new line
content: "Test label",
// Mouse event handlers - be sure to enable the corresponding events in the
// annotation events array or the event handler will not be called.
// See https://developer.mozilla.org/en-US/docs/Web/Events for a list of
// supported mouse events.
onMouseenter: function(e) {},
onMouseover: function(e) {},
onMouseleave: function(e) {},
onMouseout: function(e) {},
onMousemove: function(e) {},
onMousedown: function(e) {},
onMouseup: function(e) {},
onClick: function(e) {},
onDblclick: function(e) {},
onContextmenu: function(e) {},
onWheel: function(e) {}
// Rotation of label, in degrees, or 'auto' to use the degrees of the line, default is 0
rotation: 90,
},
// Event hooks - context: {chart, element}
enter: function(context) {},
leave: function(context) {},
click: function(context) {},
dblclick: function(context) {}
}

@@ -167,2 +177,3 @@ ```

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

@@ -174,55 +185,239 @@

{
type: 'box',
type: 'box',
// optional drawTime to control layering, overrides global drawTime setting
drawTime: 'beforeDatasetsDraw',
// If true, display the annotation, default is true
// A callback can also be used:
// display(context) {
// // context: {chart, element}
// return true;
// },
display: true,
// optional annotation ID (must be unique)
id: 'a-box-1',
// optional drawTime to control layering, overrides global drawTime setting
drawTime: 'beforeDatasetsDraw',
// ID of the X scale to bind onto
xScaleID: 'x-axis-0',
// ID of the X scale to bind onto
xScaleID: 'x',
// ID of the Y scale to bind onto
yScaleID: 'y-axis-0',
// ID of the Y scale to bind onto
yScaleID: 'y',
// Left edge of the box. in units along the x axis
xMin: 25,
// Left edge of the box. in units along the x axis
xMin: 25,
// Right edge of the box
xMax: 40,
// Right edge of the box
xMax: 40,
// Top edge of the box in units along the y axis
yMax: 20,
// Top edge of the box in units along the y axis
yMax: 20,
// Bottom edge of the box
yMin: 15,
// Bottom edge of the box
yMin: 15,
// Stroke color
borderColor: 'red',
// Stroke color
borderColor: 'red',
// Stroke width
borderWidth: 2,
// Stroke width
borderWidth: 2,
// Fill color
backgroundColor: 'green',
// Fill color
backgroundColor: 'green',
// Mouse event handlers - be sure to enable the corresponding events in the
// annotation events array or the event handler will not be called.
// See https://developer.mozilla.org/en-US/docs/Web/Events for a list of
// supported mouse events.
onMouseenter: function(e) {},
onMouseover: function(e) {},
onMouseleave: function(e) {},
onMouseout: function(e) {},
onMousemove: function(e) {},
onMousedown: function(e) {},
onMouseup: function(e) {},
onClick: function(e) {},
onDblclick: function(e) {},
onContextmenu: function(e) {},
onWheel: function(e) {}
// Radius of box rectangle, default below
cornerRadius: 0,
// Event hooks - context: {chart, element}
enter: function(context) {},
leave: function(context) {},
click: function(context) {},
dblclick: function(context) {}
}
```
### Ellipse Annotations
Ellipse annotations are supported. If one of the axes is not specified, the ellipse will take the entire chart dimension.
The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the ellipse is expanded out to the edges
```javascript
{
type: 'ellipse',
// optional drawTime to control layering, overrides global drawTime setting
drawTime: 'beforeDatasetsDraw',
// ID of the X scale to bind onto
xScaleID: 'x',
// ID of the Y scale to bind onto
yScaleID: 'y',
// 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',
// Event hooks - context: {chart, element}
enter: function(context) {},
leave: function(context) {},
click: function(context) {},
dblclick: function(context) {}
}
```
### Point Annotations
Point annotations are supported. If one of the axes is not specified, the point will take the entire chart dimension.
The 2 coordinates, xValue, yValue are optional. If not specified, the point is expanded out to the edges
```javascript
{
type: 'point',
// optional drawTime to control layering, overrides global drawTime setting
drawTime: 'beforeDatasetsDraw',
// ID of the X scale to bind onto
xScaleID: 'x',
// ID of the Y scale to bind onto
yScaleID: 'y',
// Center point X value of the point. in units along the x axis
xValue: 25,
// Center point Y value of the point. in units along the y axis
yValue: 20,
// Stroke color
borderColor: 'red',
// Stroke width
borderWidth: 2,
// Radius of the point, default below
radius: 10,
// Fill color
backgroundColor: 'green',
// Event hooks - context: {chart, element}
enter: function(context) {},
leave: function(context) {},
click: function(context) {},
dblclick: function(context) {}
}
```
### Ellipse Annotations
Ellipse annotations are supported. If one of the axes is not specified, the ellipse will take the entire chart dimension.
The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the ellipse is expanded out to the edges
```javascript
{
type: 'ellipse',
// optional drawTime to control layering, overrides global drawTime setting
drawTime: 'beforeDatasetsDraw',
// ID of the X scale to bind onto
xScaleID: 'x',
// ID of the Y scale to bind onto
yScaleID: 'y',
// 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',
// Event hooks - context: {chart, element}
enter: function(context) {},
leave: function(context) {},
click: function(context) {},
dblclick: function(context) {}
}
```
### Point Annotations
Point annotations are supported. If one of the axes is not specified, the point will take the entire chart dimension.
The 2 coordinates, xValue, yValue are optional. If not specified, the point is expanded out to the edges
```javascript
{
type: 'point',
// optional drawTime to control layering, overrides global drawTime setting
drawTime: 'beforeDatasetsDraw',
// ID of the X scale to bind onto
xScaleID: 'x',
// ID of the Y scale to bind onto
yScaleID: 'y',
// Center point X value of the point. in units along the x axis
xValue: 25,
// Center point Y value of the point. in units along the y axis
yValue: 20,
// Stroke color
borderColor: 'red',
// Stroke width
borderWidth: 2,
// Radius of the point, default below
radius: 10,
// Fill color
backgroundColor: 'green',
// Event hooks - context: {chart, element}
enter: function(context) {},
leave: function(context) {},
click: function(context) {},
dblclick: function(context) {}
}
```
## To-do Items

@@ -233,3 +428,2 @@

* Box annotation labels
* Point annotations
* Text annotations

@@ -236,0 +430,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc