├── .editorconfig ├── .eslintignore ├── .eslintrc.yml ├── .gitattributes ├── .github ├── release-drafter.yml └── workflows │ ├── ci.yml │ ├── compressed-size.yml │ ├── documentation.yml │ ├── npmpublish.yml │ └── release-drafter.yml ├── .gitignore ├── .htmllintrc ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── docs ├── .vuepress │ ├── config.ts │ └── public │ │ ├── favicon.ico │ │ ├── favicon.png │ │ └── hero.svg ├── diagrams │ ├── elementBoxProps.drawio │ ├── elementDoughnutLabelProps.drawio │ ├── elementEllipseProps.drawio │ ├── elementLabelProps.drawio │ ├── elementLineProps.drawio │ ├── elementPointProps.drawio │ └── elementPolygonProps.drawio ├── guide │ ├── banner.png │ ├── configuration.md │ ├── contributing.md │ ├── developers.md │ ├── index.md │ ├── integration.md │ ├── migrationV1.md │ ├── migrationV2.md │ ├── migrationV3.md │ ├── options.md │ ├── types │ │ ├── _commonInnerLabel.md │ │ ├── _commonOptions.md │ │ ├── box.md │ │ ├── doughnutLabel.md │ │ ├── ellipse.md │ │ ├── label.md │ │ ├── line.md │ │ ├── point.md │ │ └── polygon.md │ └── usage.md ├── img │ ├── chartjs-logo.svg │ ├── elementBoxProps.png │ ├── elementDoughnutLabelProps.png │ ├── elementEllipseProps.png │ ├── elementLabelProps.png │ ├── elementLineProps.png │ ├── elementPointProps.png │ └── elementPolygonProps.png ├── index.md ├── samples │ ├── .eslintrc.yml │ ├── box │ │ ├── basic.md │ │ ├── canvas.md │ │ ├── disclosure.md │ │ ├── gradient.md │ │ ├── image.md │ │ ├── initAnim.md │ │ └── quarters.md │ ├── charts │ │ ├── bar.md │ │ └── line.md │ ├── doughnutLabel │ │ ├── background.md │ │ ├── basic.md │ │ ├── canvas.md │ │ ├── gauge.md │ │ └── image.md │ ├── ellipse │ │ ├── basic.md │ │ ├── image.md │ │ ├── label.md │ │ └── rotation.md │ ├── interaction │ │ ├── cartesianplane.md │ │ ├── dragging.md │ │ ├── interaction.md │ │ └── selection.md │ ├── intro.md │ ├── label │ │ ├── autoscaling.md │ │ ├── basic.md │ │ ├── callout.md │ │ ├── canvas.md │ │ ├── fontsColors.md │ │ ├── image.md │ │ ├── innerChart.md │ │ ├── lowerUpper.md │ │ └── point.md │ ├── line │ │ ├── animation.md │ │ ├── average.md │ │ ├── basic.md │ │ ├── callout.md │ │ ├── canvas.md │ │ ├── curve.md │ │ ├── datasetBars.md │ │ ├── hook.md │ │ ├── image.md │ │ ├── labelVisibility.md │ │ ├── limited.md │ │ ├── lowerUpper.md │ │ ├── standardDeviation.md │ │ └── visibility.md │ ├── point │ │ ├── basic.md │ │ ├── combined.md │ │ ├── initAnim.md │ │ ├── outsideChartArea.md │ │ └── shadow.md │ ├── polygon │ │ ├── basic.md │ │ ├── outsideChartArea.md │ │ ├── shadow.md │ │ └── stop.md │ └── utils.md └── scripts │ ├── defaults.js │ ├── register.js │ └── utils.js ├── karma.conf.cjs ├── package-lock.json ├── package.json ├── rollup.config.js ├── scripts └── docs-config.sh ├── src ├── annotation.js ├── elements.js ├── events.js ├── helpers │ ├── helpers.callout.js │ ├── helpers.canvas.js │ ├── helpers.chart.js │ ├── helpers.core.js │ ├── helpers.geometric.js │ ├── helpers.options.js │ └── index.js ├── hooks.js ├── index.esm.js ├── index.js ├── interaction.js ├── scale.js └── types │ ├── box.js │ ├── doughnutLabel.js │ ├── ellipse.js │ ├── index.js │ ├── label.js │ ├── line.js │ ├── point.js │ └── polygon.js ├── test ├── .eslintrc.yml ├── events.js ├── fixtures │ ├── box │ │ ├── adjustScaleFalse.js │ │ ├── adjustScaleFalse.png │ │ ├── adjustScaleIgnore.js │ │ ├── adjustScaleIgnore.png │ │ ├── adjustScaleMax.js │ │ ├── adjustScaleMax.png │ │ ├── adjustScaleMin.js │ │ ├── adjustScaleMin.png │ │ ├── borderDash.js │ │ ├── borderDash.png │ │ ├── borderRadius.js │ │ ├── borderRadius.png │ │ ├── borderWidth0.js │ │ ├── borderWidth0.png │ │ ├── category-index.js │ │ ├── category-index.png │ │ ├── drawTime.js │ │ ├── drawTime.png │ │ ├── gradientBackground.js │ │ ├── gradientBackground.png │ │ ├── hooks.js │ │ ├── hooks.png │ │ ├── initAnimation.js │ │ ├── initAnimation.png │ │ ├── label-dynamic.js │ │ ├── label-dynamic.png │ │ ├── label.js │ │ ├── label.png │ │ ├── labelCanvas.js │ │ ├── labelCanvas.png │ │ ├── labelCanvasOpacity.js │ │ ├── labelCanvasOpacity.png │ │ ├── labelDecoration.js │ │ ├── labelDecoration.png │ │ ├── labelDrawTime.js │ │ ├── labelDrawTime.png │ │ ├── labelMultiline.js │ │ ├── labelMultiline.png │ │ ├── labelPadding.js │ │ ├── labelPadding.png │ │ ├── labelPosition.js │ │ ├── labelPosition.png │ │ ├── labelRotation.js │ │ ├── labelRotation.png │ │ ├── missingBothScales.js │ │ ├── missingBothScales.png │ │ ├── missingXMinMax.js │ │ ├── missingXMinMax.png │ │ ├── missingXMinMaxCategory.js │ │ ├── missingXMinMaxCategory.png │ │ ├── missingXMinMaxCategoryReverse.js │ │ ├── missingXMinMaxCategoryReverse.png │ │ ├── missingXScale.js │ │ ├── missingXScale.png │ │ ├── missingY2MinMaxStacked.js │ │ ├── missingY2MinMaxStacked.png │ │ ├── missingYMinMax.js │ │ ├── missingYMinMax.png │ │ ├── missingYMinMaxReverse.js │ │ ├── missingYMinMaxReverse.png │ │ ├── missingYMinMaxStacked.js │ │ ├── missingYMinMaxStacked.png │ │ ├── missingYScale.js │ │ ├── missingYScale.png │ │ ├── partial-range.js │ │ ├── partial-range.png │ │ ├── rotation.js │ │ ├── rotation.png │ │ ├── scriptableOptions.js │ │ ├── scriptableOptions.png │ │ ├── shadow.js │ │ ├── shadow.png │ │ ├── shadowColors.js │ │ ├── shadowColors.png │ │ ├── zIndex.js │ │ └── zIndex.png │ ├── doughnutLabel │ │ ├── autoHide.js │ │ ├── autoHide.png │ │ ├── backgroundColor.js │ │ ├── backgroundColor.png │ │ ├── backgroundColorPosRotatedChart.js │ │ ├── backgroundColorPosRotatedChart.png │ │ ├── backgroundColorPosRotatedReducedChart.js │ │ ├── backgroundColorPosRotatedReducedChart.png │ │ ├── backgroundColorRotatedChart.js │ │ ├── backgroundColorRotatedChart.png │ │ ├── backgroundColorRotatedReducedChart.js │ │ ├── backgroundColorRotatedReducedChart.png │ │ ├── basic.js │ │ ├── basic.png │ │ ├── border.js │ │ ├── border.png │ │ ├── canvas.js │ │ ├── canvas.png │ │ ├── contentMultiline.js │ │ ├── contentMultiline.png │ │ ├── contentMultilineColors.js │ │ ├── contentMultilineColors.png │ │ ├── contentMultilineFonts.js │ │ ├── contentMultilineFonts.png │ │ ├── doubleDatasets.js │ │ ├── doubleDatasets.png │ │ ├── drawTime.js │ │ ├── drawTime.png │ │ ├── initAnimation.js │ │ ├── initAnimation.png │ │ ├── noAutoHide.js │ │ ├── noAutoHide.png │ │ ├── noBackgroundColorCircumTooSmall.js │ │ ├── noBackgroundColorCircumTooSmall.png │ │ ├── noContent.js │ │ ├── noContent.png │ │ ├── noDisplay.js │ │ ├── noDisplay.png │ │ ├── noDoughnut.js │ │ ├── noDoughnut.png │ │ ├── noFit.js │ │ ├── noFit.png │ │ ├── noFitCanvas.js │ │ ├── noFitCanvas.png │ │ ├── rotatedChart.js │ │ ├── rotatedChart.png │ │ ├── rotation.js │ │ └── rotation.png │ ├── ellipse │ │ ├── borderDash.js │ │ ├── borderDash.png │ │ ├── drawTime.js │ │ ├── drawTime.png │ │ ├── gradientBackground.js │ │ ├── gradientBackground.png │ │ ├── hooks.js │ │ ├── hooks.png │ │ ├── initAnimation.js │ │ ├── initAnimation.png │ │ ├── label-dynamic.js │ │ ├── label-dynamic.png │ │ ├── label.js │ │ ├── label.png │ │ ├── labelCanvas.js │ │ ├── labelCanvas.png │ │ ├── labelCanvasOpacity.js │ │ ├── labelCanvasOpacity.png │ │ ├── labelDecoration.js │ │ ├── labelDecoration.png │ │ ├── labelDrawTime.js │ │ ├── labelDrawTime.png │ │ ├── labelMultiline.js │ │ ├── labelMultiline.png │ │ ├── labelPadding.js │ │ ├── labelPadding.png │ │ ├── labelPosition.js │ │ ├── labelPosition.png │ │ ├── labelRotation.js │ │ ├── labelRotation.png │ │ ├── missingBothScales.js │ │ ├── missingBothScales.png │ │ ├── missingXScale.js │ │ ├── missingXScale.png │ │ ├── missingYScale.js │ │ ├── missingYScale.png │ │ ├── partial-range.js │ │ ├── partial-range.png │ │ ├── rotation.js │ │ ├── rotation.png │ │ ├── scriptableOptions.js │ │ ├── scriptableOptions.png │ │ ├── shadow.js │ │ ├── shadow.png │ │ ├── shadowColors.js │ │ ├── shadowColors.png │ │ ├── zIndex.js │ │ └── zIndex.png │ ├── label │ │ ├── border.js │ │ ├── border.png │ │ ├── boxLocation.js │ │ ├── boxLocation.png │ │ ├── boxNotVisible.js │ │ ├── boxNotVisible.png │ │ ├── calloutBasic.js │ │ ├── calloutBasic.png │ │ ├── calloutCanvas.js │ │ ├── calloutCanvas.png │ │ ├── calloutHorizontalPosition.js │ │ ├── calloutHorizontalPosition.png │ │ ├── calloutNoShown.js │ │ ├── calloutNoShown.png │ │ ├── calloutRotation.js │ │ ├── calloutRotation.png │ │ ├── calloutScriptableOptions.js │ │ ├── calloutScriptableOptions.png │ │ ├── calloutSizing.js │ │ ├── calloutSizing.png │ │ ├── calloutVerticalPosition.js │ │ ├── calloutVerticalPosition.png │ │ ├── canvas.js │ │ ├── canvas.png │ │ ├── canvasOpacity.js │ │ ├── canvasOpacity.png │ │ ├── clip-false.js │ │ ├── clip-false.png │ │ ├── contentMultiline.js │ │ ├── contentMultiline.png │ │ ├── contentMultilineColors.js │ │ ├── contentMultilineColors.png │ │ ├── contentMultilineFonts.js │ │ ├── contentMultilineFonts.png │ │ ├── decoration.js │ │ ├── decoration.png │ │ ├── gradientBackground.js │ │ ├── gradientBackground.png │ │ ├── hooks.js │ │ ├── hooks.png │ │ ├── initAnimation.js │ │ ├── initAnimation.png │ │ ├── missingScales.js │ │ ├── missingScales.png │ │ ├── missingValuesStacked.js │ │ ├── missingValuesStacked.png │ │ ├── noCalloutIfAdjusted.js │ │ ├── noCalloutIfAdjusted.png │ │ ├── padding.js │ │ ├── padding.png │ │ ├── positionHorizontal.js │ │ ├── positionHorizontal.png │ │ ├── positionVertical.js │ │ ├── positionVertical.png │ │ ├── rotation.js │ │ ├── rotation.png │ │ ├── scriptableOptions.js │ │ ├── scriptableOptions.png │ │ ├── shadow.js │ │ ├── shadow.png │ │ ├── shadowColors.js │ │ └── shadowColors.png │ ├── line │ │ ├── arrowHeads.js │ │ ├── arrowHeads.png │ │ ├── arrowHeadsDeleteAtRuntime.js │ │ ├── arrowHeadsDeleteAtRuntime.png │ │ ├── arrowHeadsFallback.js │ │ ├── arrowHeadsFallback.png │ │ ├── arrowHeadsFill.js │ │ ├── arrowHeadsFill.png │ │ ├── arrowHeadsFillScriptableOptions.js │ │ ├── arrowHeadsFillScriptableOptions.png │ │ ├── axis-index.js │ │ ├── axis-index.png │ │ ├── borderWidth0.js │ │ ├── borderWidth0.png │ │ ├── curveArrowHeads.js │ │ ├── curveArrowHeads.png │ │ ├── curveCPHorizontal.js │ │ ├── curveCPHorizontal.png │ │ ├── curveCPHorizontalPercent.js │ │ ├── curveCPHorizontalPercent.png │ │ ├── curveCPVertical.js │ │ ├── curveCPVertical.png │ │ ├── curveCPVerticalPercent.js │ │ ├── curveCPVerticalPercent.png │ │ ├── curvePosition.js │ │ ├── curvePosition.png │ │ ├── curvePositionPercent.js │ │ ├── curvePositionPercent.png │ │ ├── direction-reverse.js │ │ ├── direction-reverse.png │ │ ├── direction.js │ │ ├── direction.png │ │ ├── drawTime.js │ │ ├── drawTime.png │ │ ├── hooks.js │ │ ├── hooks.png │ │ ├── initAnimation.js │ │ ├── initAnimation.png │ │ ├── label-border.js │ │ ├── label-border.png │ │ ├── label-dynamic-hide.js │ │ ├── label-dynamic-hide.png │ │ ├── label-dynamic-show.js │ │ ├── label-dynamic-show.png │ │ ├── labelCallout.js │ │ ├── labelCallout.png │ │ ├── labelCalloutRotation.js │ │ ├── labelCalloutRotation.png │ │ ├── labelCalloutWithAutoRotation.js │ │ ├── labelCalloutWithAutoRotation.png │ │ ├── labelCanvas.js │ │ ├── labelCanvas.png │ │ ├── labelCanvasOpacity.js │ │ ├── labelCanvasOpacity.png │ │ ├── labelDecoration.js │ │ ├── labelDecoration.png │ │ ├── labelShadow.js │ │ ├── labelShadow.png │ │ ├── labelShadowColors.js │ │ ├── labelShadowColors.png │ │ ├── labelZindex.js │ │ ├── labelZindex.png │ │ ├── label_drawTime.js │ │ ├── label_drawTime.png │ │ ├── labelsScriptableOptions.js │ │ ├── labelsScriptableOptions.png │ │ ├── missingValuesStacked.js │ │ ├── missingValuesStacked.png │ │ ├── missingYMinMax.js │ │ ├── missingYMinMax.png │ │ ├── out-of-range-value0.js │ │ ├── out-of-range-value0.png │ │ ├── out-of-range.js │ │ ├── out-of-range.png │ │ ├── padding.js │ │ ├── padding.png │ │ ├── partial-range.js │ │ ├── partial-range.png │ │ ├── position.js │ │ ├── position.png │ │ ├── positionPercent.js │ │ ├── positionPercent.png │ │ ├── rotation.js │ │ ├── rotation.png │ │ ├── scriptableOptions.js │ │ ├── scriptableOptions.png │ │ ├── shadow.js │ │ ├── shadow.png │ │ ├── shadowArrowHeads.js │ │ ├── shadowArrowHeads.png │ │ ├── shadowArrowHeadsFill.js │ │ ├── shadowArrowHeadsFill.png │ │ ├── shadowBorderColor.js │ │ └── shadowBorderColor.png │ ├── point │ │ ├── adjust.js │ │ ├── adjust.png │ │ ├── basic.js │ │ ├── basic.png │ │ ├── basicBorderWidth0.js │ │ ├── basicBorderWidth0.png │ │ ├── borderDash.js │ │ ├── borderDash.png │ │ ├── boundToPoint0.js │ │ ├── boundToPoint0.png │ │ ├── boxLocation.js │ │ ├── boxLocation.png │ │ ├── boxLocationAdjust.js │ │ ├── boxLocationAdjust.png │ │ ├── boxLocationRadius.js │ │ ├── boxLocationRadius.png │ │ ├── canvas.js │ │ ├── canvas.png │ │ ├── cross.js │ │ ├── cross.png │ │ ├── crossRot.js │ │ ├── crossRot.png │ │ ├── crossRotShadow.js │ │ ├── crossRotShadow.png │ │ ├── crossShadow.js │ │ ├── crossShadow.png │ │ ├── dash.js │ │ ├── dash.png │ │ ├── dashShadow.js │ │ ├── dashShadow.png │ │ ├── hooks.js │ │ ├── hooks.png │ │ ├── initAnimation.js │ │ ├── initAnimation.png │ │ ├── line.js │ │ ├── line.png │ │ ├── lineShadow.js │ │ ├── lineShadow.png │ │ ├── missingValuesStacked.js │ │ ├── missingValuesStacked.png │ │ ├── rect.js │ │ ├── rect.png │ │ ├── rectRot.js │ │ ├── rectRot.png │ │ ├── rectRotShadow.js │ │ ├── rectRotShadow.png │ │ ├── rectRounded.js │ │ ├── rectRounded.png │ │ ├── rectRoundedShadow.js │ │ ├── rectRoundedShadow.png │ │ ├── rectShadow.js │ │ ├── rectShadow.png │ │ ├── rotation.js │ │ ├── rotation.png │ │ ├── scriptableOptions.js │ │ ├── scriptableOptions.png │ │ ├── shadow.js │ │ ├── shadow.png │ │ ├── shadowColors.js │ │ ├── shadowColors.png │ │ ├── shadowColorsBorderWidth0.js │ │ ├── shadowColorsBorderWidth0.png │ │ ├── star.js │ │ ├── star.png │ │ ├── starShadow.js │ │ ├── starShadow.png │ │ ├── triangle.js │ │ ├── triangle.png │ │ ├── triangleShadow.js │ │ └── triangleShadow.png │ └── polygon │ │ ├── adjust.js │ │ ├── adjust.png │ │ ├── borderDash.js │ │ ├── borderDash.png │ │ ├── boundToPoint0.js │ │ ├── boundToPoint0.png │ │ ├── boxLocation.js │ │ ├── boxLocation.png │ │ ├── boxLocationAdjust.js │ │ ├── boxLocationAdjust.png │ │ ├── boxLocationRadius.js │ │ ├── boxLocationRadius.png │ │ ├── decagon.js │ │ ├── decagon.png │ │ ├── heptagon.js │ │ ├── heptagon.png │ │ ├── hexagon.js │ │ ├── hexagon.png │ │ ├── hexagonWithPoints.js │ │ ├── hexagonWithPoints.png │ │ ├── hooks.js │ │ ├── hooks.png │ │ ├── initAnimation.js │ │ ├── initAnimation.png │ │ ├── invalidSides.js │ │ ├── invalidSides.png │ │ ├── missingValuesStacked.js │ │ ├── missingValuesStacked.png │ │ ├── nonagon.js │ │ ├── nonagon.png │ │ ├── octagon.js │ │ ├── octagon.png │ │ ├── pentagon.js │ │ ├── pentagon.png │ │ ├── pentagonShadow.js │ │ ├── pentagonShadow.png │ │ ├── pentagonShadowColors.js │ │ ├── pentagonShadowColors.png │ │ ├── rhombus.js │ │ ├── rhombus.png │ │ ├── rhombusShadow.js │ │ ├── rhombusShadow.png │ │ ├── rotation.js │ │ ├── rotation.png │ │ ├── scriptableOptions.js │ │ ├── scriptableOptions.png │ │ ├── square.js │ │ ├── square.png │ │ ├── squareShadow.js │ │ ├── squareShadow.png │ │ ├── triangle.js │ │ ├── triangle.png │ │ ├── triangleShadow.js │ │ └── triangleShadow.png ├── index.js ├── integration │ ├── .eslintrc.yml │ ├── integration-test.js │ ├── node-commonjs │ │ ├── package.json │ │ └── test.js │ ├── node-module │ │ ├── package.json │ │ └── test.js │ └── ts │ │ ├── basic.ts │ │ ├── package.json │ │ ├── test.js │ │ └── tsconfig.json ├── seed-reporter.js ├── specs │ ├── animation.spec.js │ ├── annotation.spec.js │ ├── box.spec.js │ ├── doughnutLabel.spec.js │ ├── ellipse.spec.js │ ├── events.spec.js │ ├── helpers.spec.js │ ├── hooks.spec.js │ ├── label.spec.js │ ├── line.spec.js │ ├── point.spec.js │ └── polygon.spec.js └── utils.js ├── tsconfig.json └── types ├── .eslintrc.yml ├── element.d.ts ├── events.d.ts ├── index.d.ts ├── label.d.ts ├── options.d.ts └── tests ├── .eslintrc.yml ├── exports.ts └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.html] 13 | indent_style = tab 14 | indent_size = 4 15 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/*{.,-}min.js 2 | -------------------------------------------------------------------------------- /.eslintrc.yml: -------------------------------------------------------------------------------- 1 | 2 | extends: 3 | - chartjs 4 | - plugin:es/no-new-in-es2019 5 | - plugin:markdown/recommended 6 | 7 | env: 8 | es6: true 9 | browser: true 10 | node: true 11 | 12 | parserOptions: 13 | ecmaVersion: 2018 14 | sourceType: module 15 | ecmaFeatures: 16 | impliedStrict: true 17 | modules: true 18 | 19 | plugins: ['html', 'es'] 20 | 21 | rules: 22 | class-methods-use-this: "off" 23 | complexity: ["warn", 10] 24 | max-statements: ["warn", 30] 25 | no-empty-function: "off" 26 | no-use-before-define: ["error", { "functions": false }] 27 | # disable everything, except Rest/Spread Properties in ES2018 28 | es/no-async-iteration: "error" 29 | es/no-malformed-template-literals: "error" 30 | es/no-regexp-lookbehind-assertions: "error" 31 | es/no-regexp-named-capture-groups: "error" 32 | es/no-regexp-s-flag: "error" 33 | es/no-regexp-unicode-property-escapes: "error" 34 | linebreak-style: ["error", "unix"] 35 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # We'll let Git's auto-detection algorithm infer if a file is text. If it is, 2 | # enforce LF line endings regardless of OS or git configurations. 3 | * text=auto eol=lf 4 | 5 | # Isolate binary files in case the auto-detection algorithm fails and 6 | # marks them as text files (which could brick them). 7 | *.{png,jpg,jpeg,gif,webp,woff,woff2} binary 8 | -------------------------------------------------------------------------------- /.github/release-drafter.yml: -------------------------------------------------------------------------------- 1 | name-template: 'v$RESOLVED_VERSION' 2 | tag-template: 'v$RESOLVED_VERSION' 3 | categories: 4 | - title: 'Breaking Changes' 5 | labels: 6 | - 'breaking change' 7 | - title: 'Enhancements' 8 | labels: 9 | - 'enhancement' 10 | - title: 'Bugs Fixed' 11 | labels: 12 | - 'bug' 13 | - title: 'Types' 14 | labels: 15 | - 'types' 16 | - title: 'Documentation' 17 | labels: 18 | - 'documentation' 19 | - title: 'Development' 20 | labels: 21 | - 'chore' 22 | - 'performance' 23 | - 'dependencies' 24 | exclude-labels: 25 | - 'infrastructure' 26 | change-template: '- #$NUMBER $TITLE' 27 | change-title-escapes: '\<*_&`#@' 28 | version-resolver: 29 | major: 30 | labels: 31 | - 'breaking change' 32 | minor: 33 | labels: 34 | - 'enhancement' 35 | patch: 36 | labels: 37 | - 'bug' 38 | - 'chore' 39 | - 'types' 40 | default: patch 41 | template: | 42 | # Essential Links 43 | 44 | * [npm](https://www.npmjs.com/package/chartjs-plugin-annotation) 45 | * [Migration guide](https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/migrationV3.html) 46 | * [Docs](https://www.chartjs.org/chartjs-plugin-annotation/) 47 | * [API](https://www.chartjs.org/chartjs-plugin-annotation/latest/api/) 48 | * [Samples](https://www.chartjs.org/chartjs-plugin-annotation/latest/samples/intro.html) 49 | 50 | $CHANGES 51 | 52 | Thanks to $CONTRIBUTORS 53 | -------------------------------------------------------------------------------- /.github/workflows/compressed-size.yml: -------------------------------------------------------------------------------- 1 | name: Compressed Size 2 | 3 | on: [pull_request] 4 | 5 | jobs: 6 | build: 7 | 8 | runs-on: ubuntu-latest 9 | 10 | steps: 11 | - uses: actions/checkout@v3 12 | - uses: preactjs/compressed-size-action@v2 13 | with: 14 | repo-token: "${{ secrets.GITHUB_TOKEN }}" 15 | -------------------------------------------------------------------------------- /.github/workflows/documentation.yml: -------------------------------------------------------------------------------- 1 | name: documentation 2 | 3 | on: 4 | pull_request: 5 | branches: [master] 6 | push: 7 | branches: [master] 8 | 9 | jobs: 10 | checks: 11 | if: github.event_name == 'pull_request' 12 | runs-on: ubuntu-latest 13 | steps: 14 | - uses: actions/checkout@v3 15 | - uses: actions/setup-node@v3 16 | with: 17 | cache: npm 18 | node-version: 16 19 | - name: Test Build 20 | run: | 21 | npm ci 22 | ./scripts/docs-config.sh master 23 | npm run docs 24 | gh-release: 25 | if: github.event_name == 'push' 26 | runs-on: ubuntu-latest 27 | steps: 28 | - uses: actions/checkout@v3 29 | - uses: actions/setup-node@v3 30 | with: 31 | cache: npm 32 | node-version: 16 33 | - name: Build 34 | run: | 35 | npm ci 36 | ./scripts/docs-config.sh master 37 | npm run docs 38 | - name: Release to GitHub Pages 39 | uses: peaceiris/actions-gh-pages@v3 40 | with: 41 | github_token: ${{ secrets.GH_AUTH_TOKEN }} 42 | publish_dir: dist/docs 43 | destination_dir: master 44 | -------------------------------------------------------------------------------- /.github/workflows/release-drafter.yml: -------------------------------------------------------------------------------- 1 | name: Release Drafter 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | - v2 8 | 9 | jobs: 10 | correct_repository: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - name: fail on fork 14 | if: github.repository_owner != 'chartjs' 15 | run: exit 1 16 | 17 | update_release_draft: 18 | needs: correct_repository 19 | runs-on: ubuntu-latest 20 | steps: 21 | - uses: release-drafter/release-drafter@v5 22 | env: 23 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Deployment 3 | /coverage 4 | /custom 5 | /dist 6 | /gh-pages 7 | /docs/.docusaurus 8 | # generated typedocs 9 | docs/api 10 | 11 | # Node.js 12 | node_modules/ 13 | npm-debug.log* 14 | 15 | # Development 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | .idea 22 | .project 23 | .settings 24 | .vscode 25 | *.log 26 | *.swp 27 | *.stackdump 28 | -------------------------------------------------------------------------------- /.htmllintrc: -------------------------------------------------------------------------------- 1 | { 2 | "indent-style": "tabs", 3 | "line-end-style": false, 4 | "attr-quote-style": "double", 5 | "spec-char-escape": false, 6 | "attr-bans": [ 7 | "align", 8 | "background", 9 | "bgcolor", 10 | "border", 11 | "frameborder", 12 | "longdesc", 13 | "marginwidth", 14 | "marginheight", 15 | "scrolling" 16 | ], 17 | "tag-bans": [ "b", "i" ], 18 | "id-class-style": false 19 | } 20 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016-2021 chartjs-plugin-annotation Contributors 4 | 5 | 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: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /docs/.vuepress/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/docs/.vuepress/public/favicon.ico -------------------------------------------------------------------------------- /docs/.vuepress/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/docs/.vuepress/public/favicon.png -------------------------------------------------------------------------------- /docs/diagrams/elementBoxProps.drawio: -------------------------------------------------------------------------------- 1 | 7VfLjtsgFP0aL1PZ4EeyrD0zjapWqhRV064qGhMbFfu6mDROvr5gkziERNORMg9V403gcO81nMMBx8NZ1X0QpCk/Q065h/y88/CNh1AQ+Ej9aGQ7INM4GoBCsNwEjcCC7agBfYOuWU5bK1ACcMkaG1xCXdOltDAiBGzssBVw+60NKagDLJaEu+g9y2VpVoGSEZ9TVpT7NwfxbBipyD7YrKQtSQ6bIwjfejgTAHJoVV1GuSZvz8uQd3dh9DAxQWv5Lwnp/W4e/9iFWTNHv78sJvLTx68TU+UP4WuzYDNZud0zIGBd51QX8T2cbkom6aIhSz26UZorrJQVV71ANU05KiTtLs4zOKxebRsKFZViq0JMAvINYWbHoND0NyP/ODZYecT9IZEYzYtD7ZEW1TDMPIIl9DBLqorakvRhhkjbDPt0xTrNarpinGfAQfSF8PBch0qcJO8ii0yMD8gRnZFLZvREVGKHys5D2dbhUy1a2sQJ2rId+dkH6J1I1hLa4bzoeeWsqFV7qbihistUM8eUkd+bgYrluU5OG2C17NcVpV50cyJBDbUOaqWAX/QEtK2wglqaAwuFOkVpzuoiBSmhUmB4HRGD5MQPvuuH6IwdwqdyQ+hIOHD+TQmpT+K+8/1N0csn3NQ2JZqdM2Uwe05RI9eXSBvTPenedNzrGGHbmeGZmyp5ThFjR8RhJq9GQnW/3fXPq9IRhyd+RC+sY+LoaF77PwspQBLJQE9iMvOvdHfGtkPxGWWn11FWdcdv+X7s6B8Rvv0L -------------------------------------------------------------------------------- /docs/diagrams/elementDoughnutLabelProps.drawio: -------------------------------------------------------------------------------- 1 | 7ZfZjpswFIafhstUYLMkl4VZoqqVKkXVtFeVJzhg1XCocRqSp68NJonjjKaVMotGw03w7+Pt+31s4uGs6m4FacovkFPuIT/vPHzlIRT401j9aGU7KNNgOgiFYLkJOggLtqNjS6OuWU5bK1ACcMkaW1xCXdOltDQiBGzssBVwe9SGFNQRFkvCXfWO5bI0q0DJQZ9TVpTjyEE8G2oqMgablbQlyWFzJOFrD2cCQA5vVZdRruGNXIZ2Nw/U7icmaC3/pUF6t5vHP3dh1szR76+Lifz86dvE9PKH8LVZsJms3I4EBKzrnOpOfA+nm5JJumjIUtdulOdKK2XFVSlQr+6kxhGokLQ7kswkbylUVIqtCjG1yDfAzI5BoSlvDvxxbLTyiP2+ITGeF/u+D1jUiyHzH5TQ45RUL2pL0scJkbYZ9umKdZpqumKcZ8BB9B3h4bkMSpwkHyILJsZ75Qhn5MKMnggldlB2Hsq2Dk+1QmmDE7RlO3LfB+idSNYS2uG86LlyVtTqfalwUcUy1ZiYSuSPpqJiea4bpw2wWvbrilIvujqxoIZaB7VSwC96ItqpsIJamgMLhbqJ8pzVRQpSQqXE8DImBslJPvhuPkRn0iF8qmwIHQsH5t+Vkfok7gs/3h19+ISbnTg6O5eUwew5TY3cvEQ6Md2T7t3H0ccI2z6GZ26q5DlNjB0Th5m8GgvV/XbTP6/KRxzal+T+k+2lfEwcH82wb9lIAZJIBnoSk5l/obsztjMUn3F2ehlnVfHwLd/XHf0jwtd/AQ== -------------------------------------------------------------------------------- /docs/diagrams/elementEllipseProps.drawio: -------------------------------------------------------------------------------- 1 | 7Vddb5swFP01PGYCG0LyOGg+VG3SJDS13cvkBQesAZcaZyH59bPBJCFO1ExKqmgqL9jH11/n+FyMhcO8nnFSpl8hppmF7Li28IOFkOPYSL4UsmmR0dBrgYSzWAftgYhtqQZtja5YTKteoADIBCv74AKKgi5EDyOcw7oftoSsP2tJEmoA0YJkJvrEYpHqXSB/j88pS9JuZmc4blty0gXrnVQpiWF9AOGJhUMOINpSXoc0U+R1vLT9pmdadwvjtBCXdAietvPhz60blnP0+i0aiC+P3wd6lD8kW+kN68WKTccAh1URUzWIbeFgnTJBo5IsVOtaai6xVOSZrDmyGJMqbWJVxVxhNx3lgtYHkF7xjEJOBd/IEN2KbM2ePj7I1fX1Xgw81Fh6IMSuI9EHINmNvedIFjRN/0AZepsyOYo8n/RtukhVtod2yWpFW7BkWRZCBrwZCLfPdajEvv/J65GJ8Q45oNMzyfRuRCU2qKwtFG4MPuUORZ84Tiu2Jb+aAHUsyUpA1SaPhteMJYUsLyRdVHIZKJqYdPVn3ZCzOFadgxJYIZp9eYHlPRxJUEChgirB4Tc9Avu+WEIhdPZCruoiNWdFEoAQkEvQvY6Ijn/kB9v0g3fCDu6t3OAaEracP0shVVpuKi8fip7PcKO+KdH4lCmd8XuK6pm+RMqYZqb70LHT0cN9Z7onvlT+e4o4NERsV3I3Esrv27R57kpH7B758USGvZWOr48D8CP8/BJOxrMfL1M7ji66ol183zjroO5ue6W7xh1e23yDRj3v/+wHDoIIBmoRg7F9pSvIUaLDyNR2dB2DyOr+/6hpO/jLxJO/ -------------------------------------------------------------------------------- /docs/diagrams/elementLabelProps.drawio: -------------------------------------------------------------------------------- 1 | 7VjZcpswFP0aHpMBBMY8eskyXaaZcTJNnjKqkUEtICLkGPz1lUCswnXqxEkmE79Y92g/594rCQ3MouyCwiT4TjwUaqbuZRqYa6ZpGLrJ/wSSl8h4ZJeAT7EnGzXAAm+RBHWJrrGH0k5DRkjIcNIFlySO0ZJ1MEgp2XSbrUjYnTWBPlKAxRKGKvoTeyyQuzCdBr9E2A+qmY2RW9ZEsGosd5IG0CObFgTONDCjhLCyFGUzFAryKl7Kfuc7auuFURSzp3SY/txeju631iy5NB+uFifs25ebEznKIwzXcsNysSyvGKBkHXtIDKJrYLoJMEOLBC5F7YZrzrGARSG3DF5UF1XNgChDWQuSi7xAJEKM5ryJrDV1SZj0GNOS9qbhH4wkFrS4rztCqblfj93QwguSmf9gydzPEh+FuyTazxBMk9JPVzgTrE5XOAxnJCS0GAiUv5ehEjjOqd0hE4AaadFpq2TaR6ISKFRmmjnLFT75DlmXOIpSvIW/igbCE+GakbTMFwWvIfZjXl5yuhDncipowjyQJ7Iiwp4nOk8TgmNW7Mueava8J0FMYtEoZZT8QT2wGworEjOZsExLdOGa49ifEsZIxEHrZUQ0nF486Go82APhYB0rGixFwpLzWy6kyMSFcfep6O4M5/YUdYeC0nBfU1RbjUtTBKaa6T51rHS0QVdHa+Ckcl5TxJEiYrmSdyMhP9/Oi9+70hFY3UOyvrK9lY6OoqOc9iMLSQmDDBOxiBNXf6Gzc9SNUDCg7PhIyt78cCeT6xv0++w6f/j6eJ7Be/0p920UexPxcGm4bMvboZUTQ/NbQZh+qlugQu5E9Sm/wkl7nrXbz/O2dYUo5lsTvjBvSEee8ipSVGCQ+ojtO1JUafZcWyqMopC7w2N3GUN6yBmuhL/ufkVYdk/SlKzpEsle7WdTb6A6qVcDmb2BSh6UgQr3qLd9uMeoF+YiMuVlqyh/8LuWEu4D7rg7t/f9YKxmAGPoNXm0FKBen9UUcKTH5POYHOu9x+QQl8d5Sg4SqZ6Sz8qlGWa3ReK0DVfad626JokKI28Zh6fQMgftC/63SqGg90yxnANTKBiDf+fig1MoN5sPaGXz5jMkOPsL -------------------------------------------------------------------------------- /docs/diagrams/elementLineProps.drawio: -------------------------------------------------------------------------------- 1 | 7Vddb9sgFP01fmxlg500j03ST21VpWxqu5eKGWKj2cbDpHHy6wcGYjskS6d1UTU1L+Ee7sVwzuXjenCS11cclelnhknmAR/XHpx6AASBD+SfQlYaORtEGkg4xcapBWZ0TQzoG3RBMal6joKxTNCyD8asKEgsehjinC37bnOW9b9aooQ4wCxGmYs+UCxSswowbPFrQpPUfjkYjHRPjqyzWUmVIsyWHQheeHDCGRO6ldcTkinyLC867nJP72ZinBTiNQHjh/X14HkdTspr8PN+diI+3X49MaO8oGxhFmwmK1aWAc4WBSZqEN+D42VKBZmVKFa9S6m5xFKRZ9IKZBOjKm18leHO0H6OcEHqDmRmfEVYTgRfSRfTC3zDnkkfEBp72YoBBwZLO0JsApFJgGQzdsuRbBia/oAy6FBWe2CycniTKxR9cjip6Bp9bxwUl2ghWKUzXnWjjCaFbMeSLsIloGiiMhXPTUdOMVbB45LRQjTrisZeNJXInGbZhGVMhk0LViinSnD2g2yBfTHnrBBmy4FQhUhdaZGMmRAsl2D4NiIGwy0RfVfEaIeG4b+SMHQk1Jw/SiHVWdIYTx+K7lUUbis6gqfDyBE1GB1T1cjdmEDtTPdI+xDSChnBvpDhjvN1eEwRB46IeibvRkIPwMvm9650hGF08Ig9qo5DR0fz2f9ZSM4EEpSpSZyM/De6PLd2KASusmfHVBYcfjLKUeT7nBx+LqKq1I/2Oa0V09sC6d9b3VntHWW5hLuvLXAauYS26N9QeneLyuf67ua2YvEXhL/dL2+CHYeeS2mBz1U506Znd8f0MlUns61WFHuSNL56NM6N8dQ1prWJ1NbKWjUVj532U6fdhijDRuxVqWILHpPfJJUt7RBPiDjsR3CvanM1P/CytBgnmdywL/1ab5e85gv36kR5RXVih9DrNlHd2mxroGiw5xq2A2linIGabNsse1cCSrMtMbV7W6jDi18= -------------------------------------------------------------------------------- /docs/diagrams/elementPointProps.drawio: -------------------------------------------------------------------------------- 1 | 3Vddb9sgFP01fsxkg52Px9lJE02dNCmasj1NNCY2KjYeJrOTXz+wcWJCpnZSHLX1i+Fwgcs53As4MMrqJUdF+pXFmDrAjWsHzh0APM8F8qeQQ4tMx0ELJJzE2ugMrMkRa9DV6J7EuDQMBWNUkMIEtyzP8VYYGOKcVabZjlFz1gIl2ALWW0RtdENikepVgMkZX2GSpN3M3njWtmSoM9YrKVMUs6oHwYUDI86YaEtZHWGqyOt4afs9/KP15BjHuXhNh3BzXI1/Hf2oWIHf39Yj8fjl+0iP8gfRvV6wdlYcOgY42+cxVoO4DgyrlAi8LtBWtVZSc4mlIqOy5slijMq0sVUV28NuOswFrnuQ9niJWYYFP0gT3Qqmmj29fYCv69VZDOBqLO0JcQKR3gDJaewzR7KgafoPysDLlMlR5P7EL9OFyqLdtDtSK9rCHaE0YpTxZiDYfrehEk4mnwKDTAhPSI/OwCYzGIhKaFFZOyA6WHzKFQqTOI5LckRPjYHalmgvWNkmj4ZXSpJclreSLiy5DBVNREb1Z92QkThWncOCkVw06wpCJ5hfSJCzXBmVgrNnfAGacbFjudDZC/iqi9Sc5EnIhGCZBP0bxYNvSnja5n0Br4SDP1Q0+JaELec/pJAqLTeVn+9dUW9ARWcXQelOrwSlN7kiKhxK1MCOS6AC085070zHASPTD8yTyr9yUl0TcbDIHFsitp68GQnl+fbQfG9KR/iKDHtXHSeWjnrajywkZwIJwpQTo5l7o0zrTc1MC2xlpwMp+5Tvl5sqGafzx2yRztdH4kb3u0kaybJ7xtzoWnnXG7qsnh9MTVvv2QkXfwE= -------------------------------------------------------------------------------- /docs/diagrams/elementPolygonProps.drawio: -------------------------------------------------------------------------------- 1 | 3VfLjpswFP0alqnAhiQsC/OIqlaqFFXTripPcMCqwYwxDcnX1waT4JhRUilIM8MG+/j6dY6PLzgwzptHjsrsG0swdYCbNA68cwDwPBfIl0L2HbKcBx2QcpLooBOwJgesQVejNUlwZQQKxqggpQluWFHgjTAwxDnbmWFbRs1ZS5RiC1hvELXRJ5KITO8CLE74CpM062f25mHXkqM+WO+kylDCdgMI3jsw5oyJrpQ3MaaKvJ6Xrt/DK63HhXFciGs6RE+H1fz3wY/LFXj5vp6Jr19+zPQofxGt9Yb1YsW+Z4CzukiwGsR1YLTLiMDrEm1U605qLrFM5FTWPFlMUJW1sapir7CfDnOBmwGkV/yIWY4F38sQ3QqWmj19fICv67uTGMDVWDYQ4ggifQDS49gnjmRB0/QflIHLlMlR5PnEl+lCVdkd2i1pFG3RllAaM8p4OxDsnttQCReLT4FBJoRHZEBnYJMZTEQltKhsHBDvLT7lDoVJHMcVOaDnNkAdS1QLVnWXR8srJWkhyxtJF5ZcRoomIl39WTfkJElU56hkpBDtvoLICe7OJChYoYIqwdkffAaavtiyQujbC/iqi9ScFGnEhGC5BP0b+cE3JTwe86GAI3bwp3KDb0nYcf5TCqmu5bby650r6i2nUxS6Z6b0wIgpvTFR4VSiBrYvgTKmfdO9Lx2ndKYfmJnKH8lUi4mcGfo0zGNwCIr8BVX1bBZs42vyFM9Y/lxXl/NUR3P/AQTHtRgQHX7Y7D+3WO3W8maMIb8aHtrnTbkDXpG3pnLHqI4LS0c97UcWkjOBBGFqEbPQvZFHvdDMX8BWdnkbZWX19LvUtg1+OuH9Pw== -------------------------------------------------------------------------------- /docs/guide/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/docs/guide/banner.png -------------------------------------------------------------------------------- /docs/guide/developers.md: -------------------------------------------------------------------------------- 1 | # Developers 2 | 3 | ## Access to the annotation elements 4 | 5 | The annotation plugin uses Chart.js elements to draw the annotation requested by the user. The following APIs allows the user to get the created annotation elements to use in callbacks or for other purposes. 6 | The APIs are available in the annotation plugin instance. 7 | 8 | #### Script Tag 9 | 10 | ```html 11 | 15 | ``` 16 | 17 | #### Bundlers (Webpack, Rollup, etc.) 18 | 19 | ```javascript 20 | // get annotation plugin instance 21 | import annotationPlugin from 'chartjs-plugin-annotation'; 22 | ``` 23 | 24 | ### `.getAnnotations(chart: Chart): AnnotationElement[]` 25 | 26 | It provides all annotation elements configured by the plugin options, even if the annotations are not visible. 27 | 28 | ```javascript 29 | const myLineChart = new Chart(ctx, config); 30 | // get all annotation elements 31 | const elements = annotationPlugin.getAnnotations(myLineChart); 32 | ``` 33 | -------------------------------------------------------------------------------- /docs/guide/index.md: -------------------------------------------------------------------------------- 1 | # Getting Started 2 | 3 | :::danger 4 | 5 | This plugin needs to be registered. It does not function as inline plugin. 6 | 7 | ::: 8 | 9 | An annotation plugin for Chart.js >= 4.0.0 10 | 11 | This plugin draws lines, boxes, labels, points, polygons and ellipses on the chart area. Annotations work with line, bar, scatter and bubble charts that use linear, logarithmic, time, or category scales. 12 | 13 | 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. 14 | 15 | Annotations will not work on any chart that does not have exactly two axes, including pie, radar, and polar area charts. 16 | 17 | ![Banner](./banner.png) 18 | 19 | ## Installation 20 | 21 | ```bash 22 | > npm install chartjs-plugin-annotation 23 | ``` 24 | 25 | ::: tip Important Note 26 | 27 | For Chart.js 3.7.0 to 3.9.1 support, use [version 2.2.1 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v2.2.1) 28 | 29 | For Chart.js 3.0.0 to 3.6.2 support, use [version 1.4.0 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v1.4.0) 30 | 31 | 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) 32 | 33 | Documentation for v0.5.7 can be found on [GitHub](https://github.com/chartjs/chartjs-plugin-annotation/blob/1ab782afce943456f958cac33f67edc5d6eab278/README.md). 34 | 35 | ::: 36 | -------------------------------------------------------------------------------- /docs/guide/integration.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Integration 3 | --- 4 | 5 | **`chartjs-plugin-annotation`** can be integrated with plain JavaScript or with different module loaders. The examples below show to load the plugin in different systems. 6 | 7 | ## Script Tag 8 | 9 | ```html 10 | 11 | 12 | 15 | ``` 16 | 17 | ## Bundlers (Webpack, Rollup, etc.) 18 | 19 | ```javascript 20 | import { Chart } from 'chart.js'; 21 | import annotationPlugin from 'chartjs-plugin-annotation'; 22 | 23 | Chart.register(annotationPlugin); 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/guide/migrationV3.md: -------------------------------------------------------------------------------- 1 | # 3.x Migration Guide 2 | 3 | **`chartjs-plugin-annotation`** plugin version 3 becomes an [ESM-only package](https://nodejs.org/api/esm.html). 4 | The [UMD bundle](integration.md#script-tag) is still available. 5 | 6 | ## Chart.js version 7 | 8 | The annotation plugin requires at least version 4.0.0 to work because of Chart.js becomes an ESM-only package. 9 | 10 | ### Type changes 11 | 12 | * The `init` options callback return value types have been changed from `void | boolean | AnnotationBoxModel` to `void | boolean | AnnotationElement`. 13 | -------------------------------------------------------------------------------- /docs/guide/usage.md: -------------------------------------------------------------------------------- 1 | # Usage 2 | 3 | Using the annotation plugin is very simple. Once the plugin is [registered](./integration) annotation options provided to the chart will be used. In this simple example, we define a single box annotation for our chart. 4 | 5 | ```js chart-editor 6 | /* */ 7 | const config = { 8 | type: 'line', 9 | data: { 10 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 11 | datasets: [{ 12 | label: 'My First Dataset', 13 | data: [65, 59, 80, 81, 56, 55, 40], 14 | fill: false, 15 | borderColor: 'rgb(75, 192, 192)', 16 | tension: 0.1 17 | }] 18 | }, 19 | options: { 20 | plugins: { 21 | annotation: { 22 | annotations: { 23 | box1: { 24 | // Indicates the type of annotation 25 | type: 'box', 26 | xMin: 1, 27 | xMax: 2, 28 | yMin: 50, 29 | yMax: 70, 30 | backgroundColor: 'rgba(255, 99, 132, 0.25)' 31 | } 32 | } 33 | } 34 | } 35 | } 36 | }; 37 | /* */ 38 | 39 | module.exports = { 40 | config 41 | }; 42 | ``` 43 | -------------------------------------------------------------------------------- /docs/img/chartjs-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 7 | 9 | 12 | 14 | 15 | -------------------------------------------------------------------------------- /docs/img/elementBoxProps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/docs/img/elementBoxProps.png -------------------------------------------------------------------------------- /docs/img/elementDoughnutLabelProps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/docs/img/elementDoughnutLabelProps.png -------------------------------------------------------------------------------- /docs/img/elementEllipseProps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/docs/img/elementEllipseProps.png -------------------------------------------------------------------------------- /docs/img/elementLabelProps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/docs/img/elementLabelProps.png -------------------------------------------------------------------------------- /docs/img/elementLineProps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/docs/img/elementLineProps.png -------------------------------------------------------------------------------- /docs/img/elementPointProps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/docs/img/elementPointProps.png -------------------------------------------------------------------------------- /docs/img/elementPolygonProps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/docs/img/elementPolygonProps.png -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | heroImage: /hero.svg 4 | actionText: Get Started → 5 | actionLink: /guide/ 6 | footer: MIT Licensed | Copyright © 2016-2023 chartjs-plugin-annotation contributors 7 | --- 8 | -------------------------------------------------------------------------------- /docs/samples/.eslintrc.yml: -------------------------------------------------------------------------------- 1 | rules: 2 | no-console: "off" 3 | -------------------------------------------------------------------------------- /docs/samples/doughnutLabel/canvas.md: -------------------------------------------------------------------------------- 1 | # Using canvas as content 2 | 3 | ```js chart-editor 4 | // 5 | const DATA_COUNT = 12; 6 | const MIN = 0; 7 | const MAX = 100; 8 | 9 | const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX, decimals: 0}; 10 | 11 | const data = { 12 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], 13 | datasets: [{ 14 | data: Utils.numbers(numberCfg) 15 | }] 16 | }; 17 | // 18 | 19 | // 20 | const annotation = { 21 | type: 'doughnutLabel', 22 | content: Utils.getHouse(), 23 | }; 24 | // 25 | 26 | /* */ 27 | const config = { 28 | type: 'doughnut', 29 | data, 30 | options: { 31 | aspectRatio: 2, 32 | plugins: { 33 | annotation: { 34 | annotations: { 35 | annotation 36 | } 37 | } 38 | } 39 | } 40 | }; 41 | /* */ 42 | 43 | const actions = [ 44 | { 45 | name: 'Randomize', 46 | handler: function(chart) { 47 | chart.data.datasets.forEach(function(dataset, i) { 48 | dataset.data = dataset.data.map(() => Utils.rand(MIN, MAX)); 49 | }); 50 | chart.update(); 51 | } 52 | } 53 | ]; 54 | 55 | module.exports = { 56 | actions: actions, 57 | config: config, 58 | }; 59 | ``` 60 | -------------------------------------------------------------------------------- /docs/samples/doughnutLabel/image.md: -------------------------------------------------------------------------------- 1 | # Using images as content 2 | 3 | ```js chart-editor 4 | // 5 | const DATA_COUNT = 12; 6 | const MIN = 0; 7 | const MAX = 100; 8 | 9 | const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX, decimals: 0}; 10 | 11 | const data = { 12 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], 13 | datasets: [{ 14 | data: Utils.numbers(numberCfg) 15 | }] 16 | }; 17 | // 18 | 19 | // 20 | const annotation = { 21 | type: 'doughnutLabel', 22 | content: Utils.getImage(), 23 | }; 24 | // 25 | 26 | /* */ 27 | const config = { 28 | type: 'doughnut', 29 | data, 30 | options: { 31 | aspectRatio: 2, 32 | plugins: { 33 | annotation: { 34 | annotations: { 35 | annotation 36 | } 37 | } 38 | } 39 | } 40 | }; 41 | /* */ 42 | 43 | const actions = [ 44 | { 45 | name: 'Randomize', 46 | handler: function(chart) { 47 | chart.data.datasets.forEach(function(dataset, i) { 48 | dataset.data = dataset.data.map(() => Utils.rand(MIN, MAX)); 49 | }); 50 | chart.update(); 51 | } 52 | } 53 | ]; 54 | 55 | module.exports = { 56 | actions: actions, 57 | config: config, 58 | }; 59 | ``` 60 | -------------------------------------------------------------------------------- /docs/samples/utils.md: -------------------------------------------------------------------------------- 1 | # Utils 2 | 3 | ## Disclaimer 4 | The Utils file contains multiple helper functions that the annotation plugin sample pages use to generate charts. 5 | These functions are subject to change, including but not limited to breaking changes without prior notice. 6 | 7 | Because of this please don't rely on this file in production environments. 8 | 9 | ## Functions 10 | 11 | <<< @/docs/scripts/utils.js 12 | 13 | [File on github](https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/scripts/utils.js) 14 | -------------------------------------------------------------------------------- /docs/scripts/defaults.js: -------------------------------------------------------------------------------- 1 | import {defaults} from 'chart.js'; 2 | 3 | defaults.set({ 4 | elements: { 5 | line: { 6 | tension: 0.4 7 | } 8 | }, 9 | plugins: { 10 | legend: false 11 | }, 12 | }); 13 | -------------------------------------------------------------------------------- /docs/scripts/register.js: -------------------------------------------------------------------------------- 1 | import Chart from 'chart.js/auto'; 2 | import plugin from '../../dist/chartjs-plugin-annotation.esm.js'; 3 | 4 | Chart.register(plugin); 5 | 6 | Chart.register({ 7 | id: 'version', 8 | afterDraw(chart) { 9 | const ctx = chart.ctx; 10 | ctx.save(); 11 | ctx.font = '9px monospace'; 12 | ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; 13 | ctx.textAlign = 'right'; 14 | ctx.textBaseline = 'top'; 15 | ctx.fillText('Chart.js v' + Chart.version + ' + chartjs-plugin-annotation v' + plugin.version, chart.chartArea.right, 0); 16 | ctx.restore(); 17 | } 18 | }); 19 | 20 | -------------------------------------------------------------------------------- /scripts/docs-config.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | set -e 4 | 5 | # tag is next|latest|master|x.x.x 6 | # https://www.chartjs.org/chartjs-pligin-annotation/$tag/ 7 | function tag_from_version { 8 | local version=$1 9 | local mode=$2 10 | local tag='' 11 | if [ "$version" == "master" ]; then 12 | tag=master 13 | elif [[ "$version" =~ ^[^-]+$ ]]; then 14 | if [[ "$mode" == "release" ]]; then 15 | tag=$version 16 | else 17 | tag=latest 18 | fi 19 | else 20 | tag=next 21 | fi 22 | echo $tag 23 | } 24 | 25 | VERSION=$1 26 | MODE=$2 27 | 28 | TAG=$(tag_from_version "$VERSION" "$MODE") 29 | 30 | sed -i -e "s/VERSION/$TAG/g" "docs/.vuepress/config.ts" 31 | -------------------------------------------------------------------------------- /src/helpers/helpers.geometric.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @typedef {import('chart.js').Point} Point 3 | */ 4 | 5 | /** 6 | * Rotate a `point` relative to `center` point by `angle` 7 | * @param {Point} point - the point to rotate 8 | * @param {Point} center - center point for rotation 9 | * @param {number} angle - angle for rotation, in radians 10 | * @returns {Point} rotated point 11 | */ 12 | export function rotated(point, center, angle) { 13 | const cos = Math.cos(angle); 14 | const sin = Math.sin(angle); 15 | const cx = center.x; 16 | const cy = center.y; 17 | 18 | return { 19 | x: cx + cos * (point.x - cx) - sin * (point.y - cy), 20 | y: cy + sin * (point.x - cx) + cos * (point.y - cy) 21 | }; 22 | } 23 | -------------------------------------------------------------------------------- /src/helpers/index.js: -------------------------------------------------------------------------------- 1 | export * from './helpers.callout'; 2 | export * from './helpers.canvas'; 3 | export * from './helpers.chart'; 4 | export * from './helpers.core'; 5 | export * from './helpers.geometric'; 6 | export * from './helpers.options'; 7 | -------------------------------------------------------------------------------- /src/hooks.js: -------------------------------------------------------------------------------- 1 | import {isFunction, callback} from 'chart.js/helpers'; 2 | import {loadHooks} from './helpers'; 3 | 4 | /** 5 | * @typedef { import("chart.js").Chart } Chart 6 | * @typedef { import('../../types/options').AnnotationPluginOptions } AnnotationPluginOptions 7 | * @typedef { import('../../types/element').AnnotationElement } AnnotationElement 8 | */ 9 | 10 | export const elementHooks = ['afterDraw', 'beforeDraw']; 11 | 12 | /** 13 | * @param {Chart} chart 14 | * @param {Object} state 15 | * @param {AnnotationPluginOptions} options 16 | */ 17 | export function updateHooks(chart, state, options) { 18 | const visibleElements = state.visibleElements; 19 | state.hooked = loadHooks(options, elementHooks, state.hooks); 20 | 21 | if (!state.hooked) { 22 | visibleElements.forEach(scope => { 23 | if (!state.hooked) { 24 | elementHooks.forEach(hook => { 25 | if (isFunction(scope.options[hook])) { 26 | state.hooked = true; 27 | } 28 | }); 29 | } 30 | }); 31 | } 32 | } 33 | 34 | /** 35 | * @param {Object} state 36 | * @param {AnnotationElement} element 37 | * @param {string} hook 38 | */ 39 | export function invokeHook(state, element, hook) { 40 | if (state.hooked) { 41 | const callbackHook = element.options[hook] || state.hooks[hook]; 42 | return callback(callbackHook, [element.$context]); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/index.esm.js: -------------------------------------------------------------------------------- 1 | export {default} from './annotation'; 2 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import {Chart} from 'chart.js'; 2 | import Annotation from './annotation'; 3 | 4 | Chart.register(Annotation); 5 | 6 | export default Annotation; 7 | -------------------------------------------------------------------------------- /src/types/index.js: -------------------------------------------------------------------------------- 1 | import {defaults} from 'chart.js'; 2 | import BoxAnnotation from './box'; 3 | import DoughnutLabelAnnotation from './doughnutLabel'; 4 | import LineAnnotation from './line'; 5 | import EllipseAnnotation from './ellipse'; 6 | import LabelAnnotation from './label'; 7 | import PointAnnotation from './point'; 8 | import PolygonAnnotation from './polygon'; 9 | 10 | export const annotationTypes = { 11 | box: BoxAnnotation, 12 | doughnutLabel: DoughnutLabelAnnotation, 13 | ellipse: EllipseAnnotation, 14 | label: LabelAnnotation, 15 | line: LineAnnotation, 16 | point: PointAnnotation, 17 | polygon: PolygonAnnotation 18 | }; 19 | 20 | export { 21 | BoxAnnotation, 22 | DoughnutLabelAnnotation, 23 | EllipseAnnotation, 24 | LabelAnnotation, 25 | LineAnnotation, 26 | PointAnnotation, 27 | PolygonAnnotation 28 | }; 29 | 30 | /** 31 | * Register fallback for annotation elements 32 | * For example lineAnnotation options would be looked through: 33 | * - the annotation object (options.plugins.annotation.annotations[id]) 34 | * - element options (options.elements.lineAnnotation) 35 | * - element defaults (defaults.elements.lineAnnotation) 36 | * - annotation plugin defaults (defaults.plugins.annotation, this is what we are registering here) 37 | */ 38 | Object.keys(annotationTypes).forEach(key => { 39 | defaults.describe(`elements.${annotationTypes[key].id}`, { 40 | _fallback: 'plugins.annotation.common' 41 | }); 42 | }); 43 | -------------------------------------------------------------------------------- /test/.eslintrc.yml: -------------------------------------------------------------------------------- 1 | env: 2 | jasmine: true 3 | 4 | globals: 5 | acquireChart: true 6 | afterEvent: true 7 | Chart: true 8 | createMockContext: true 9 | __karma__: true 10 | releaseChart: true 11 | waitForResize: true 12 | -------------------------------------------------------------------------------- /test/fixtures/box/adjustScaleFalse.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'bar', 5 | data: { 6 | datasets: [{ 7 | data: [0, 5, 10, 15, 20, 22] 8 | }] 9 | }, 10 | options: { 11 | scales: { 12 | x: { 13 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 14 | }, 15 | y: { 16 | display: true 17 | } 18 | }, 19 | plugins: { 20 | legend: false, 21 | annotation: { 22 | annotations: { 23 | box1: { 24 | type: 'box', 25 | adjustScaleRange: false, 26 | xMin: 1, 27 | xMax: 3, 28 | yMin: -2.3, 29 | yMax: 10, 30 | backgroundColor: 'rgba(33, 101, 171, 0.5)', 31 | borderColor: 'rgb(33, 101, 171)', 32 | borderWidth: 2 33 | }, 34 | box2: { 35 | type: 'box', 36 | adjustScaleRange: false, 37 | xMin: 4, 38 | xMax: 6, 39 | yMin: 10, 40 | yMax: 27, 41 | backgroundColor: 'rgba(33, 101, 171, 0.5)', 42 | borderColor: 'rgb(33, 101, 171)', 43 | borderWidth: 2 44 | } 45 | } 46 | } 47 | } 48 | } 49 | }, 50 | options: { 51 | spriteText: true 52 | } 53 | }; 54 | -------------------------------------------------------------------------------- /test/fixtures/box/adjustScaleFalse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/adjustScaleFalse.png -------------------------------------------------------------------------------- /test/fixtures/box/adjustScaleIgnore.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'bar', 5 | data: { 6 | datasets: [{ 7 | data: [0, 5, 10, 15, 20, 22] 8 | }] 9 | }, 10 | options: { 11 | scales: { 12 | x: { 13 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 14 | }, 15 | y: { 16 | display: true, 17 | min: 0, 18 | max: 25 19 | } 20 | }, 21 | plugins: { 22 | legend: false, 23 | annotation: { 24 | annotations: { 25 | box1: { 26 | type: 'box', 27 | xMin: 1, 28 | xMax: 3, 29 | yMin: -2.3, 30 | yMax: 10, 31 | backgroundColor: 'rgba(33, 101, 171, 0.5)', 32 | borderColor: 'rgb(33, 101, 171)', 33 | borderWidth: 2 34 | }, 35 | box2: { 36 | type: 'box', 37 | xMin: 4, 38 | xMax: 6, 39 | yMin: 10, 40 | yMax: 27, 41 | backgroundColor: 'rgba(33, 101, 171, 0.5)', 42 | borderColor: 'rgb(33, 101, 171)', 43 | borderWidth: 2 44 | } 45 | } 46 | } 47 | } 48 | } 49 | }, 50 | options: { 51 | spriteText: true 52 | } 53 | }; 54 | -------------------------------------------------------------------------------- /test/fixtures/box/adjustScaleIgnore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/adjustScaleIgnore.png -------------------------------------------------------------------------------- /test/fixtures/box/adjustScaleMax.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'bar', 5 | data: { 6 | datasets: [{ 7 | data: [0, 5, 10, 15, 20, 21] 8 | }] 9 | }, 10 | options: { 11 | scales: { 12 | x: { 13 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 14 | }, 15 | y: { 16 | display: true, 17 | min: 0 18 | } 19 | }, 20 | plugins: { 21 | legend: false, 22 | annotation: { 23 | annotations: { 24 | box: { 25 | type: 'box', 26 | xMin: 1.5, 27 | xMax: 3.5, 28 | yMin: 5, 29 | yMax: 27, 30 | backgroundColor: 'rgba(33, 101, 171, 0.5)', 31 | borderColor: 'rgb(33, 101, 171)', 32 | borderWidth: 2 33 | } 34 | } 35 | } 36 | } 37 | } 38 | }, 39 | options: { 40 | spriteText: true 41 | } 42 | }; 43 | -------------------------------------------------------------------------------- /test/fixtures/box/adjustScaleMax.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/adjustScaleMax.png -------------------------------------------------------------------------------- /test/fixtures/box/adjustScaleMin.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'bar', 5 | data: { 6 | datasets: [{ 7 | data: [0, 5, 10, 15, 20, 22] 8 | }] 9 | }, 10 | options: { 11 | scales: { 12 | x: { 13 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 14 | }, 15 | y: { 16 | display: true, 17 | max: 30 18 | } 19 | }, 20 | plugins: { 21 | legend: false, 22 | annotation: { 23 | annotations: { 24 | box: { 25 | type: 'box', 26 | xMin: 1.5, 27 | xMax: 3.5, 28 | yMin: -2.3, 29 | yMax: 10, 30 | backgroundColor: 'rgba(33, 101, 171, 0.5)', 31 | borderColor: 'rgb(33, 101, 171)', 32 | borderWidth: 2 33 | } 34 | } 35 | } 36 | } 37 | } 38 | }, 39 | options: { 40 | spriteText: true 41 | } 42 | }; 43 | -------------------------------------------------------------------------------- /test/fixtures/box/adjustScaleMin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/adjustScaleMin.png -------------------------------------------------------------------------------- /test/fixtures/box/borderDash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/borderDash.png -------------------------------------------------------------------------------- /test/fixtures/box/borderRadius.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/borderRadius.png -------------------------------------------------------------------------------- /test/fixtures/box/borderWidth0.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'bar', 4 | options: { 5 | scales: { 6 | x: { 7 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 8 | }, 9 | y: { 10 | display: false, 11 | min: 0, 12 | max: 25 13 | } 14 | }, 15 | plugins: { 16 | annotation: { 17 | annotations: { 18 | box1: { 19 | type: 'box', 20 | xMin: 1.5, 21 | xMax: 3.5, 22 | yMin: 5, 23 | yMax: 10, 24 | backgroundColor: 'rgba(33, 101, 171, 0.5)', 25 | borderColor: 'red', 26 | borderWidth: 0, 27 | }, 28 | } 29 | } 30 | } 31 | } 32 | }, 33 | options: { 34 | spriteText: true 35 | } 36 | }; 37 | -------------------------------------------------------------------------------- /test/fixtures/box/borderWidth0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/borderWidth0.png -------------------------------------------------------------------------------- /test/fixtures/box/category-index.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/category-index.png -------------------------------------------------------------------------------- /test/fixtures/box/drawTime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/drawTime.png -------------------------------------------------------------------------------- /test/fixtures/box/gradientBackground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/gradientBackground.png -------------------------------------------------------------------------------- /test/fixtures/box/hooks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/hooks.png -------------------------------------------------------------------------------- /test/fixtures/box/initAnimation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/initAnimation.png -------------------------------------------------------------------------------- /test/fixtures/box/label-dynamic.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'scatter', 4 | options: { 5 | scales: { 6 | x: { 7 | display: false, 8 | min: 0, 9 | max: 10 10 | }, 11 | y: { 12 | display: false, 13 | min: 0, 14 | max: 10 15 | } 16 | }, 17 | plugins: { 18 | annotation: { 19 | annotations: { 20 | box: { 21 | type: 'box', 22 | xMin: 1, 23 | xMax: 9, 24 | yMin: 1, 25 | yMax: 9, 26 | backgroundColor: 'rgba(255, 99, 132, 0.5)', 27 | borderColor: 'rgba(255, 99, 132)', 28 | borderWidth: 5, 29 | label: { 30 | display: false, 31 | content: 'This is dynamic!', 32 | }, 33 | enter({element}) { 34 | element.label.options.display = true; 35 | return true; 36 | } 37 | }, 38 | } 39 | } 40 | } 41 | } 42 | }, 43 | options: { 44 | canvas: { 45 | width: 256, 46 | height: 256 47 | }, 48 | spriteText: true, 49 | async run(chart) { 50 | const el = window.getAnnotationElements(chart)[0]; 51 | await window.triggerMouseEvent(chart, 'mousemove', el.getCenterPoint()); 52 | } 53 | } 54 | }; 55 | -------------------------------------------------------------------------------- /test/fixtures/box/label-dynamic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/label-dynamic.png -------------------------------------------------------------------------------- /test/fixtures/box/label.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/label.png -------------------------------------------------------------------------------- /test/fixtures/box/labelCanvas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/labelCanvas.png -------------------------------------------------------------------------------- /test/fixtures/box/labelCanvasOpacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/labelCanvasOpacity.png -------------------------------------------------------------------------------- /test/fixtures/box/labelDecoration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/labelDecoration.png -------------------------------------------------------------------------------- /test/fixtures/box/labelDrawTime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/labelDrawTime.png -------------------------------------------------------------------------------- /test/fixtures/box/labelMultiline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/labelMultiline.png -------------------------------------------------------------------------------- /test/fixtures/box/labelPadding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/labelPadding.png -------------------------------------------------------------------------------- /test/fixtures/box/labelPosition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/labelPosition.png -------------------------------------------------------------------------------- /test/fixtures/box/labelRotation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/labelRotation.png -------------------------------------------------------------------------------- /test/fixtures/box/missingBothScales.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'bar', 5 | options: { 6 | scales: { 7 | x: { 8 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 9 | }, 10 | y: { 11 | display: false, 12 | min: 0, 13 | max: 25 14 | } 15 | }, 16 | plugins: { 17 | annotation: { 18 | annotations: { 19 | box: { 20 | type: 'box', 21 | xScaleID: 'missingX', 22 | yScaleID: 'missingY', 23 | xMin: 'February', 24 | xMax: 'May', 25 | yMin: 5, 26 | yMax: 18, 27 | backgroundColor: 'rgba(33, 101, 171, 0.5)', 28 | borderColor: 'rgb(33, 101, 171)', 29 | borderWidth: 0, 30 | }, 31 | } 32 | } 33 | } 34 | } 35 | }, 36 | options: { 37 | spriteText: true 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /test/fixtures/box/missingBothScales.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/missingBothScales.png -------------------------------------------------------------------------------- /test/fixtures/box/missingXMinMax.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: true, 9 | min: -10, 10 | max: 50 11 | }, 12 | y: { 13 | display: false, 14 | min: -10, 15 | max: 50 16 | } 17 | }, 18 | plugins: { 19 | annotation: { 20 | annotations: { 21 | first: { 22 | type: 'box', 23 | xMax: 1, 24 | backgroundColor: 'rgba(159, 226, 191, 0.5)', 25 | }, 26 | second: { 27 | type: 'box', 28 | xMax: 30, 29 | xMin: 1, 30 | backgroundColor: 'rgba(255, 191, 0, 0.5)', 31 | }, 32 | third: { 33 | type: 'box', 34 | xMin: 30, 35 | backgroundColor: 'rgba(222, 49, 99, 0.5)', 36 | } 37 | } 38 | } 39 | } 40 | } 41 | }, 42 | options: { 43 | spriteText: true 44 | } 45 | }; 46 | -------------------------------------------------------------------------------- /test/fixtures/box/missingXMinMax.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/missingXMinMax.png -------------------------------------------------------------------------------- /test/fixtures/box/missingXMinMaxCategory.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'bar', 5 | data: { 6 | datasets: [{ 7 | data: [0, 0, 0, 0, 0, 0] 8 | }] 9 | }, 10 | options: { 11 | scales: { 12 | x: { 13 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 14 | }, 15 | y: { 16 | display: false 17 | } 18 | }, 19 | plugins: { 20 | legend: false, 21 | annotation: { 22 | annotations: { 23 | first: { 24 | type: 'box', 25 | xMax: 'February', 26 | backgroundColor: 'rgba(159, 226, 191, 0.5)', 27 | }, 28 | second: { 29 | type: 'box', 30 | xMax: 'April', 31 | xMin: 'February', 32 | backgroundColor: 'rgba(255, 191, 0, 0.5)', 33 | }, 34 | third: { 35 | type: 'box', 36 | xMin: 'April', 37 | backgroundColor: 'rgba(222, 49, 99, 0.5)', 38 | } 39 | } 40 | } 41 | } 42 | } 43 | }, 44 | options: { 45 | spriteText: true 46 | } 47 | }; 48 | -------------------------------------------------------------------------------- /test/fixtures/box/missingXMinMaxCategory.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/missingXMinMaxCategory.png -------------------------------------------------------------------------------- /test/fixtures/box/missingXMinMaxCategoryReverse.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'bar', 5 | data: { 6 | datasets: [{ 7 | data: [0, 0, 0, 0, 0, 0] 8 | }] 9 | }, 10 | options: { 11 | scales: { 12 | x: { 13 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 14 | reverse: true 15 | }, 16 | y: { 17 | display: false 18 | } 19 | }, 20 | plugins: { 21 | legend: false, 22 | annotation: { 23 | annotations: { 24 | first: { 25 | type: 'box', 26 | xMax: 'February', 27 | backgroundColor: 'rgba(159, 226, 191, 0.5)', 28 | }, 29 | second: { 30 | type: 'box', 31 | xMax: 'April', 32 | xMin: 'February', 33 | backgroundColor: 'rgba(255, 191, 0, 0.5)', 34 | }, 35 | third: { 36 | type: 'box', 37 | xMin: 'April', 38 | backgroundColor: 'rgba(222, 49, 99, 0.5)', 39 | } 40 | } 41 | } 42 | } 43 | } 44 | }, 45 | options: { 46 | spriteText: true 47 | } 48 | }; 49 | -------------------------------------------------------------------------------- /test/fixtures/box/missingXMinMaxCategoryReverse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/missingXMinMaxCategoryReverse.png -------------------------------------------------------------------------------- /test/fixtures/box/missingXScale.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'bar', 5 | options: { 6 | scales: { 7 | x: { 8 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 9 | }, 10 | y: { 11 | display: false, 12 | min: 0, 13 | max: 25 14 | } 15 | }, 16 | plugins: { 17 | annotation: { 18 | annotations: { 19 | box: { 20 | type: 'box', 21 | xScaleID: 'missing', 22 | yScaleID: 'y', 23 | xMin: 'February', 24 | xMax: 'May', 25 | yMin: 5, 26 | yMax: 18, 27 | backgroundColor: 'rgba(33, 101, 171, 0.5)', 28 | borderColor: 'rgb(33, 101, 171)', 29 | borderWidth: 0, 30 | }, 31 | } 32 | } 33 | } 34 | } 35 | }, 36 | options: { 37 | spriteText: true 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /test/fixtures/box/missingXScale.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/missingXScale.png -------------------------------------------------------------------------------- /test/fixtures/box/missingY2MinMaxStacked.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'bar', 5 | data: { 6 | datasets: [{ 7 | data: [0, 0, 0, 0, 0, 0] 8 | }] 9 | }, 10 | options: { 11 | scales: { 12 | x: { 13 | display: false, 14 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 15 | }, 16 | y: { 17 | display: true, 18 | stack: 'demo', 19 | stackWeight: 2, 20 | min: -10, 21 | max: 50 22 | }, 23 | y2: { 24 | type: 'category', 25 | display: true, 26 | labels: ['ON', 'OFF'], 27 | offset: true, 28 | position: 'left', 29 | stack: 'demo', 30 | stackWeight: 1, 31 | } 32 | }, 33 | plugins: { 34 | legend: false, 35 | annotation: { 36 | annotations: { 37 | first: { 38 | type: 'box', 39 | yScaleID: 'y2', 40 | yMax: 'OFF', 41 | backgroundColor: 'rgba(159, 226, 191, 0.5)', 42 | }, 43 | second: { 44 | type: 'box', 45 | yScaleID: 'y2', 46 | yMin: 'OFF', 47 | backgroundColor: 'rgba(255, 191, 0, 0.5)', 48 | }, 49 | } 50 | } 51 | } 52 | } 53 | }, 54 | options: { 55 | spriteText: true 56 | } 57 | }; 58 | -------------------------------------------------------------------------------- /test/fixtures/box/missingY2MinMaxStacked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/missingY2MinMaxStacked.png -------------------------------------------------------------------------------- /test/fixtures/box/missingYMinMax.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: false, 9 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 10 | }, 11 | y: { 12 | display: true, 13 | min: -10, 14 | max: 50 15 | } 16 | }, 17 | plugins: { 18 | annotation: { 19 | annotations: { 20 | first: { 21 | type: 'box', 22 | yMin: 30, 23 | backgroundColor: 'rgba(159, 226, 191, 0.5)', 24 | }, 25 | second: { 26 | type: 'box', 27 | yMax: 30, 28 | yMin: 1, 29 | backgroundColor: 'rgba(255, 191, 0, 0.5)', 30 | }, 31 | third: { 32 | type: 'box', 33 | yMax: 1, 34 | backgroundColor: 'rgba(222, 49, 99, 0.5)', 35 | } 36 | } 37 | } 38 | } 39 | } 40 | }, 41 | options: { 42 | spriteText: true 43 | } 44 | }; 45 | -------------------------------------------------------------------------------- /test/fixtures/box/missingYMinMax.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/missingYMinMax.png -------------------------------------------------------------------------------- /test/fixtures/box/missingYMinMaxReverse.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: false, 9 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 10 | }, 11 | y: { 12 | display: true, 13 | reverse: true, 14 | min: -10, 15 | max: 50 16 | } 17 | }, 18 | plugins: { 19 | annotation: { 20 | annotations: { 21 | first: { 22 | type: 'box', 23 | yMin: 30, 24 | backgroundColor: 'rgba(159, 226, 191, 0.5)', 25 | }, 26 | second: { 27 | type: 'box', 28 | yMax: 30, 29 | yMin: 1, 30 | backgroundColor: 'rgba(255, 191, 0, 0.5)', 31 | }, 32 | third: { 33 | type: 'box', 34 | yMax: 1, 35 | backgroundColor: 'rgba(222, 49, 99, 0.5)', 36 | } 37 | } 38 | } 39 | } 40 | } 41 | }, 42 | options: { 43 | spriteText: true 44 | } 45 | }; 46 | -------------------------------------------------------------------------------- /test/fixtures/box/missingYMinMaxReverse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/missingYMinMaxReverse.png -------------------------------------------------------------------------------- /test/fixtures/box/missingYMinMaxStacked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/missingYMinMaxStacked.png -------------------------------------------------------------------------------- /test/fixtures/box/missingYScale.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'bar', 5 | options: { 6 | scales: { 7 | x: { 8 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 9 | }, 10 | y: { 11 | display: false, 12 | min: 0, 13 | max: 25 14 | } 15 | }, 16 | plugins: { 17 | annotation: { 18 | annotations: { 19 | box: { 20 | type: 'box', 21 | xScaleID: 'x', 22 | yScaleID: 'missing', 23 | xMin: 'February', 24 | xMax: 'May', 25 | yMin: 5, 26 | yMax: 18, 27 | backgroundColor: 'rgba(33, 101, 171, 0.5)', 28 | borderColor: 'rgb(33, 101, 171)', 29 | borderWidth: 0, 30 | }, 31 | } 32 | } 33 | } 34 | } 35 | }, 36 | options: { 37 | spriteText: true 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /test/fixtures/box/missingYScale.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/missingYScale.png -------------------------------------------------------------------------------- /test/fixtures/box/partial-range.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'line', 4 | data: { 5 | datasets: [{ 6 | data: [10, 20, 30, 0, 55], 7 | }], 8 | labels: ['A', 'B', 'C', 'D', 'E'] 9 | }, 10 | options: { 11 | scales: { 12 | y: { 13 | max: 60 14 | }, 15 | }, 16 | plugins: { 17 | legend: false, 18 | annotation: { 19 | annotations: { 20 | annotation1: { 21 | type: 'box', 22 | backgroundColor: 'rgba(255, 99, 132, 0.25)', 23 | borderWidth: 3, 24 | borderColor: 'black', 25 | xMin: 'B', 26 | xMax: 'C', 27 | yMin: 20, 28 | yMax: 700, 29 | } 30 | } 31 | } 32 | }, 33 | } 34 | }, 35 | options: { 36 | spriteText: true, 37 | } 38 | }; 39 | -------------------------------------------------------------------------------- /test/fixtures/box/partial-range.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/partial-range.png -------------------------------------------------------------------------------- /test/fixtures/box/rotation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/rotation.png -------------------------------------------------------------------------------- /test/fixtures/box/scriptableOptions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/scriptableOptions.png -------------------------------------------------------------------------------- /test/fixtures/box/shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/shadow.png -------------------------------------------------------------------------------- /test/fixtures/box/shadowColors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/shadowColors.png -------------------------------------------------------------------------------- /test/fixtures/box/zIndex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/box/zIndex.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/autoHide.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'doughnut', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | }], 10 | }, 11 | options: { 12 | events: [], 13 | plugins: { 14 | annotation: { 15 | annotations: [ 16 | { 17 | type: 'doughnutLabel', 18 | content: ['Must not be', 'visible'], 19 | }, 20 | ] 21 | } 22 | } 23 | } 24 | }, 25 | options: { 26 | spriteText: true, 27 | canvas: { 28 | height: 256, 29 | width: 512 30 | }, 31 | run: (chart) => { 32 | return new Promise(resolve => { 33 | chart.hide(0, 0); 34 | chart.hide(0, 1); 35 | chart.hide(0, 2); 36 | chart.hide(0, 3); 37 | resolve(); 38 | }); 39 | } 40 | } 41 | }; 42 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/autoHide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/autoHide.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/backgroundColor.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'doughnut', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | }], 10 | }, 11 | options: { 12 | events: [], 13 | plugins: { 14 | legend: false, 15 | annotation: { 16 | annotations: [ 17 | { 18 | type: 'doughnutLabel', 19 | backgroundColor: 'red', 20 | borderWidth: 0, 21 | content: 't' 22 | }, 23 | ] 24 | } 25 | } 26 | } 27 | }, 28 | options: { 29 | canvas: { 30 | height: 256, 31 | width: 512 32 | } 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/backgroundColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/backgroundColor.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/backgroundColorPosRotatedChart.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'doughnut', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | }], 10 | }, 11 | options: { 12 | events: [], 13 | circumference: 180, 14 | rotation: 90, 15 | plugins: { 16 | legend: false, 17 | annotation: { 18 | annotations: [ 19 | { 20 | type: 'doughnutLabel', 21 | backgroundColor: 'red', 22 | borderColor: 'black', 23 | borderWidth: 2, 24 | content: 't' 25 | }, 26 | ] 27 | } 28 | } 29 | } 30 | }, 31 | options: { 32 | canvas: { 33 | height: 256, 34 | width: 512 35 | } 36 | } 37 | }; 38 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/backgroundColorPosRotatedChart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/backgroundColorPosRotatedChart.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/backgroundColorPosRotatedReducedChart.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'doughnut', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | }], 10 | }, 11 | options: { 12 | events: [], 13 | circumference: 145, 14 | rotation: 135, 15 | plugins: { 16 | legend: false, 17 | annotation: { 18 | annotations: [ 19 | { 20 | type: 'doughnutLabel', 21 | backgroundColor: 'red', 22 | borderColor: 'black', 23 | borderWidth: 2, 24 | content: 't' 25 | }, 26 | ] 27 | } 28 | } 29 | } 30 | }, 31 | options: { 32 | canvas: { 33 | height: 256, 34 | width: 512 35 | } 36 | } 37 | }; 38 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/backgroundColorPosRotatedReducedChart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/backgroundColorPosRotatedReducedChart.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/backgroundColorRotatedChart.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'doughnut', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | }], 10 | }, 11 | options: { 12 | events: [], 13 | circumference: 180, 14 | rotation: -90, 15 | plugins: { 16 | legend: false, 17 | annotation: { 18 | annotations: [ 19 | { 20 | type: 'doughnutLabel', 21 | backgroundColor: 'red', 22 | borderColor: 'black', 23 | borderWidth: 2, 24 | content: 't' 25 | }, 26 | ] 27 | } 28 | } 29 | } 30 | }, 31 | options: { 32 | canvas: { 33 | height: 256, 34 | width: 512 35 | } 36 | } 37 | }; 38 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/backgroundColorRotatedChart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/backgroundColorRotatedChart.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/backgroundColorRotatedReducedChart.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'doughnut', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | }], 10 | }, 11 | options: { 12 | events: [], 13 | circumference: 145, 14 | rotation: -45, 15 | plugins: { 16 | legend: false, 17 | annotation: { 18 | annotations: [ 19 | { 20 | type: 'doughnutLabel', 21 | backgroundColor: 'red', 22 | borderColor: 'black', 23 | borderWidth: 2, 24 | content: 't' 25 | }, 26 | ] 27 | } 28 | } 29 | } 30 | }, 31 | options: { 32 | canvas: { 33 | height: 256, 34 | width: 512 35 | } 36 | } 37 | }; 38 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/backgroundColorRotatedReducedChart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/backgroundColorRotatedReducedChart.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/basic.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'doughnut', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | }], 10 | }, 11 | options: { 12 | events: [], 13 | plugins: { 14 | legend: false, 15 | annotation: { 16 | annotations: [ 17 | { 18 | type: 'doughnutLabel', 19 | content: 'test' 20 | }, 21 | ] 22 | } 23 | } 24 | } 25 | }, 26 | options: { 27 | canvas: { 28 | height: 256, 29 | width: 512 30 | } 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/basic.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/border.js: -------------------------------------------------------------------------------- 1 | function content(ctx, opts) { 2 | return window.stringifyObject({dash: opts.borderDash, width: opts.borderWidth, radius: opts.borderRadius}); 3 | } 4 | 5 | module.exports = { 6 | tolerance: 0.0062, 7 | config: { 8 | type: 'doughnut', 9 | data: { 10 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 11 | datasets: [{ 12 | data: [102, 200, 80, 55], 13 | }], 14 | }, 15 | options: { 16 | events: [], 17 | plugins: { 18 | legend: false, 19 | annotation: { 20 | annotations: [ 21 | { 22 | type: 'doughnutLabel', 23 | borderColor: 'red', 24 | borderWidth: 1, 25 | content 26 | }, 27 | ] 28 | } 29 | } 30 | } 31 | }, 32 | options: { 33 | canvas: { 34 | height: 256, 35 | width: 512 36 | } 37 | } 38 | }; 39 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/border.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/border.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/canvas.js: -------------------------------------------------------------------------------- 1 | const canvas = window.createCanvas(); 2 | module.exports = { 3 | config: { 4 | type: 'doughnut', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | }], 10 | }, 11 | options: { 12 | events: [], 13 | plugins: { 14 | legend: false, 15 | annotation: { 16 | annotations: [ 17 | { 18 | type: 'doughnutLabel', 19 | content: canvas 20 | }, 21 | ] 22 | } 23 | } 24 | } 25 | }, 26 | options: { 27 | canvas: { 28 | height: 256, 29 | width: 512 30 | } 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/canvas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/canvas.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/contentMultiline.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0069, 3 | config: { 4 | type: 'doughnut', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | }], 10 | }, 11 | options: { 12 | events: [], 13 | plugins: { 14 | legend: false, 15 | annotation: { 16 | annotations: [ 17 | { 18 | type: 'doughnutLabel', 19 | content: ['row1', 'row2 with different length', 'row3', 'row4 with different length'] 20 | }, 21 | ] 22 | } 23 | } 24 | } 25 | }, 26 | options: { 27 | canvas: { 28 | height: 256, 29 | width: 512 30 | } 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/contentMultiline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/contentMultiline.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/contentMultilineColors.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'doughnut', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | }], 10 | }, 11 | options: { 12 | events: [], 13 | plugins: { 14 | legend: false, 15 | annotation: { 16 | annotations: [ 17 | { 18 | type: 'doughnutLabel', 19 | color: ['red', 'blue', 'green'], 20 | font: [{size: 24}, {size: 18}, {size: 14}, {size: 20}], 21 | content: ['row1', 'row2', 'row3', 'row4'] 22 | }, 23 | ] 24 | } 25 | } 26 | } 27 | }, 28 | options: { 29 | canvas: { 30 | height: 256, 31 | width: 512 32 | } 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/contentMultilineColors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/contentMultilineColors.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/contentMultilineFonts.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'doughnut', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | }], 10 | }, 11 | options: { 12 | events: [], 13 | plugins: { 14 | legend: false, 15 | annotation: { 16 | annotations: [ 17 | { 18 | type: 'doughnutLabel', 19 | font: [{size: 24}, {size: 18}, {size: 14}, {size: 20}], 20 | content: ['row1', 'row2', 'row3', 'row4'] 21 | }, 22 | ] 23 | } 24 | } 25 | } 26 | }, 27 | options: { 28 | canvas: { 29 | height: 256, 30 | width: 512 31 | } 32 | } 33 | }; 34 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/contentMultilineFonts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/contentMultilineFonts.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/doubleDatasets.js: -------------------------------------------------------------------------------- 1 | const canvas = window.createCanvas(); 2 | module.exports = { 3 | config: { 4 | type: 'doughnut', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | }, { 10 | data: [102, 200, 80, 55], 11 | }], 12 | }, 13 | options: { 14 | events: [], 15 | plugins: { 16 | legend: false, 17 | annotation: { 18 | annotations: [ 19 | { 20 | type: 'doughnutLabel', 21 | content: canvas 22 | }, 23 | ] 24 | } 25 | } 26 | } 27 | }, 28 | options: { 29 | canvas: { 30 | height: 256, 31 | width: 512 32 | } 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/doubleDatasets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/doubleDatasets.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/drawTime.js: -------------------------------------------------------------------------------- 1 | const canvas = window.createCanvas(); 2 | module.exports = { 3 | config: { 4 | type: 'doughnut', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | backgroundColor: 'red' 10 | }], 11 | }, 12 | options: { 13 | events: [], 14 | plugins: { 15 | legend: false, 16 | annotation: { 17 | annotations: [ 18 | { 19 | type: 'doughnutLabel', 20 | content: canvas, 21 | drawTime: 'beforeDraw', 22 | autoFit: false 23 | }, 24 | ] 25 | } 26 | } 27 | } 28 | }, 29 | options: { 30 | canvas: { 31 | height: 256, 32 | width: 512 33 | } 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/drawTime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/drawTime.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/initAnimation.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'doughnut', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | }], 10 | }, 11 | options: { 12 | events: [], 13 | plugins: { 14 | legend: false, 15 | annotation: { 16 | annotations: [ 17 | { 18 | type: 'doughnutLabel', 19 | content: 'test', 20 | init: true 21 | }, 22 | ] 23 | } 24 | } 25 | } 26 | }, 27 | options: { 28 | canvas: { 29 | height: 256, 30 | width: 512 31 | } 32 | } 33 | }; 34 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/initAnimation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/initAnimation.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/noAutoHide.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'doughnut', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | }], 10 | }, 11 | options: { 12 | events: [], 13 | plugins: { 14 | annotation: { 15 | annotations: [ 16 | { 17 | type: 'doughnutLabel', 18 | content: ['Must be', 'visible'], 19 | autoHide: false, 20 | }, 21 | ] 22 | } 23 | } 24 | } 25 | }, 26 | options: { 27 | spriteText: true, 28 | canvas: { 29 | height: 256, 30 | width: 512 31 | }, 32 | run: (chart) => { 33 | return new Promise(resolve => { 34 | chart.hide(0, 0); 35 | chart.hide(0, 1); 36 | chart.hide(0, 2); 37 | chart.hide(0, 3); 38 | resolve(); 39 | }); 40 | } 41 | } 42 | }; 43 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/noAutoHide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/noAutoHide.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/noBackgroundColorCircumTooSmall.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'doughnut', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | }], 10 | }, 11 | options: { 12 | events: [], 13 | circumference: 89, 14 | plugins: { 15 | legend: false, 16 | annotation: { 17 | annotations: [ 18 | { 19 | type: 'doughnutLabel', 20 | backgroundColor: 'red', 21 | borderWidth: 0, 22 | content: 't' 23 | }, 24 | ] 25 | } 26 | } 27 | } 28 | }, 29 | options: { 30 | canvas: { 31 | height: 256, 32 | width: 512 33 | } 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/noBackgroundColorCircumTooSmall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/noBackgroundColorCircumTooSmall.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/noContent.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'doughnut', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | }], 10 | }, 11 | options: { 12 | events: [], 13 | plugins: { 14 | legend: false, 15 | annotation: { 16 | annotations: [ 17 | { 18 | type: 'doughnutLabel' 19 | }, 20 | ] 21 | } 22 | } 23 | } 24 | }, 25 | options: { 26 | canvas: { 27 | height: 256, 28 | width: 512 29 | } 30 | } 31 | }; 32 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/noContent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/noContent.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/noDisplay.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'doughnut', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | }], 10 | }, 11 | options: { 12 | events: [], 13 | plugins: { 14 | legend: false, 15 | annotation: { 16 | annotations: [ 17 | { 18 | type: 'doughnutLabel', 19 | display: false 20 | }, 21 | ] 22 | } 23 | } 24 | } 25 | }, 26 | options: { 27 | canvas: { 28 | height: 256, 29 | width: 512 30 | } 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/noDisplay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/noDisplay.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/noDoughnut.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'line', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | }], 10 | }, 11 | options: { 12 | events: [], 13 | scales: { 14 | x: { 15 | display: false 16 | }, 17 | y: { 18 | display: false 19 | } 20 | }, 21 | plugins: { 22 | legend: false, 23 | annotation: { 24 | annotations: [ 25 | { 26 | type: 'doughnutLabel', 27 | font: [{size: 24}, {size: 18}, {size: 14}, {size: 20}], 28 | content: ['row1', 'row2', 'row3', 'row4'] 29 | }, 30 | { 31 | type: 'label', 32 | content: 'Normal label to show' 33 | } 34 | ] 35 | } 36 | } 37 | } 38 | }, 39 | options: { 40 | canvas: { 41 | height: 256, 42 | width: 512 43 | } 44 | } 45 | }; 46 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/noDoughnut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/noDoughnut.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/noFit.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0090, 3 | config: { 4 | type: 'doughnut', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | }], 10 | }, 11 | options: { 12 | events: [], 13 | plugins: { 14 | legend: false, 15 | annotation: { 16 | annotations: [ 17 | { 18 | type: 'doughnutLabel', 19 | content: ['row1', 'row2 with different length', 'row3', 'row4 with different length'], 20 | autoFit: false 21 | }, 22 | ] 23 | } 24 | } 25 | } 26 | }, 27 | options: { 28 | canvas: { 29 | height: 256, 30 | width: 512 31 | } 32 | } 33 | }; 34 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/noFit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/noFit.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/noFitCanvas.js: -------------------------------------------------------------------------------- 1 | const canvas = window.createCanvas(); 2 | module.exports = { 3 | config: { 4 | type: 'doughnut', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | }], 10 | }, 11 | options: { 12 | events: [], 13 | plugins: { 14 | legend: false, 15 | annotation: { 16 | annotations: [ 17 | { 18 | type: 'doughnutLabel', 19 | content: canvas, 20 | autoFit: false 21 | }, 22 | ] 23 | } 24 | } 25 | } 26 | }, 27 | options: { 28 | canvas: { 29 | height: 256, 30 | width: 512 31 | } 32 | } 33 | }; 34 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/noFitCanvas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/noFitCanvas.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/rotatedChart.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'doughnut', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | }], 10 | }, 11 | options: { 12 | circumference: 180, 13 | rotation: -90, 14 | events: [], 15 | plugins: { 16 | legend: false, 17 | annotation: { 18 | annotations: [ 19 | { 20 | type: 'doughnutLabel', 21 | font: [{size: 24}, {size: 18}, {size: 14}, {size: 20}], 22 | content: ['row1', 'row2', 'row3', 'row4'] 23 | }, 24 | ] 25 | } 26 | } 27 | } 28 | }, 29 | options: { 30 | canvas: { 31 | height: 256, 32 | width: 512 33 | } 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/rotatedChart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/rotatedChart.png -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/rotation.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0072, 3 | config: { 4 | type: 'doughnut', 5 | data: { 6 | labels: ['Data1', 'Data2', 'Data3', 'Data4'], 7 | datasets: [{ 8 | data: [102, 200, 80, 55], 9 | }], 10 | }, 11 | options: { 12 | events: [], 13 | plugins: { 14 | legend: false, 15 | annotation: { 16 | annotations: [ 17 | { 18 | type: 'doughnutLabel', 19 | content: ['row1', 'row2 with different length', 'row3', 'row4 with different length'], 20 | rotation: 45 21 | }, 22 | ] 23 | } 24 | } 25 | } 26 | }, 27 | options: { 28 | canvas: { 29 | height: 256, 30 | width: 512 31 | } 32 | } 33 | }; 34 | -------------------------------------------------------------------------------- /test/fixtures/doughnutLabel/rotation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/doughnutLabel/rotation.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/borderDash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/borderDash.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/drawTime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/drawTime.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/gradientBackground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/gradientBackground.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/hooks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/hooks.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/initAnimation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/initAnimation.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/label-dynamic.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'scatter', 4 | options: { 5 | scales: { 6 | x: { 7 | display: false, 8 | min: 0, 9 | max: 10 10 | }, 11 | y: { 12 | display: false, 13 | min: 0, 14 | max: 10 15 | } 16 | }, 17 | plugins: { 18 | annotation: { 19 | annotations: { 20 | ellipse: { 21 | type: 'ellipse', 22 | xMin: 1, 23 | xMax: 9, 24 | yMin: 1, 25 | yMax: 9, 26 | backgroundColor: 'rgba(255, 99, 132, 0.5)', 27 | borderColor: 'rgba(255, 99, 132)', 28 | borderWidth: 5, 29 | label: { 30 | display: false, 31 | content: 'This is dynamic!', 32 | }, 33 | enter({element}) { 34 | element.label.options.display = true; 35 | return true; 36 | } 37 | }, 38 | } 39 | } 40 | } 41 | } 42 | }, 43 | options: { 44 | canvas: { 45 | width: 256, 46 | height: 256 47 | }, 48 | spriteText: true, 49 | async run(chart) { 50 | const el = window.getAnnotationElements(chart)[0]; 51 | await window.triggerMouseEvent(chart, 'mousemove', el.getCenterPoint()); 52 | } 53 | } 54 | }; 55 | -------------------------------------------------------------------------------- /test/fixtures/ellipse/label-dynamic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/label-dynamic.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/label.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/label.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/labelCanvas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/labelCanvas.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/labelCanvasOpacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/labelCanvasOpacity.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/labelDecoration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/labelDecoration.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/labelDrawTime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/labelDrawTime.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/labelMultiline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/labelMultiline.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/labelPadding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/labelPadding.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/labelPosition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/labelPosition.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/labelRotation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/labelRotation.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/missingBothScales.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'bar', 5 | options: { 6 | scales: { 7 | x: { 8 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 9 | }, 10 | y: { 11 | display: false, 12 | min: 0, 13 | max: 25 14 | } 15 | }, 16 | plugins: { 17 | annotation: { 18 | annotations: { 19 | ellipse: { 20 | type: 'ellipse', 21 | xScaleID: 'missingX', 22 | yScaleID: 'missingY', 23 | xMin: 'February', 24 | xMax: 'May', 25 | yMin: 5, 26 | yMax: 18, 27 | backgroundColor: 'rgba(33, 101, 171, 0.5)', 28 | borderColor: 'rgb(33, 101, 171)', 29 | borderWidth: 0, 30 | }, 31 | } 32 | } 33 | } 34 | } 35 | }, 36 | options: { 37 | spriteText: true 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /test/fixtures/ellipse/missingBothScales.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/missingBothScales.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/missingXScale.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'bar', 5 | options: { 6 | scales: { 7 | x: { 8 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 9 | }, 10 | y: { 11 | display: false, 12 | min: 0, 13 | max: 25 14 | } 15 | }, 16 | plugins: { 17 | annotation: { 18 | annotations: { 19 | ellipse: { 20 | type: 'ellipse', 21 | xScaleID: 'missing', 22 | yScaleID: 'y', 23 | xMin: 'February', 24 | xMax: 'May', 25 | yMin: 5, 26 | yMax: 18, 27 | backgroundColor: 'rgba(33, 101, 171, 0.5)', 28 | borderColor: 'rgb(33, 101, 171)', 29 | borderWidth: 0, 30 | }, 31 | } 32 | } 33 | } 34 | } 35 | }, 36 | options: { 37 | spriteText: true 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /test/fixtures/ellipse/missingXScale.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/missingXScale.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/missingYScale.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'bar', 5 | options: { 6 | scales: { 7 | x: { 8 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 9 | }, 10 | y: { 11 | display: false, 12 | min: 0, 13 | max: 25 14 | } 15 | }, 16 | plugins: { 17 | annotation: { 18 | annotations: { 19 | ellipse: { 20 | type: 'ellipse', 21 | xScaleID: 'x', 22 | yScaleID: 'missing', 23 | xMin: 'February', 24 | xMax: 'May', 25 | yMin: 5, 26 | yMax: 18, 27 | backgroundColor: 'rgba(33, 101, 171, 0.5)', 28 | borderColor: 'rgb(33, 101, 171)', 29 | borderWidth: 0, 30 | }, 31 | } 32 | } 33 | } 34 | } 35 | }, 36 | options: { 37 | spriteText: true 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /test/fixtures/ellipse/missingYScale.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/missingYScale.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/partial-range.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'line', 4 | data: { 5 | datasets: [{ 6 | data: [10, 20, 30, 0, 55], 7 | }], 8 | labels: ['A', 'B', 'C', 'D', 'E'] 9 | }, 10 | options: { 11 | scales: { 12 | y: { 13 | max: 60 14 | }, 15 | }, 16 | plugins: { 17 | legend: false, 18 | annotation: { 19 | annotations: { 20 | annotation1: { 21 | type: 'ellipse', 22 | backgroundColor: 'rgba(255, 99, 132, 0.25)', 23 | borderWidth: 3, 24 | borderColor: 'black', 25 | xMin: 'B', 26 | xMax: 'C', 27 | yMin: 20, 28 | yMax: 700, 29 | } 30 | } 31 | } 32 | }, 33 | } 34 | }, 35 | options: { 36 | spriteText: true, 37 | } 38 | }; 39 | -------------------------------------------------------------------------------- /test/fixtures/ellipse/partial-range.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/partial-range.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/rotation.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'scatter', 4 | options: { 5 | scales: { 6 | x: {min: 0, max: 100}, 7 | y: {min: 0, max: 100} 8 | }, 9 | plugins: { 10 | legend: false, 11 | annotation: { 12 | annotations: { 13 | annotation1: { 14 | type: 'ellipse', 15 | backgroundColor: '#f00', 16 | borderColor: '#000', 17 | borderWidth: 1, 18 | rotation: -45, 19 | xMin: 0, 20 | xMax: 100, 21 | yMin: 40, 22 | yMax: 60, 23 | } 24 | } 25 | } 26 | }, 27 | } 28 | }, 29 | options: { 30 | spriteText: true, 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /test/fixtures/ellipse/rotation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/rotation.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/scriptableOptions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/scriptableOptions.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/shadow.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/shadowColors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/shadowColors.png -------------------------------------------------------------------------------- /test/fixtures/ellipse/zIndex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/ellipse/zIndex.png -------------------------------------------------------------------------------- /test/fixtures/label/border.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/border.png -------------------------------------------------------------------------------- /test/fixtures/label/boxLocation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/boxLocation.png -------------------------------------------------------------------------------- /test/fixtures/label/boxNotVisible.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'bar', 5 | options: { 6 | scales: { 7 | x: { 8 | display: false, 9 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 10 | }, 11 | y: { 12 | display: false, 13 | min: 0, 14 | max: 25 15 | } 16 | }, 17 | plugins: { 18 | annotation: { 19 | annotations: { 20 | text1: { 21 | type: 'label', 22 | xValue: 'April', 23 | yValue: 4, 24 | content: 'no borderWidth, no backgroundColor' 25 | }, 26 | text2: { 27 | type: 'label', 28 | xValue: 'April', 29 | yValue: 12, 30 | backgroundColor: 'missing', 31 | borderWidth: 0, 32 | content: ['borderWidth: 0, wrong backgroundColor', 'use default fill style: #000 (black)'] 33 | }, 34 | text3: { 35 | type: 'label', 36 | xValue: 'April', 37 | yValue: 20, 38 | backgroundColor: 'rgba(250,250,250,0)', 39 | borderWidth: 0, 40 | content: 'borderWidth: 0, backgroundColor: rgba(250,250,250,0)' 41 | } 42 | } 43 | } 44 | } 45 | } 46 | }, 47 | options: { 48 | spriteText: true 49 | } 50 | }; 51 | -------------------------------------------------------------------------------- /test/fixtures/label/boxNotVisible.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/boxNotVisible.png -------------------------------------------------------------------------------- /test/fixtures/label/calloutBasic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/calloutBasic.png -------------------------------------------------------------------------------- /test/fixtures/label/calloutCanvas.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: true, 9 | min: -10, 10 | max: 10 11 | }, 12 | y: { 13 | display: true, 14 | min: -10, 15 | max: 10 16 | } 17 | }, 18 | plugins: { 19 | legend: false, 20 | annotation: { 21 | annotations: { 22 | canvas: { 23 | type: 'label', 24 | xValue: 6, 25 | yValue: -6, 26 | content: window.createCanvas, 27 | position: { 28 | x: 'center', 29 | y: 'center' 30 | }, 31 | xAdjust: -150, 32 | yAdjust: -230, 33 | callout: { 34 | display: true, 35 | position: 'bottom' 36 | } 37 | } 38 | } 39 | } 40 | } 41 | } 42 | } 43 | }; 44 | -------------------------------------------------------------------------------- /test/fixtures/label/calloutCanvas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/calloutCanvas.png -------------------------------------------------------------------------------- /test/fixtures/label/calloutHorizontalPosition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/calloutHorizontalPosition.png -------------------------------------------------------------------------------- /test/fixtures/label/calloutNoShown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/calloutNoShown.png -------------------------------------------------------------------------------- /test/fixtures/label/calloutRotation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/calloutRotation.png -------------------------------------------------------------------------------- /test/fixtures/label/calloutScriptableOptions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/calloutScriptableOptions.png -------------------------------------------------------------------------------- /test/fixtures/label/calloutSizing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/calloutSizing.png -------------------------------------------------------------------------------- /test/fixtures/label/calloutVerticalPosition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/calloutVerticalPosition.png -------------------------------------------------------------------------------- /test/fixtures/label/canvas.js: -------------------------------------------------------------------------------- 1 | const canvas = window.createCanvas(); 2 | module.exports = { 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: false, 9 | min: -10, 10 | max: 10 11 | }, 12 | y: { 13 | display: false, 14 | min: -10, 15 | max: 10 16 | } 17 | }, 18 | plugins: { 19 | legend: false, 20 | annotation: { 21 | annotations: { 22 | canvas: { 23 | type: 'label', 24 | xValue: 0, 25 | yValue: 0, 26 | content: canvas 27 | }, 28 | canvasSmall: { 29 | type: 'label', 30 | xValue: -6, 31 | yValue: 6, 32 | content: canvas, 33 | width: 100, 34 | height: () => 100 * canvas.height / canvas.width, 35 | }, 36 | canvasPerc: { 37 | type: 'label', 38 | xValue: 6, 39 | yValue: -6, 40 | content: canvas, 41 | width: '50%', 42 | height: '50%', 43 | } 44 | } 45 | } 46 | } 47 | } 48 | } 49 | }; 50 | -------------------------------------------------------------------------------- /test/fixtures/label/canvas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/canvas.png -------------------------------------------------------------------------------- /test/fixtures/label/canvasOpacity.js: -------------------------------------------------------------------------------- 1 | const canvas = window.createCanvas(); 2 | canvas.style.opacity = 0.2; 3 | module.exports = { 4 | config: { 5 | type: 'scatter', 6 | options: { 7 | scales: { 8 | x: { 9 | display: false, 10 | min: -10, 11 | max: 10 12 | }, 13 | y: { 14 | display: false, 15 | min: -10, 16 | max: 10 17 | } 18 | }, 19 | plugins: { 20 | legend: false, 21 | annotation: { 22 | annotations: { 23 | canvas: { 24 | type: 'label', 25 | xValue: 0, 26 | yValue: 0, 27 | content: canvas 28 | }, 29 | canvasSmall: { 30 | type: 'label', 31 | xValue: -6, 32 | yValue: 6, 33 | content: canvas, 34 | width: 100, 35 | height: () => 100 * canvas.height / canvas.width, 36 | opacity: 0.6, 37 | }, 38 | canvasPerc: { 39 | type: 'label', 40 | xValue: 6, 41 | yValue: -6, 42 | content: canvas, 43 | opacity: 'mistake', 44 | width: '50%', 45 | height: '50%', 46 | } 47 | } 48 | } 49 | } 50 | } 51 | } 52 | }; 53 | -------------------------------------------------------------------------------- /test/fixtures/label/canvasOpacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/canvasOpacity.png -------------------------------------------------------------------------------- /test/fixtures/label/clip-false.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0075, 3 | config: { 4 | type: 'bar', 5 | options: { 6 | scales: { 7 | x: { 8 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 9 | }, 10 | y: { 11 | min: 0, 12 | max: 10 13 | } 14 | }, 15 | plugins: { 16 | annotation: { 17 | clip: false, 18 | annotations: { 19 | text1: { 20 | type: 'label', 21 | xValue: 4, 22 | yValue: 0, 23 | backgroundColor: 'rgba(33, 101, 171, 0.5)', 24 | borderColor: 'rgb(33, 101, 171)', 25 | borderWidth: 1, 26 | content: ['This is my text', 'and this is the second row of my text'], 27 | position: { 28 | x: 'end', 29 | y: 'start' 30 | }, 31 | } 32 | } 33 | } 34 | } 35 | } 36 | }, 37 | options: { 38 | spriteText: true, 39 | canvas: { 40 | width: 256, 41 | height: 256 42 | } 43 | } 44 | }; 45 | -------------------------------------------------------------------------------- /test/fixtures/label/clip-false.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/clip-false.png -------------------------------------------------------------------------------- /test/fixtures/label/contentMultiline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/contentMultiline.png -------------------------------------------------------------------------------- /test/fixtures/label/contentMultilineColors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/contentMultilineColors.png -------------------------------------------------------------------------------- /test/fixtures/label/contentMultilineFonts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/contentMultilineFonts.png -------------------------------------------------------------------------------- /test/fixtures/label/decoration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/decoration.png -------------------------------------------------------------------------------- /test/fixtures/label/gradientBackground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/gradientBackground.png -------------------------------------------------------------------------------- /test/fixtures/label/hooks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/hooks.png -------------------------------------------------------------------------------- /test/fixtures/label/initAnimation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/initAnimation.png -------------------------------------------------------------------------------- /test/fixtures/label/missingScales.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/missingScales.png -------------------------------------------------------------------------------- /test/fixtures/label/missingValuesStacked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/missingValuesStacked.png -------------------------------------------------------------------------------- /test/fixtures/label/noCalloutIfAdjusted.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'bar', 4 | options: { 5 | scales: { 6 | x: { 7 | display: false, 8 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 9 | }, 10 | y: { 11 | display: false, 12 | min: 0, 13 | max: 25 14 | } 15 | }, 16 | plugins: { 17 | annotation: { 18 | annotations: { 19 | without: { 20 | type: 'label', 21 | xValue: 'February', 22 | yValue: 12.5, 23 | backgroundColor: 'rgba(33, 101, 171, 0.5)', 24 | borderColor: 'rgb(33, 101, 171)', 25 | borderWidth: 1, 26 | content: ['adjusted label', 'without callout'], 27 | xAdjust: 50, 28 | yAdjust: -100 29 | }, 30 | display: { 31 | type: 'label', 32 | xValue: 'May', 33 | yValue: 12.5, 34 | backgroundColor: 'rgba(33, 101, 171, 0.5)', 35 | borderColor: 'rgb(33, 101, 171)', 36 | borderWidth: 1, 37 | content: ['adjusted label', 'with callout'], 38 | xAdjust: 50, 39 | yAdjust: -100, 40 | callout: { 41 | display: true 42 | } 43 | } 44 | } 45 | } 46 | } 47 | } 48 | }, 49 | options: { 50 | spriteText: true 51 | } 52 | }; 53 | -------------------------------------------------------------------------------- /test/fixtures/label/noCalloutIfAdjusted.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/noCalloutIfAdjusted.png -------------------------------------------------------------------------------- /test/fixtures/label/padding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/padding.png -------------------------------------------------------------------------------- /test/fixtures/label/positionHorizontal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/positionHorizontal.png -------------------------------------------------------------------------------- /test/fixtures/label/positionVertical.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/positionVertical.png -------------------------------------------------------------------------------- /test/fixtures/label/rotation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/rotation.png -------------------------------------------------------------------------------- /test/fixtures/label/scriptableOptions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/scriptableOptions.png -------------------------------------------------------------------------------- /test/fixtures/label/shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/shadow.png -------------------------------------------------------------------------------- /test/fixtures/label/shadowColors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/label/shadowColors.png -------------------------------------------------------------------------------- /test/fixtures/line/arrowHeads.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/arrowHeads.png -------------------------------------------------------------------------------- /test/fixtures/line/arrowHeadsDeleteAtRuntime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/arrowHeadsDeleteAtRuntime.png -------------------------------------------------------------------------------- /test/fixtures/line/arrowHeadsFallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/arrowHeadsFallback.png -------------------------------------------------------------------------------- /test/fixtures/line/arrowHeadsFill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/arrowHeadsFill.png -------------------------------------------------------------------------------- /test/fixtures/line/arrowHeadsFillScriptableOptions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/arrowHeadsFillScriptableOptions.png -------------------------------------------------------------------------------- /test/fixtures/line/axis-index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'line', 4 | data: { 5 | datasets: [{ 6 | data: [10, 20, 30, 0, 55], 7 | }], 8 | labels: ['A', 'B', 'C', 'D', 'E'] 9 | }, 10 | options: { 11 | plugins: { 12 | legend: false, 13 | annotation: { 14 | annotations: { 15 | annotation1: { 16 | type: 'line', 17 | scaleID: 'y', 18 | borderWidth: 3, 19 | borderColor: 'black', 20 | value: (ctx) => { 21 | if (ctx.type === 'annotation') { 22 | const scale = ctx.chart.scales.y; 23 | if (scale.ticks && scale.ticks.length > 1) { 24 | return scale.ticks[1].value; 25 | } 26 | } 27 | return 0; 28 | }, 29 | } 30 | } 31 | } 32 | }, 33 | } 34 | }, 35 | options: { 36 | spriteText: true, 37 | run(chart) { 38 | chart.hide(0); 39 | chart.show(0); 40 | } 41 | } 42 | }; 43 | -------------------------------------------------------------------------------- /test/fixtures/line/axis-index.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/axis-index.png -------------------------------------------------------------------------------- /test/fixtures/line/borderWidth0.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'scatter', 4 | options: { 5 | scales: { 6 | x: { 7 | display: true, 8 | min: 0, 9 | max: 100 10 | }, 11 | y: { 12 | display: true, 13 | min: 0, 14 | max: 100 15 | } 16 | }, 17 | plugins: { 18 | annotation: { 19 | annotations: { 20 | line: { 21 | type: 'line', 22 | scaleID: 'y', 23 | value: 0, 24 | endValue: 80, 25 | borderWidth: 0 26 | } 27 | } 28 | } 29 | } 30 | } 31 | }, 32 | options: { 33 | spriteText: true 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /test/fixtures/line/borderWidth0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/borderWidth0.png -------------------------------------------------------------------------------- /test/fixtures/line/curveArrowHeads.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/curveArrowHeads.png -------------------------------------------------------------------------------- /test/fixtures/line/curveCPHorizontal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/curveCPHorizontal.png -------------------------------------------------------------------------------- /test/fixtures/line/curveCPHorizontalPercent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/curveCPHorizontalPercent.png -------------------------------------------------------------------------------- /test/fixtures/line/curveCPVertical.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/curveCPVertical.png -------------------------------------------------------------------------------- /test/fixtures/line/curveCPVerticalPercent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/curveCPVerticalPercent.png -------------------------------------------------------------------------------- /test/fixtures/line/curvePosition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/curvePosition.png -------------------------------------------------------------------------------- /test/fixtures/line/curvePositionPercent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/curvePositionPercent.png -------------------------------------------------------------------------------- /test/fixtures/line/direction-reverse.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'line', 4 | options: { 5 | scales: { 6 | x: {type: 'linear', min: 0, max: 10}, 7 | y: {type: 'linear', min: 0, max: 10, reverse: true} 8 | }, 9 | plugins: { 10 | legend: false, 11 | annotation: { 12 | annotations: [ 13 | { 14 | type: 'line', 15 | xMin: 3, 16 | xMax: 5, 17 | yMin: 11, 18 | yMax: 8, 19 | borderColor: 'blue' 20 | }, 21 | { 22 | type: 'line', 23 | xMin: 5, 24 | xMax: 5, 25 | yMin: 8, 26 | yMax: 11, 27 | borderColor: 'purple' 28 | }, 29 | { 30 | type: 'line', 31 | xMin: 5, 32 | xMax: 7, 33 | yMin: 8, 34 | yMax: 11, 35 | borderColor: 'red' 36 | } 37 | ] 38 | } 39 | }, 40 | } 41 | }, 42 | options: { 43 | spriteText: true, 44 | } 45 | }; 46 | -------------------------------------------------------------------------------- /test/fixtures/line/direction-reverse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/direction-reverse.png -------------------------------------------------------------------------------- /test/fixtures/line/direction.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'line', 4 | options: { 5 | scales: { 6 | x: {type: 'linear', min: 0, max: 10}, 7 | y: {type: 'linear', min: 0, max: 10} 8 | }, 9 | plugins: { 10 | legend: false, 11 | annotation: { 12 | annotations: [ 13 | { 14 | type: 'line', 15 | xMin: 3, 16 | xMax: 5, 17 | yMin: 11, 18 | yMax: 8, 19 | borderColor: 'blue' 20 | }, 21 | { 22 | type: 'line', 23 | xMin: 5, 24 | xMax: 5, 25 | yMin: 8, 26 | yMax: 11, 27 | borderColor: 'purple' 28 | }, 29 | { 30 | type: 'line', 31 | xMin: 5, 32 | xMax: 7, 33 | yMin: 8, 34 | yMax: 11, 35 | borderColor: 'red' 36 | } 37 | ] 38 | } 39 | }, 40 | } 41 | }, 42 | options: { 43 | spriteText: true, 44 | } 45 | }; 46 | -------------------------------------------------------------------------------- /test/fixtures/line/direction.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/direction.png -------------------------------------------------------------------------------- /test/fixtures/line/drawTime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/drawTime.png -------------------------------------------------------------------------------- /test/fixtures/line/hooks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/hooks.png -------------------------------------------------------------------------------- /test/fixtures/line/initAnimation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/initAnimation.png -------------------------------------------------------------------------------- /test/fixtures/line/label-border.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'scatter', 4 | options: { 5 | scales: { 6 | x: { 7 | display: false, 8 | min: 0, 9 | max: 100 10 | }, 11 | y: { 12 | display: false, 13 | min: 0, 14 | max: 100 15 | } 16 | }, 17 | plugins: { 18 | annotation: { 19 | annotations: { 20 | line1: { 21 | type: 'line', 22 | scaleID: 'y', 23 | value: 0, 24 | endValue: 80, 25 | borderColor: 'black', 26 | borderWidth: 5, 27 | label: { 28 | rotation: 'auto', 29 | backgroundColor: 'red', 30 | borderColor: 'black', 31 | borderRadius: 10, 32 | borderWidth: 3, 33 | borderDash: [6, 6], 34 | content: 'dashed 3px black border', 35 | display: true 36 | }, 37 | }, 38 | } 39 | } 40 | } 41 | } 42 | }, 43 | options: { 44 | spriteText: true 45 | } 46 | }; 47 | -------------------------------------------------------------------------------- /test/fixtures/line/label-border.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/label-border.png -------------------------------------------------------------------------------- /test/fixtures/line/label-dynamic-hide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/label-dynamic-hide.png -------------------------------------------------------------------------------- /test/fixtures/line/label-dynamic-show.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/label-dynamic-show.png -------------------------------------------------------------------------------- /test/fixtures/line/labelCallout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/labelCallout.png -------------------------------------------------------------------------------- /test/fixtures/line/labelCalloutRotation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/labelCalloutRotation.png -------------------------------------------------------------------------------- /test/fixtures/line/labelCalloutWithAutoRotation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/labelCalloutWithAutoRotation.png -------------------------------------------------------------------------------- /test/fixtures/line/labelCanvas.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'scatter', 4 | options: { 5 | scales: { 6 | x: { 7 | display: false, 8 | min: 0, 9 | max: 100 10 | }, 11 | y: { 12 | display: false, 13 | min: 0, 14 | max: 100 15 | } 16 | }, 17 | plugins: { 18 | annotation: { 19 | annotations: { 20 | line1: { 21 | type: 'line', 22 | scaleID: 'y', 23 | value: 0, 24 | endValue: 80, 25 | borderColor: 'black', 26 | borderWidth: 5, 27 | label: { 28 | rotation: 'auto', 29 | backgroundColor: 'red', 30 | borderColor: 'black', 31 | borderRadius: 10, 32 | borderWidth: 3, 33 | borderDash: [6, 6], 34 | content: window.createCanvas, 35 | width: '25%', 36 | height: '25%', 37 | display: true 38 | }, 39 | }, 40 | } 41 | } 42 | } 43 | } 44 | }, 45 | options: { 46 | spriteText: true 47 | } 48 | }; 49 | -------------------------------------------------------------------------------- /test/fixtures/line/labelCanvas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/labelCanvas.png -------------------------------------------------------------------------------- /test/fixtures/line/labelCanvasOpacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/labelCanvasOpacity.png -------------------------------------------------------------------------------- /test/fixtures/line/labelDecoration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/labelDecoration.png -------------------------------------------------------------------------------- /test/fixtures/line/labelShadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/labelShadow.png -------------------------------------------------------------------------------- /test/fixtures/line/labelShadowColors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/labelShadowColors.png -------------------------------------------------------------------------------- /test/fixtures/line/labelZindex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/labelZindex.png -------------------------------------------------------------------------------- /test/fixtures/line/label_drawTime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/label_drawTime.png -------------------------------------------------------------------------------- /test/fixtures/line/labelsScriptableOptions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/labelsScriptableOptions.png -------------------------------------------------------------------------------- /test/fixtures/line/missingValuesStacked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/missingValuesStacked.png -------------------------------------------------------------------------------- /test/fixtures/line/missingYMinMax.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/missingYMinMax.png -------------------------------------------------------------------------------- /test/fixtures/line/out-of-range-value0.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'line', 4 | data: { 5 | datasets: [{ 6 | data: [40, 20, 30, 60, 55], 7 | }], 8 | labels: ['A', 'B', 'C', 'D', 'E'] 9 | }, 10 | options: { 11 | plugins: { 12 | legend: false, 13 | annotation: { 14 | annotations: { 15 | annotation1: { 16 | type: 'line', 17 | scaleID: 'y', 18 | borderWidth: 3, 19 | borderColor: 'black', 20 | value: 0, 21 | label: { 22 | backgroundColor: 'red', 23 | content: 'should be drawn', 24 | display: true 25 | } 26 | } 27 | } 28 | } 29 | }, 30 | } 31 | }, 32 | options: { 33 | spriteText: true, 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /test/fixtures/line/out-of-range-value0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/out-of-range-value0.png -------------------------------------------------------------------------------- /test/fixtures/line/out-of-range.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'line', 4 | data: { 5 | datasets: [{ 6 | data: [10, 20, 30, 0, 55], 7 | }], 8 | labels: ['A', 'B', 'C', 'D', 'E'] 9 | }, 10 | options: { 11 | scales: { 12 | x: { 13 | min: 'C' 14 | } 15 | }, 16 | plugins: { 17 | legend: false, 18 | annotation: { 19 | annotations: { 20 | annotation1: { 21 | type: 'line', 22 | scaleID: 'x', 23 | borderWidth: 3, 24 | borderColor: 'black', 25 | value: 'B', 26 | label: { 27 | backgroundColor: 'red', 28 | content: 'shold not be drawn', 29 | display: true 30 | } 31 | } 32 | } 33 | } 34 | }, 35 | } 36 | }, 37 | options: { 38 | spriteText: true, 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /test/fixtures/line/out-of-range.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/out-of-range.png -------------------------------------------------------------------------------- /test/fixtures/line/padding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/padding.png -------------------------------------------------------------------------------- /test/fixtures/line/partial-range.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'line', 4 | data: { 5 | datasets: [{ 6 | data: [10, 20, 30, 0, 55], 7 | }], 8 | labels: ['A', 'B', 'C', 'D', 'E'] 9 | }, 10 | options: { 11 | scales: { 12 | x: { 13 | min: 'C' 14 | }, 15 | }, 16 | plugins: { 17 | legend: false, 18 | annotation: { 19 | annotations: { 20 | annotation1: { 21 | type: 'line', 22 | borderWidth: 3, 23 | borderColor: 'black', 24 | xMin: 'B', 25 | xMax: 'D', 26 | yMin: 0, 27 | yMax: 60, 28 | } 29 | } 30 | } 31 | }, 32 | } 33 | }, 34 | options: { 35 | spriteText: true, 36 | } 37 | }; 38 | -------------------------------------------------------------------------------- /test/fixtures/line/partial-range.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/partial-range.png -------------------------------------------------------------------------------- /test/fixtures/line/position.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/position.png -------------------------------------------------------------------------------- /test/fixtures/line/positionPercent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/positionPercent.png -------------------------------------------------------------------------------- /test/fixtures/line/rotation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/rotation.png -------------------------------------------------------------------------------- /test/fixtures/line/scriptableOptions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/scriptableOptions.png -------------------------------------------------------------------------------- /test/fixtures/line/shadow.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'line', 4 | options: { 5 | scales: { 6 | x: {type: 'linear', min: 0, max: 10}, 7 | y: {type: 'linear', min: 0, max: 10} 8 | }, 9 | plugins: { 10 | legend: false, 11 | annotation: { 12 | annotations: [ 13 | { 14 | type: 'line', 15 | xMin: 1, 16 | xMax: 8, 17 | yMin: 8, 18 | yMax: 8, 19 | borderColor: 'blue', 20 | borderWidth: 4, 21 | borderShadowColor: 'black', 22 | shadowBlur: 12 23 | }, 24 | { 25 | type: 'line', 26 | xMin: 1, 27 | xMax: 8, 28 | yMin: 5, 29 | yMax: 5, 30 | borderColor: 'purple', 31 | borderWidth: 4, 32 | borderShadowColor: 'black', 33 | shadowBlur: 12, 34 | shadowOffsetX: 10 35 | }, 36 | { 37 | type: 'line', 38 | xMin: 1, 39 | xMax: 8, 40 | yMin: 2, 41 | yMax: 2, 42 | borderColor: 'red', 43 | borderWidth: 4, 44 | borderShadowColor: 'black', 45 | shadowBlur: 12, 46 | shadowOffsetX: 10, 47 | shadowOffsetY: 10 48 | } 49 | ] 50 | } 51 | }, 52 | } 53 | }, 54 | options: { 55 | spriteText: true, 56 | } 57 | }; 58 | -------------------------------------------------------------------------------- /test/fixtures/line/shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/shadow.png -------------------------------------------------------------------------------- /test/fixtures/line/shadowArrowHeads.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/shadowArrowHeads.png -------------------------------------------------------------------------------- /test/fixtures/line/shadowArrowHeadsFill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/shadowArrowHeadsFill.png -------------------------------------------------------------------------------- /test/fixtures/line/shadowBorderColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/line/shadowBorderColor.png -------------------------------------------------------------------------------- /test/fixtures/point/adjust.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/adjust.png -------------------------------------------------------------------------------- /test/fixtures/point/basic.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'scatter', 4 | options: { 5 | scales: { 6 | x: { 7 | display: false, 8 | min: -10, 9 | max: 10 10 | }, 11 | y: { 12 | display: false, 13 | min: -10, 14 | max: 10 15 | } 16 | }, 17 | plugins: { 18 | legend: false, 19 | annotation: { 20 | annotations: { 21 | point: { 22 | type: 'point', 23 | xValue: 1, 24 | yValue: 1, 25 | backgroundColor: 'rgba(101, 33, 171, 0.5)', 26 | borderColor: 'rgb(101, 33, 171)', 27 | borderWidth: 15, 28 | radius: 50 29 | } 30 | } 31 | } 32 | } 33 | } 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /test/fixtures/point/basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/basic.png -------------------------------------------------------------------------------- /test/fixtures/point/basicBorderWidth0.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'scatter', 4 | options: { 5 | scales: { 6 | x: { 7 | display: false, 8 | min: -10, 9 | max: 10 10 | }, 11 | y: { 12 | display: false, 13 | min: -10, 14 | max: 10 15 | } 16 | }, 17 | plugins: { 18 | legend: false, 19 | annotation: { 20 | annotations: { 21 | point: { 22 | type: 'point', 23 | xValue: 1, 24 | yValue: 1, 25 | backgroundColor: 'rgba(101, 33, 171, 0.5)', 26 | borderColor: 'rgb(101, 33, 171)', 27 | borderWidth: 0, 28 | radius: 50 29 | } 30 | } 31 | } 32 | } 33 | } 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /test/fixtures/point/basicBorderWidth0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/basicBorderWidth0.png -------------------------------------------------------------------------------- /test/fixtures/point/borderDash.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'scatter', 4 | options: { 5 | scales: { 6 | x: { 7 | display: false, 8 | min: -10, 9 | max: 10 10 | }, 11 | y: { 12 | display: false, 13 | min: -10, 14 | max: 10 15 | } 16 | }, 17 | plugins: { 18 | legend: false, 19 | annotation: { 20 | annotations: { 21 | point: { 22 | type: 'point', 23 | xValue: 1, 24 | yValue: 1, 25 | backgroundColor: 'rgba(101, 33, 171, 0.5)', 26 | borderColor: 'rgb(101, 33, 171)', 27 | borderWidth: 15, 28 | borderDash: [6, 6], 29 | radius: 50 30 | } 31 | } 32 | } 33 | } 34 | } 35 | } 36 | }; 37 | -------------------------------------------------------------------------------- /test/fixtures/point/borderDash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/borderDash.png -------------------------------------------------------------------------------- /test/fixtures/point/boundToPoint0.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: true, 9 | min: -10, 10 | max: 10 11 | }, 12 | y: { 13 | display: true, 14 | min: -4, 15 | max: 10 16 | } 17 | }, 18 | plugins: { 19 | legend: false, 20 | annotation: { 21 | annotations: { 22 | point: { 23 | type: 'point', 24 | xValue: 0, 25 | yValue: 0, 26 | backgroundColor: 'rgba(101, 33, 171, 0.5)', 27 | borderColor: 'rgb(101, 33, 171)', 28 | borderWidth: 15, 29 | radius: 50 30 | } 31 | } 32 | } 33 | } 34 | } 35 | } 36 | }; 37 | -------------------------------------------------------------------------------- /test/fixtures/point/boundToPoint0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/boundToPoint0.png -------------------------------------------------------------------------------- /test/fixtures/point/boxLocation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/boxLocation.png -------------------------------------------------------------------------------- /test/fixtures/point/boxLocationAdjust.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/boxLocationAdjust.png -------------------------------------------------------------------------------- /test/fixtures/point/boxLocationRadius.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/boxLocationRadius.png -------------------------------------------------------------------------------- /test/fixtures/point/canvas.js: -------------------------------------------------------------------------------- 1 | const canvas = window.createCanvas(); 2 | module.exports = { 3 | tolerance: 0.0055, 4 | config: { 5 | type: 'scatter', 6 | options: { 7 | scales: { 8 | x: { 9 | display: true, 10 | min: -10, 11 | max: 10 12 | }, 13 | y: { 14 | display: true, 15 | min: -10, 16 | max: 10 17 | } 18 | }, 19 | plugins: { 20 | legend: false, 21 | annotation: { 22 | annotations: { 23 | canvas: { 24 | type: 'point', 25 | xValue: 0, 26 | yValue: 0, 27 | pointStyle: canvas, 28 | radius: Math.max(canvas.width, canvas.height) 29 | } 30 | } 31 | } 32 | } 33 | } 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /test/fixtures/point/canvas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/canvas.png -------------------------------------------------------------------------------- /test/fixtures/point/cross.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/cross.png -------------------------------------------------------------------------------- /test/fixtures/point/crossRot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/crossRot.png -------------------------------------------------------------------------------- /test/fixtures/point/crossRotShadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/crossRotShadow.png -------------------------------------------------------------------------------- /test/fixtures/point/crossShadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/crossShadow.png -------------------------------------------------------------------------------- /test/fixtures/point/dash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/dash.png -------------------------------------------------------------------------------- /test/fixtures/point/dashShadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/dashShadow.png -------------------------------------------------------------------------------- /test/fixtures/point/hooks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/hooks.png -------------------------------------------------------------------------------- /test/fixtures/point/initAnimation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/initAnimation.png -------------------------------------------------------------------------------- /test/fixtures/point/line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/line.png -------------------------------------------------------------------------------- /test/fixtures/point/lineShadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/lineShadow.png -------------------------------------------------------------------------------- /test/fixtures/point/missingValuesStacked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/missingValuesStacked.png -------------------------------------------------------------------------------- /test/fixtures/point/rect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/rect.png -------------------------------------------------------------------------------- /test/fixtures/point/rectRot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/rectRot.png -------------------------------------------------------------------------------- /test/fixtures/point/rectRotShadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/rectRotShadow.png -------------------------------------------------------------------------------- /test/fixtures/point/rectRounded.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/rectRounded.png -------------------------------------------------------------------------------- /test/fixtures/point/rectRoundedShadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/rectRoundedShadow.png -------------------------------------------------------------------------------- /test/fixtures/point/rectShadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/rectShadow.png -------------------------------------------------------------------------------- /test/fixtures/point/rotation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/rotation.png -------------------------------------------------------------------------------- /test/fixtures/point/scriptableOptions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/scriptableOptions.png -------------------------------------------------------------------------------- /test/fixtures/point/shadow.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'scatter', 4 | options: { 5 | scales: { 6 | x: { 7 | display: false, 8 | min: -10, 9 | max: 10 10 | }, 11 | y: { 12 | display: false, 13 | min: -10, 14 | max: 10 15 | } 16 | }, 17 | plugins: { 18 | legend: false, 19 | annotation: { 20 | annotations: { 21 | point: { 22 | type: 'point', 23 | xValue: 1, 24 | yValue: 1, 25 | backgroundColor: 'rgba(101, 33, 171, 0.5)', 26 | borderColor: 'rgb(101, 33, 171)', 27 | borderWidth: 5, 28 | radius: 50, 29 | backgroundShadowColor: 'black', 30 | shadowBlur: 3, 31 | shadowOffsetX: 10, 32 | shadowOffsetY: 10 33 | } 34 | } 35 | } 36 | } 37 | } 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /test/fixtures/point/shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/shadow.png -------------------------------------------------------------------------------- /test/fixtures/point/shadowColors.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'scatter', 4 | options: { 5 | scales: { 6 | x: { 7 | display: false, 8 | min: -10, 9 | max: 10 10 | }, 11 | y: { 12 | display: false, 13 | min: -10, 14 | max: 10 15 | } 16 | }, 17 | plugins: { 18 | legend: false, 19 | annotation: { 20 | annotations: { 21 | point: { 22 | type: 'point', 23 | xValue: 1, 24 | yValue: 1, 25 | backgroundColor: 'rgba(101, 33, 171, 0.5)', 26 | borderColor: 'rgb(101, 33, 171)', 27 | borderWidth: 5, 28 | radius: 50, 29 | backgroundShadowColor: 'black', 30 | borderShadowColor: 'orange', 31 | shadowBlur: 3, 32 | shadowOffsetX: 10, 33 | shadowOffsetY: 10 34 | } 35 | } 36 | } 37 | } 38 | } 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /test/fixtures/point/shadowColors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/shadowColors.png -------------------------------------------------------------------------------- /test/fixtures/point/shadowColorsBorderWidth0.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'scatter', 4 | options: { 5 | scales: { 6 | x: { 7 | display: false, 8 | min: -10, 9 | max: 10 10 | }, 11 | y: { 12 | display: false, 13 | min: -10, 14 | max: 10 15 | } 16 | }, 17 | plugins: { 18 | legend: false, 19 | annotation: { 20 | annotations: { 21 | point: { 22 | type: 'point', 23 | xValue: 1, 24 | yValue: 1, 25 | backgroundColor: 'rgba(101, 33, 171, 0.5)', 26 | borderColor: 'rgb(101, 33, 171)', 27 | borderWidth: 0, 28 | radius: 50, 29 | backgroundShadowColor: 'black', 30 | borderShadowColor: 'orange', 31 | shadowBlur: 3, 32 | shadowOffsetX: 10, 33 | shadowOffsetY: 10 34 | } 35 | } 36 | } 37 | } 38 | } 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /test/fixtures/point/shadowColorsBorderWidth0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/shadowColorsBorderWidth0.png -------------------------------------------------------------------------------- /test/fixtures/point/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/star.png -------------------------------------------------------------------------------- /test/fixtures/point/starShadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/starShadow.png -------------------------------------------------------------------------------- /test/fixtures/point/triangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/triangle.png -------------------------------------------------------------------------------- /test/fixtures/point/triangleShadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/point/triangleShadow.png -------------------------------------------------------------------------------- /test/fixtures/polygon/adjust.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/adjust.png -------------------------------------------------------------------------------- /test/fixtures/polygon/borderDash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/borderDash.png -------------------------------------------------------------------------------- /test/fixtures/polygon/boundToPoint0.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'scatter', 4 | options: { 5 | scales: { 6 | x: { 7 | display: true, 8 | min: -10, 9 | max: 10 10 | }, 11 | y: { 12 | display: true, 13 | min: -4, 14 | max: 10 15 | } 16 | }, 17 | plugins: { 18 | legend: false, 19 | annotation: { 20 | annotations: { 21 | polygon: { 22 | type: 'polygon', 23 | xValue: 0, 24 | yValue: 0, 25 | sides: 5, 26 | backgroundColor: 'rgba(101, 33, 171, 0.5)', 27 | borderColor: 'rgb(101, 33, 171)', 28 | borderWidth: 15, 29 | radius: 50 30 | } 31 | } 32 | } 33 | } 34 | } 35 | }, 36 | options: { 37 | spriteText: true 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /test/fixtures/polygon/boundToPoint0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/boundToPoint0.png -------------------------------------------------------------------------------- /test/fixtures/polygon/boxLocation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/boxLocation.png -------------------------------------------------------------------------------- /test/fixtures/polygon/boxLocationAdjust.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/boxLocationAdjust.png -------------------------------------------------------------------------------- /test/fixtures/polygon/boxLocationRadius.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/boxLocationRadius.png -------------------------------------------------------------------------------- /test/fixtures/polygon/decagon.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: true, 9 | min: -10, 10 | max: 10 11 | }, 12 | y: { 13 | display: true, 14 | min: -10, 15 | max: 10 16 | } 17 | }, 18 | plugins: { 19 | legend: false, 20 | annotation: { 21 | annotations: { 22 | decagon: { 23 | type: 'polygon', 24 | xValue: 1, 25 | yValue: 1, 26 | sides: 10, 27 | backgroundColor: 'rgba(255, 99, 132, 0.25)', 28 | borderColor: 'rgb(255, 99, 132)', 29 | borderWidth: 1, 30 | radius: 50 31 | } 32 | } 33 | } 34 | } 35 | } 36 | }, 37 | options: { 38 | spriteText: true 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /test/fixtures/polygon/decagon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/decagon.png -------------------------------------------------------------------------------- /test/fixtures/polygon/heptagon.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: true, 9 | min: -10, 10 | max: 10 11 | }, 12 | y: { 13 | display: true, 14 | min: -10, 15 | max: 10 16 | } 17 | }, 18 | plugins: { 19 | legend: false, 20 | annotation: { 21 | annotations: { 22 | heptagon: { 23 | type: 'polygon', 24 | xValue: 1, 25 | yValue: 1, 26 | sides: 7, 27 | backgroundColor: 'rgba(153, 153, 102, 0.5)', 28 | borderColor: 'rgb(153, 153, 102)', 29 | borderWidth: 1, 30 | radius: 50 31 | } 32 | } 33 | } 34 | } 35 | } 36 | }, 37 | options: { 38 | spriteText: true 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /test/fixtures/polygon/heptagon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/heptagon.png -------------------------------------------------------------------------------- /test/fixtures/polygon/hexagon.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: true, 9 | min: -10, 10 | max: 10 11 | }, 12 | y: { 13 | display: true, 14 | min: -10, 15 | max: 10 16 | } 17 | }, 18 | plugins: { 19 | legend: false, 20 | annotation: { 21 | annotations: { 22 | hexagon: { 23 | type: 'polygon', 24 | xValue: 1, 25 | yValue: 1, 26 | sides: 6, 27 | backgroundColor: 'rgba(153, 153, 102, 0.5)', 28 | borderColor: 'rgb(153, 153, 102)', 29 | borderWidth: 1, 30 | radius: 50 31 | } 32 | } 33 | } 34 | } 35 | } 36 | }, 37 | options: { 38 | spriteText: true 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /test/fixtures/polygon/hexagon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/hexagon.png -------------------------------------------------------------------------------- /test/fixtures/polygon/hexagonWithPoints.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: false, 9 | min: -10, 10 | max: 10 11 | }, 12 | y: { 13 | display: false, 14 | min: -10, 15 | max: 10 16 | } 17 | }, 18 | plugins: { 19 | legend: false, 20 | annotation: { 21 | common: { 22 | drawTime: 'afterDraw' 23 | }, 24 | annotations: { 25 | octagon: { 26 | type: 'polygon', 27 | xScaleID: 'x', 28 | yScaleID: 'y', 29 | xValue: 1, 30 | yValue: 1, 31 | sides: 6, 32 | backgroundColor: 'rgba(153, 153, 102, 0.5)', 33 | borderColor: 'rgb(153, 153, 102)', 34 | borderWidth: 1, 35 | radius: 50, 36 | point: { 37 | radius: 3, 38 | backgroundColor: 'red', 39 | borderColor: 'black', 40 | borderWidth: 1 41 | } 42 | } 43 | } 44 | } 45 | } 46 | } 47 | }, 48 | options: { 49 | canvas: { 50 | width: 256, 51 | height: 256 52 | } 53 | } 54 | }; 55 | -------------------------------------------------------------------------------- /test/fixtures/polygon/hexagonWithPoints.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/hexagonWithPoints.png -------------------------------------------------------------------------------- /test/fixtures/polygon/hooks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/hooks.png -------------------------------------------------------------------------------- /test/fixtures/polygon/initAnimation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/initAnimation.png -------------------------------------------------------------------------------- /test/fixtures/polygon/invalidSides.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: true, 9 | min: -10, 10 | max: 10 11 | }, 12 | y: { 13 | display: true, 14 | min: -10, 15 | max: 10 16 | } 17 | }, 18 | plugins: { 19 | legend: false, 20 | annotation: { 21 | annotations: { 22 | sides0: { 23 | type: 'polygon', 24 | xValue: 1, 25 | yValue: 1, 26 | sides: 0, 27 | backgroundColor: 'rgba(153, 153, 102, 0.5)', 28 | borderColor: 'rgb(153, 153, 102)', 29 | borderWidth: 1, 30 | radius: 50 31 | }, 32 | sidesString: { 33 | type: 'polygon', 34 | xValue: 8, 35 | yValue: 8, 36 | sides: 'wrong', 37 | backgroundColor: 'rgba(153, 153, 102, 0.5)', 38 | borderColor: 'rgb(153, 153, 102)', 39 | borderWidth: 1, 40 | radius: 50 41 | } 42 | } 43 | } 44 | } 45 | } 46 | }, 47 | options: { 48 | spriteText: true 49 | } 50 | }; 51 | -------------------------------------------------------------------------------- /test/fixtures/polygon/invalidSides.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/invalidSides.png -------------------------------------------------------------------------------- /test/fixtures/polygon/missingValuesStacked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/missingValuesStacked.png -------------------------------------------------------------------------------- /test/fixtures/polygon/nonagon.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: true, 9 | min: -10, 10 | max: 10 11 | }, 12 | y: { 13 | display: true, 14 | min: -10, 15 | max: 10 16 | } 17 | }, 18 | plugins: { 19 | legend: false, 20 | annotation: { 21 | annotations: { 22 | nonagon: { 23 | type: 'polygon', 24 | xValue: 1, 25 | yValue: 1, 26 | sides: 9, 27 | backgroundColor: 'rgba(153, 153, 102, 0.5)', 28 | borderColor: 'rgb(153, 153, 102)', 29 | borderWidth: 1, 30 | radius: 50 31 | } 32 | } 33 | } 34 | } 35 | } 36 | }, 37 | options: { 38 | spriteText: true 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /test/fixtures/polygon/nonagon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/nonagon.png -------------------------------------------------------------------------------- /test/fixtures/polygon/octagon.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: true, 9 | min: -10, 10 | max: 10 11 | }, 12 | y: { 13 | display: true, 14 | min: -10, 15 | max: 10 16 | } 17 | }, 18 | plugins: { 19 | legend: false, 20 | annotation: { 21 | annotations: { 22 | octagon: { 23 | type: 'polygon', 24 | xValue: 1, 25 | yValue: 1, 26 | sides: 8, 27 | backgroundColor: 'rgba(153, 153, 102, 0.5)', 28 | borderColor: 'rgb(153, 153, 102)', 29 | borderWidth: 1, 30 | radius: 50 31 | } 32 | } 33 | } 34 | } 35 | } 36 | }, 37 | options: { 38 | spriteText: true 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /test/fixtures/polygon/octagon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/octagon.png -------------------------------------------------------------------------------- /test/fixtures/polygon/pentagon.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: true, 9 | min: -10, 10 | max: 10 11 | }, 12 | y: { 13 | display: true, 14 | min: -10, 15 | max: 10 16 | } 17 | }, 18 | plugins: { 19 | legend: false, 20 | annotation: { 21 | annotations: { 22 | pentagon: { 23 | type: 'polygon', 24 | xValue: 1, 25 | yValue: 1, 26 | sides: 5, 27 | backgroundColor: 'rgba(153, 153, 102, 0.5)', 28 | borderColor: 'rgb(153, 153, 102)', 29 | borderWidth: 1, 30 | radius: 50 31 | } 32 | } 33 | } 34 | } 35 | } 36 | }, 37 | options: { 38 | spriteText: true 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /test/fixtures/polygon/pentagon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/pentagon.png -------------------------------------------------------------------------------- /test/fixtures/polygon/pentagonShadow.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: true, 9 | min: -10, 10 | max: 10 11 | }, 12 | y: { 13 | display: true, 14 | min: -10, 15 | max: 10 16 | } 17 | }, 18 | plugins: { 19 | legend: false, 20 | annotation: { 21 | annotations: { 22 | pentagon: { 23 | type: 'polygon', 24 | xValue: 1, 25 | yValue: 1, 26 | sides: 5, 27 | backgroundColor: 'rgba(153, 153, 102, 0.5)', 28 | borderColor: 'rgb(153, 153, 102)', 29 | borderWidth: 1, 30 | radius: 50, 31 | backgroundShadowColor: 'black', 32 | shadowBlur: 3, 33 | shadowOffsetX: 10, 34 | shadowOffsetY: 10 35 | } 36 | } 37 | } 38 | } 39 | } 40 | }, 41 | options: { 42 | spriteText: true 43 | } 44 | }; 45 | -------------------------------------------------------------------------------- /test/fixtures/polygon/pentagonShadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/pentagonShadow.png -------------------------------------------------------------------------------- /test/fixtures/polygon/pentagonShadowColors.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: true, 9 | min: -10, 10 | max: 10 11 | }, 12 | y: { 13 | display: true, 14 | min: -10, 15 | max: 10 16 | } 17 | }, 18 | plugins: { 19 | legend: false, 20 | annotation: { 21 | annotations: { 22 | pentagon: { 23 | type: 'polygon', 24 | xValue: 1, 25 | yValue: 1, 26 | sides: 5, 27 | backgroundColor: 'rgba(153, 153, 102, 0.5)', 28 | borderColor: 'rgb(153, 153, 102)', 29 | borderWidth: 3, 30 | radius: 50, 31 | backgroundShadowColor: 'black', 32 | borderShadowColor: 'orange', 33 | shadowBlur: 3, 34 | shadowOffsetX: 10, 35 | shadowOffsetY: 10 36 | } 37 | } 38 | } 39 | } 40 | } 41 | }, 42 | options: { 43 | spriteText: true 44 | } 45 | }; 46 | -------------------------------------------------------------------------------- /test/fixtures/polygon/pentagonShadowColors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/pentagonShadowColors.png -------------------------------------------------------------------------------- /test/fixtures/polygon/rhombus.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: true, 9 | min: -10, 10 | max: 10 11 | }, 12 | y: { 13 | display: true, 14 | min: -10, 15 | max: 10 16 | } 17 | }, 18 | plugins: { 19 | legend: false, 20 | annotation: { 21 | annotations: { 22 | rhombus: { 23 | type: 'polygon', 24 | xValue: 1, 25 | yValue: 1, 26 | sides: 4, 27 | backgroundColor: 'rgba(153, 153, 102, 0.5)', 28 | borderColor: 'rgb(153, 153, 102)', 29 | borderWidth: 1, 30 | radius: 50 31 | } 32 | } 33 | } 34 | } 35 | } 36 | }, 37 | options: { 38 | spriteText: true 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /test/fixtures/polygon/rhombus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/rhombus.png -------------------------------------------------------------------------------- /test/fixtures/polygon/rhombusShadow.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: true, 9 | min: -10, 10 | max: 10 11 | }, 12 | y: { 13 | display: true, 14 | min: -10, 15 | max: 10 16 | } 17 | }, 18 | plugins: { 19 | legend: false, 20 | annotation: { 21 | annotations: { 22 | rhombus: { 23 | type: 'polygon', 24 | xValue: 1, 25 | yValue: 1, 26 | sides: 4, 27 | backgroundColor: 'rgba(153, 153, 102, 0.5)', 28 | borderColor: 'rgb(153, 153, 102)', 29 | borderWidth: 1, 30 | radius: 50, 31 | backgroundShadowColor: 'black', 32 | shadowBlur: 3, 33 | shadowOffsetX: 10, 34 | shadowOffsetY: 10 35 | } 36 | } 37 | } 38 | } 39 | } 40 | }, 41 | options: { 42 | spriteText: true 43 | } 44 | }; 45 | -------------------------------------------------------------------------------- /test/fixtures/polygon/rhombusShadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/rhombusShadow.png -------------------------------------------------------------------------------- /test/fixtures/polygon/rotation.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: true, 9 | min: -10, 10 | max: 10 11 | }, 12 | y: { 13 | display: true, 14 | min: -10, 15 | max: 10 16 | } 17 | }, 18 | plugins: { 19 | legend: false, 20 | annotation: { 21 | annotations: { 22 | triangle: { 23 | type: 'polygon', 24 | xValue: 1, 25 | yValue: 1, 26 | backgroundColor: 'rgba(153, 153, 102, 0.5)', 27 | borderColor: 'rgb(153, 153, 102)', 28 | borderWidth: 1, 29 | radius: 50, 30 | rotation: 180 31 | }, 32 | pentagon: { 33 | type: 'polygon', 34 | xValue: 6, 35 | yValue: 6, 36 | sides: 5, 37 | backgroundColor: 'rgba(153, 153, 102, 0.5)', 38 | borderColor: 'rgb(153, 153, 102)', 39 | borderWidth: 1, 40 | radius: 50, 41 | rotation: 180 42 | } 43 | } 44 | } 45 | } 46 | } 47 | }, 48 | options: { 49 | spriteText: true 50 | } 51 | }; 52 | -------------------------------------------------------------------------------- /test/fixtures/polygon/rotation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/rotation.png -------------------------------------------------------------------------------- /test/fixtures/polygon/scriptableOptions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/scriptableOptions.png -------------------------------------------------------------------------------- /test/fixtures/polygon/square.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: true, 9 | min: -10, 10 | max: 10 11 | }, 12 | y: { 13 | display: true, 14 | min: -10, 15 | max: 10 16 | } 17 | }, 18 | plugins: { 19 | legend: false, 20 | annotation: { 21 | annotations: { 22 | square: { 23 | type: 'polygon', 24 | xValue: 1, 25 | yValue: 1, 26 | backgroundColor: 'rgba(153, 153, 102, 0.5)', 27 | borderColor: 'rgb(153, 153, 102)', 28 | borderWidth: 1, 29 | radius: 50, 30 | sides: 4, 31 | rotation: 45 32 | } 33 | } 34 | } 35 | } 36 | } 37 | }, 38 | options: { 39 | spriteText: true 40 | } 41 | }; 42 | -------------------------------------------------------------------------------- /test/fixtures/polygon/square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/square.png -------------------------------------------------------------------------------- /test/fixtures/polygon/squareShadow.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: true, 9 | min: -10, 10 | max: 10 11 | }, 12 | y: { 13 | display: true, 14 | min: -10, 15 | max: 10 16 | } 17 | }, 18 | plugins: { 19 | legend: false, 20 | annotation: { 21 | annotations: { 22 | square: { 23 | type: 'polygon', 24 | xValue: 1, 25 | yValue: 1, 26 | backgroundColor: 'rgba(153, 153, 102, 0.5)', 27 | borderColor: 'rgb(153, 153, 102)', 28 | borderWidth: 1, 29 | radius: 50, 30 | sides: 4, 31 | rotation: 45, 32 | backgroundShadowColor: 'black', 33 | shadowBlur: 3, 34 | shadowOffsetX: 10, 35 | shadowOffsetY: 10 36 | } 37 | } 38 | } 39 | } 40 | } 41 | }, 42 | options: { 43 | spriteText: true 44 | } 45 | }; 46 | -------------------------------------------------------------------------------- /test/fixtures/polygon/squareShadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/squareShadow.png -------------------------------------------------------------------------------- /test/fixtures/polygon/triangle.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: true, 9 | min: -10, 10 | max: 10 11 | }, 12 | y: { 13 | display: true, 14 | min: -10, 15 | max: 10 16 | } 17 | }, 18 | plugins: { 19 | legend: false, 20 | annotation: { 21 | annotations: { 22 | triangle: { 23 | type: 'polygon', 24 | xValue: 1, 25 | yValue: 1, 26 | backgroundColor: 'rgba(153, 153, 102, 0.5)', 27 | borderColor: 'rgb(153, 153, 102)', 28 | borderWidth: 1, 29 | radius: 50 30 | } 31 | } 32 | } 33 | } 34 | } 35 | }, 36 | options: { 37 | spriteText: true 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /test/fixtures/polygon/triangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/triangle.png -------------------------------------------------------------------------------- /test/fixtures/polygon/triangleShadow.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tolerance: 0.0055, 3 | config: { 4 | type: 'scatter', 5 | options: { 6 | scales: { 7 | x: { 8 | display: true, 9 | min: -10, 10 | max: 10 11 | }, 12 | y: { 13 | display: true, 14 | min: -10, 15 | max: 10 16 | } 17 | }, 18 | plugins: { 19 | legend: false, 20 | annotation: { 21 | annotations: { 22 | triangle: { 23 | type: 'polygon', 24 | xValue: 1, 25 | yValue: 1, 26 | backgroundColor: 'rgba(153, 153, 102, 0.5)', 27 | borderColor: 'rgb(153, 153, 102)', 28 | borderWidth: 1, 29 | radius: 50, 30 | backgroundShadowColor: 'black', 31 | shadowBlur: 3, 32 | shadowOffsetX: 10, 33 | shadowOffsetY: 10 34 | } 35 | } 36 | } 37 | } 38 | } 39 | }, 40 | options: { 41 | spriteText: true 42 | } 43 | }; 44 | -------------------------------------------------------------------------------- /test/fixtures/polygon/triangleShadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chartjs/chartjs-plugin-annotation/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42/test/fixtures/polygon/triangleShadow.png -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | import {acquireChart, addMatchers, releaseCharts, specsFromFixtures, triggerMouseEvent, afterEvent} from 'chartjs-test-utils'; 2 | import {testEvents, eventPoint0, getCenterPoint} from './events'; 3 | import {createCanvas, getAnnotationElements, getAnnotationInteractedElements, scatterChart, stringifyObject, interactionData, getQuadraticXY, getQuadraticAngle, drawStar} from './utils'; 4 | import * as helpers from '../src/helpers'; 5 | 6 | window.helpers = helpers; 7 | window.devicePixelRatio = 1; 8 | window.acquireChart = acquireChart; 9 | window.afterEvent = afterEvent; 10 | window.triggerMouseEvent = triggerMouseEvent; 11 | window.testEvents = testEvents; 12 | window.eventPoint0 = eventPoint0; 13 | window.getCenterPoint = getCenterPoint; 14 | window.createCanvas = createCanvas; 15 | window.drawStar = drawStar; 16 | window.getAnnotationElements = getAnnotationElements; 17 | window.getAnnotationInteractedElements = getAnnotationInteractedElements; 18 | window.scatterChart = scatterChart; 19 | window.stringifyObject = stringifyObject; 20 | window.interactionData = interactionData; 21 | window.getQuadraticXY = getQuadraticXY; 22 | window.getQuadraticAngle = getQuadraticAngle; 23 | 24 | jasmine.fixtures = specsFromFixtures; 25 | 26 | beforeAll(() => { 27 | // Disable colors plugin for tests. 28 | window.Chart.defaults.plugins.colors.enabled = false; 29 | }); 30 | 31 | beforeEach(function() { 32 | addMatchers(); 33 | }); 34 | 35 | afterEach(function() { 36 | releaseCharts(); 37 | }); 38 | 39 | console.warn('Testing with chart.js v' + Chart.version); 40 | -------------------------------------------------------------------------------- /test/integration/.eslintrc.yml: -------------------------------------------------------------------------------- 1 | rules: 2 | no-console: "off" 3 | -------------------------------------------------------------------------------- /test/integration/node-commonjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "description": "chartjs-plugin-annotation should work in Node, using commonjs", 4 | "scripts": { 5 | "test": "node test.js" 6 | }, 7 | "dependencies": { 8 | "@napi-rs/canvas": "^0.1.30", 9 | "chart.js": "^4.3.0", 10 | "chartjs-plugin-annotation": "file:../plugin.tgz" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /test/integration/node-commonjs/test.js: -------------------------------------------------------------------------------- 1 | const {createCanvas} = require('@napi-rs/canvas'); 2 | const {Chart, BarController, BarElement, CategoryScale, LinearScale} = require('chart.js'); 3 | const Annotation = require('chartjs-plugin-annotation'); 4 | 5 | Chart.register(BarController, BarElement, CategoryScale, LinearScale); 6 | Chart.register(Annotation); 7 | 8 | const canvas = createCanvas(300, 320); 9 | const ctx = canvas.getContext('2d'); 10 | 11 | // Chart.js assumes ctx contains the canvas 12 | ctx.canvas = canvas; 13 | 14 | module.export = new Chart(ctx, { 15 | type: 'bar', 16 | data: { 17 | labels: [], 18 | datasets: [{ 19 | data: [] 20 | }] 21 | }, 22 | options: { 23 | plugins: { 24 | annotation: { 25 | clip: false, 26 | annotations: [] 27 | } 28 | } 29 | }, 30 | plugins: [Annotation] 31 | }); 32 | 33 | -------------------------------------------------------------------------------- /test/integration/node-module/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "description": "chartjs-plugin-annotation should work in Node, using module", 4 | "type": "module", 5 | "scripts": { 6 | "test": "node test.js" 7 | }, 8 | "dependencies": { 9 | "@napi-rs/canvas": "^0.1.30", 10 | "chart.js": "^4.3.0", 11 | "chartjs-plugin-annotation": "file:../plugin.tgz" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /test/integration/node-module/test.js: -------------------------------------------------------------------------------- 1 | import {createCanvas} from '@napi-rs/canvas'; 2 | import {Chart, BarController, BarElement, CategoryScale, LinearScale} from 'chart.js'; 3 | import Annotation from 'chartjs-plugin-annotation'; 4 | 5 | Chart.register(BarController, BarElement, CategoryScale, LinearScale); 6 | Chart.register(Annotation); 7 | 8 | const canvas = createCanvas(300, 320); 9 | const ctx = canvas.getContext('2d'); 10 | 11 | // Chart.js assumes ctx contains the canvas 12 | ctx.canvas = canvas; 13 | 14 | export const chart = new Chart(ctx, { 15 | type: 'bar', 16 | data: { 17 | labels: [], 18 | datasets: [{ 19 | data: [] 20 | }] 21 | }, 22 | options: { 23 | plugins: { 24 | annotation: { 25 | clip: false, 26 | annotations: [] 27 | } 28 | } 29 | }, 30 | plugins: [Annotation] 31 | }); 32 | 33 | -------------------------------------------------------------------------------- /test/integration/ts/basic.ts: -------------------------------------------------------------------------------- 1 | import { Chart } from 'chart.js'; 2 | import Annotation from 'chartjs-plugin-annotation'; 3 | 4 | Chart.register(Annotation); 5 | 6 | const chart = new Chart('id', { 7 | type: 'bar', 8 | data: { 9 | labels: [], 10 | datasets: [{ 11 | data: [] 12 | }] 13 | }, 14 | options: { 15 | plugins: { 16 | annotation: { 17 | clip: false, 18 | annotations: [{ 19 | type: 'line', 20 | label: { 21 | content: ['test', 'multiple'], 22 | width: '100%' 23 | } 24 | }, { 25 | type: 'box', 26 | backgroundColor: 'red', 27 | borderColor: (ctx, options) => options.type === 'box' ? 'red' : 'green', 28 | } 29 | ] 30 | } 31 | } 32 | }, 33 | plugins: [Annotation] 34 | }); 35 | 36 | const elements = Annotation.getAnnotations(chart); 37 | -------------------------------------------------------------------------------- /test/integration/ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "description": "chartjs-plugin-annotation should compile with all supported TS versions", 4 | "scripts": { 5 | "test": "node test.js" 6 | }, 7 | "dependencies": { 8 | "chart.js": "^4.3.0", 9 | "chartjs-plugin-annotation": "file:../plugin.tgz", 10 | "typescript-4.2": "npm:typescript@4.2.x", 11 | "typescript-4.3": "npm:typescript@4.3.x", 12 | "typescript-4.4": "npm:typescript@4.4.x", 13 | "typescript-4.5": "npm:typescript@4.5.x", 14 | "typescript-4.6": "npm:typescript@4.6.x", 15 | "typescript-4.7": "npm:typescript@4.7.x", 16 | "typescript-4.8": "npm:typescript@4.8.x", 17 | "typescript-4.9": "npm:typescript@4.9.x" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /test/integration/ts/test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | const childProcess = require('child_process'); 5 | 6 | const {dependencies} = require('./package.json'); 7 | 8 | const tsVersions = Object.keys(dependencies) 9 | .filter((pkg) => pkg.startsWith('typescript-')) 10 | .sort((a, b) => b.localeCompare(a)); 11 | 12 | for (const version of tsVersions) { 13 | console.log(`Testing on ${version} ...`); 14 | childProcess.execSync('node ' + tscPath(version), {stdio: 'inherit'}); 15 | } 16 | 17 | function tscPath(version) { 18 | return path.join(__dirname, 'node_modules', version, 'bin/tsc'); 19 | } 20 | -------------------------------------------------------------------------------- /test/integration/ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES6", 4 | "moduleResolution": "Node", 5 | "alwaysStrict": true, 6 | "noEmit": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /test/seed-reporter.js: -------------------------------------------------------------------------------- 1 | const SeedReporter = function(baseReporterDecorator) { 2 | baseReporterDecorator(this); 3 | 4 | this.onBrowserComplete = function(browser, result) { 5 | if (result.order && result.order.random && result.order.seed) { 6 | this.write('%s: Randomized with seed %s\n', browser, result.order.seed); 7 | } 8 | }; 9 | }; 10 | 11 | export default { 12 | 'reporter:jasmine-seed': ['type', SeedReporter] 13 | }; 14 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES6", 4 | "moduleResolution": "Node", 5 | "allowSyntheticDefaultImports": true, 6 | "allowJs": true, 7 | "checkJs": true, 8 | "noEmit": true, 9 | "alwaysStrict": true, 10 | "strictBindCallApply": true, 11 | "strictFunctionTypes": true, 12 | "lib": ["es2018", "DOM"] 13 | }, 14 | "typedocOptions": { 15 | "name": "Chart.js annotation", 16 | "entryPoints": ["types/index.d.ts"], 17 | "readme": "none", 18 | "excludeExternals": true, 19 | "includeVersion": true, 20 | "out": "./dist/docs/typedoc" 21 | }, 22 | "include": [ 23 | "./types" 24 | ], 25 | "exclude": [ 26 | "./types/tests" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /types/.eslintrc.yml: -------------------------------------------------------------------------------- 1 | parser: '@typescript-eslint/parser' 2 | 3 | plugins: 4 | - '@typescript-eslint' 5 | 6 | extends: 7 | - chartjs 8 | - plugin:@typescript-eslint/recommended 9 | 10 | rules: 11 | # Replace stock eslint rules with typescript-eslint equivalents for proper 12 | # TypeScript support. 13 | indent: "off" 14 | "@typescript-eslint/indent": ["error", 2] 15 | no-use-before-define: "off" 16 | '@typescript-eslint/no-use-before-define': "error" 17 | no-shadow: "off" 18 | '@typescript-eslint/no-shadow': "error" 19 | 20 | # These rules were set to warning to make the linting pass initially, 21 | # without making any major changes to types. 22 | object-curly-spacing: ["warn", "always"] 23 | '@typescript-eslint/no-empty-interface': "warn" 24 | '@typescript-eslint/ban-types': "warn" 25 | '@typescript-eslint/adjacent-overload-signatures': "warn" 26 | -------------------------------------------------------------------------------- /types/element.d.ts: -------------------------------------------------------------------------------- 1 | import { AnnotationOptions } from './options'; 2 | 3 | export interface AnnotationBoxModel { 4 | x: number, 5 | y: number, 6 | x2: number, 7 | y2: number, 8 | centerX: number, 9 | centerY: number, 10 | height: number, 11 | width: number, 12 | radius?: number 13 | } 14 | 15 | export interface AnnotationElement extends AnnotationBoxModel { 16 | label?: AnnotationElement, 17 | options: AnnotationOptions 18 | } 19 | -------------------------------------------------------------------------------- /types/events.d.ts: -------------------------------------------------------------------------------- 1 | import { Chart, ChartEvent } from 'chart.js'; 2 | import { AnnotationElement } from './element'; 3 | 4 | export interface EventContext { 5 | chart: Chart, 6 | element: AnnotationElement, 7 | elements: AnnotationElement[], 8 | id: string, 9 | type: string 10 | } 11 | 12 | /** 13 | * Some scriptable options may be called with during the chart's initial 14 | * display, when the element isn't fully initialized. 15 | */ 16 | export interface PartialEventContext { 17 | chart: Chart, 18 | element?: Partial, 19 | elements?: AnnotationElement[], 20 | id?: string, 21 | type?: string 22 | } 23 | 24 | export interface AnnotationEvents { 25 | enter?(context: EventContext, event: ChartEvent): boolean | void, 26 | leave?(context: EventContext, event: ChartEvent): boolean | void, 27 | click?(context: EventContext, event: ChartEvent): boolean | void, 28 | } 29 | -------------------------------------------------------------------------------- /types/index.d.ts: -------------------------------------------------------------------------------- 1 | import { Chart, ChartType, Plugin } from 'chart.js'; 2 | import { AnnotationPluginOptions, BoxAnnotationOptions, EllipseAnnotationOptions, LabelAnnotationOptions, LineAnnotationOptions, PointAnnotationOptions, PolygonAnnotationOptions, DoughnutLabelAnnotationOptions } from './options'; 3 | import { AnnotationElement } from './element'; 4 | 5 | declare module 'chart.js' { 6 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 7 | interface PluginOptionsByType { 8 | annotation: AnnotationPluginOptions; 9 | } 10 | 11 | interface ElementOptionsByType { 12 | boxAnnotation: BoxAnnotationOptions; 13 | doughnutLabelAnnotation: DoughnutLabelAnnotationOptions; 14 | ellipseAnnotation: EllipseAnnotationOptions; 15 | labelAnnotation: LabelAnnotationOptions; 16 | lineAnnotation: LineAnnotationOptions; 17 | pointAnnotation: PointAnnotationOptions; 18 | polygonAnnotation: PolygonAnnotationOptions; 19 | } 20 | } 21 | 22 | declare const Annotation: Plugin & { 23 | getAnnotations(chart: Chart): AnnotationElement[]; 24 | }; 25 | 26 | export default Annotation; 27 | 28 | export * from './element'; 29 | export * from './events'; 30 | export * from './label'; 31 | export * from './options'; 32 | -------------------------------------------------------------------------------- /types/tests/.eslintrc.yml: -------------------------------------------------------------------------------- 1 | rules: 2 | '@typescript-eslint/no-unused-vars': 'off' 3 | -------------------------------------------------------------------------------- /types/tests/exports.ts: -------------------------------------------------------------------------------- 1 | import { Chart } from 'chart.js'; 2 | import Annotation from '../index'; 3 | 4 | Chart.register(Annotation); 5 | Chart.unregister(Annotation); 6 | 7 | const chart = new Chart('id', { 8 | type: 'bar', 9 | data: { 10 | labels: [], 11 | datasets: [{ 12 | data: [] 13 | }] 14 | }, 15 | options: { 16 | plugins: { 17 | annotation: { 18 | clip: false, 19 | interaction: { 20 | mode: 'nearest', 21 | axis: 'xy', 22 | intersect: true 23 | }, 24 | common: { 25 | drawTime: 'afterDraw', 26 | borderColor: 'red', 27 | label: { 28 | display: true, 29 | font: (ctx) => ({ size: 10 }) 30 | } 31 | }, 32 | annotations: [{ 33 | type: 'line', 34 | drawTime: 1, 35 | label: { 36 | content: ['test', 'multiple'], 37 | font: { 38 | size: 10 39 | } 40 | } 41 | }, { 42 | type: 'box', 43 | backgroundColor: 'red', 44 | borderColor: (ctx, options) => options.type === 'box' ? 'red' : 'green', 45 | } 46 | ] 47 | } 48 | } 49 | }, 50 | plugins: [Annotation] 51 | }); 52 | 53 | const elements = Annotation.getAnnotations(chart); 54 | -------------------------------------------------------------------------------- /types/tests/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES6", 4 | "moduleResolution": "Node", 5 | "alwaysStrict": true, 6 | "noEmit": true 7 | }, 8 | "include": [ 9 | "*.ts", 10 | "../*.d.ts" 11 | ] 12 | } 13 | --------------------------------------------------------------------------------