chartjs-plugin-annotation | Annotation plugin for Chart.js | Plugin library

 by   chartjs JavaScript Version: 3.0.1 License: MIT

kandi X-RAY | chartjs-plugin-annotation Summary

kandi X-RAY | chartjs-plugin-annotation Summary

chartjs-plugin-annotation is a JavaScript library typically used in Plugin applications. chartjs-plugin-annotation has no bugs, it has no vulnerabilities, it has a Permissive License and it has low support. You can install using 'npm i @quantify/chartjs-plugin-annotation' or download it from GitHub, npm.

An annotation plugin for Chart.js >= 3.0.0. This plugin needs to be registered. It does not function as inline plugin. For Chart.js 2.4.0 to 2.9.x support, use version 0.5.7 of this plugin. This plugin draws lines, boxes, points, labels, polygons and ellipses on the chart area. Annotations work with line, bar, scatter and bubble charts that use linear, logarithmic, time, or category scales. Annotations will not work on any chart that does not have exactly two axes, including pie, radar, and polar area charts.

            kandi-support Support

              chartjs-plugin-annotation has a low active ecosystem.
              It has 543 star(s) with 292 fork(s). There are 13 watchers for this library.
              There were 4 major release(s) in the last 12 months.
              There are 9 open issues and 355 have been closed. On average issues are closed in 157 days. There are 5 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of chartjs-plugin-annotation is 3.0.1

            kandi-Quality Quality

              chartjs-plugin-annotation has 0 bugs and 0 code smells.

            kandi-Security Security

              chartjs-plugin-annotation has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              chartjs-plugin-annotation code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              chartjs-plugin-annotation is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              chartjs-plugin-annotation releases are available to install and integrate.
              Deployable package is available in npm.

            Top functions reviewed by kandi - BETA

            kandi has reviewed chartjs-plugin-annotation and discovered the below as its top functions. This is intended to give you an instant insight into chartjs-plugin-annotation implemented functionality, and help decide if they suit your requirements.
            • updates the listeners that should listen for changes
            • Updates the element s sub - element definitions .
            • Creates bounding box properties
            • Draw a callout in an element .
            • Measures the size of the label text .
            • Calculate the position of a label
            • Generate a random number .
            • Resolve property attributes according to the properties .
            • Create a pie chart
            • Draws an arrow .
            Get all kandi verified functions for this library.

            chartjs-plugin-annotation Key Features

            No Key Features are available at this moment for chartjs-plugin-annotation.

            chartjs-plugin-annotation Examples and Code Snippets

            No Code Snippets are available at this moment for chartjs-plugin-annotation.

            Community Discussions


            chartjs-plugin-annotation box in Django app
            Asked 2022-Apr-11 at 16:32

            I have chartjs v2.9.3 in my Django app and it works great. Now I need to add a box to one of my charts using chartjs-plugin-annotation, and I've followed all the steps, but I can't get it to work. I've used chartjs-plugin-annotation v0.5.7 which is for v2.9.3. I get no errors in the console log. First, scripts with chart.js and plugins:



            Answered 2022-Apr-11 at 16:32

            This is because you putted the options in the place where they belong in V1 of the annotation plugin and the syntax too. For V0.5.7 the annotation options have to be placed in the root of the options and also all the annotations are an array instead of seperate objects:



            ChartJS 3 vertical annotations
            Asked 2022-Mar-23 at 07:56

            I am trying to upgrade my chartjs to v3 and with that the annotations plugin. Tried a few different ways but just cannot seem to get the vertical annotation to show. Tried explicitilty adding xScaleID/yScaleID but I believe that in v3 x/y are the new defaults so would have expected those to be the defaults anyway.

            Simplified the whole thing down to this JSFiddle



            Answered 2022-Mar-23 at 07:56

            First you configured the options in the wrong space, the plugin options have to go inside of the options object. The plugins section what you used is for an array containing inline plugins, secondly you need to include the annotation plugin after chart.js since chart.js needs to be loaded first because the annotation plugin uses some functions from chart.js:



            Can't Draw Horizontal Line on Graph Using ChartJS Annotation Plugin and Primevue Chart
            Asked 2022-Mar-10 at 20:05

            I'm working in Vue 3 Composition and trying to draw a horizontal line across my ChartJS graph using the ChartJS annotation plugin. (

            I'm using Primevue Chart component as the implementation of ChartJS.

            I have imported import annotationPlugin from 'chartjs-plugin-annotation'; and import Chart from 'primevue/chart'; and made my component like:



            Answered 2022-Mar-10 at 20:05

            We hit a similar problem and needed to make sure we globally register the annotation plugin in our project root.

            Without this, the annotation silently fails just as you are describing:



            Use chartjs-plugin-annotation 0.5.7 in Chartjs 2.9.x with React
            Asked 2021-Nov-27 at 11:27

            I'm not able to configure the plugin chartjs-plugin-annotation in Chartjs.

            From the doc, I installed V 0.5.7 because I'm using Chart.js V 2.9.4.

            Here my configuration:

            register the plugin:



            Answered 2021-Nov-27 at 11:27

            It looks like you are trying to implement the annotations plugin as if you would integrate it to a current chart.js version. E.g. your define your annotations in plugins.

            This is an example that works with the given versions. Please note that I added the annotation object right away in options what gives the wanted annotation. (In my example in form of a red line.)



            Can't get event from chartjs-annotation-plugin on mouseenter
            Asked 2021-Oct-29 at 12:37

            I've tried to implement a function where i require the event from the mouse-enter-event. I don't think I've done anything wrong in my code I'm simply not getting the event parameter from the enter callback.

            What i expect to happen is that i get the event from

            enter: (ctx, e) => console.log(e)


            My Code:



            Answered 2021-Oct-29 at 12:37

            It seems to be a bug in the annotation plugin because if you build the current master and use that as a source it works fine.

            So you will have to wait until a new version of the lib is released



            Catch event of show and hide dataset at chart.js
            Asked 2021-Oct-22 at 23:07

            I'm using Chart.JS with chartjs-plugin-annotation for drawing base line in chart bar. And I wanna hide it ( this red line) when hide first data set.



            Answered 2021-Oct-22 at 23:07

            You can make use of the legend onClick handler like so:



            Annotation problem with ng2-charts in Angular 11
            Asked 2021-Oct-12 at 09:35

            i need to show a fixed line in my chart (like "Test Label" in the image):

            So I added chartjs-plugin-annotation in to my Angular 11 project so I have those versions:



            Answered 2021-Oct-05 at 18:38

            As stated in the documentation of the annotation plugin you need to use version 0.5.7 if you are using chart.js version 2

            Important Note For Chart.js 2.4.0 to 2.9.x support, use version 0.5.7 of this plugin Documentation for v0.5.7 can be found on GitHub.

            So you will need to remove the annotation plugin and the install the lower version or update to chart.js version 3



            Chart.js v3: How can I grow fontsize of legend of my graph?
            Asked 2021-Jul-02 at 08:50

            I migrated Chart.js HTML page from version 2.7 to 3.4 and only one problem is remaining.

            The font's size of legends cannot be changed.

            I tried following code



            Answered 2021-Jul-02 at 08:50

            I assume you have your options for the legend in the wrong place:

            As described in the migration guide the legend,plugin tooltip and title have been moved to the plugin section.




            ChartJS v3 Migration: how to define annotation plugin?
            Asked 2021-Jul-01 at 17:37

            I'm trying to migrate a Chart.js html file created using version 2.7.1

            My first problem is how to replace first script found at begin of my HTML file



            Answered 2021-Jul-01 at 17:37


            Can't change the time of the xAxes in the Chart.js
            Asked 2021-May-30 at 16:12

            So I have ChartData Component. I am taking the data from an API, the data is being displayed through Chart. I have determine Format Logic, which it's the main thing is to determine the time of the data, I have 3 buttons, the thing that I am struggling to achieve is when let's say I wanna see the data of 7days when I press the button. I can see data is changing in the yAxes but I can't see time being changed on thexAxes, it's still set to hours, it should display the days.




            Answered 2021-May-30 at 16:12

            I have created a similar working example without reactjs. This can be useful for you to understand. You can refer the fiddle as well. A limitation that am currently facing is if there is data more than 100 then am getting errors while updating the data, performed slicing of data upto 100 to make it working.


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install chartjs-plugin-annotation

            You can install using 'npm i @quantify/chartjs-plugin-annotation' or download it from GitHub, npm.


            You can find documentation for chartjs-plugin-annotation at
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • npm

            npm i chartjs-plugin-annotation

          • CLONE
          • HTTPS


          • CLI

            gh repo clone chartjs/chartjs-plugin-annotation

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link