chartjs-plugin-annotation
Advanced tools
Comparing version 0.5.7 to 1.0.0-beta
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": {} | ||
} |
488
README.md
# 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 @@ |
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Shell access
Supply chain riskThis module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
1784
448
0
83033
21
11
2
+ Addedchart.js@3.9.1(transitive)
- Removedchart.js@^2.4.0
- Removedchart.js@2.9.4(transitive)
- Removedchartjs-color@2.4.1(transitive)
- Removedchartjs-color-string@0.6.0(transitive)
- Removedcolor-convert@1.9.3(transitive)
- Removedcolor-name@1.1.31.1.4(transitive)
- Removedmoment@2.30.1(transitive)