chartjs-plugin-annotation icon indicating copy to clipboard operation
chartjs-plugin-annotation copied to clipboard

Add `beforeDraw` and `afterDraw` hooks to the annotations

Open stockiNail opened this issue 3 years ago • 0 comments

This PR is adding before/after draw hooks in order to allow the user to apply whatever needed customization on out-of the-box annotations. Fix #146.

The hooks will be invoked once for every annotation for each drawing cycle.

plugins: {
  annotation: {
    annotations: {
      line: {
        type: 'line',
        ....
        beforeDraw(context) {
          console.log('beforeDraw');
        },
        afterDraw(context) {
          console.log('afterDraw');
        },
      },
    }
  }
}
Hook Arguments Return type Default Description
beforeDraw context void annotation.beforeDraw invoked before the element drawing
afterDraw context void annotation.afterDraw invoked after the element drawing

Common hooks for all annotations can be set in the annotation plugin options:

plugins: {
  annotation: {
    beforeDraw(context) {
      console.log('Common beforeDraw');
    },
    afterDraw(context) {
      console.log('Common afterDraw');
    },
    annotations: {
      line: {
        type: 'line',
        ....
      },
    }
  }
}

TODO

  • [x] test cases
  • [x] types
  • [x] documentation
  • [x] samples

stockiNail avatar May 21 '22 18:05 stockiNail