Enable centered label drawing for doughnut controllers

README.md

@@ -21,7 +21,8 @@ For Chart.js 2.4.0 to 2.9.x support, use [version 0.5.7 of this plugin](https://
 
 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 two or more axes, including pie, radar, and polar area charts.
+Annotations work with line, bar, scatter and bubble charts that use linear, logarithmic, time, or category scales. 
+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.
 
 ![Example Screenshot](docs/guide/banner.png)
 

docs/.vuepress/config.js

@@ -0,0 +1,243 @@
+const path = require('path');
+const docsVersion = "VERSION";
+const base = process.env.NODE_ENV === "development" ? '/chartjs-plugin-annotation/master/' : `/chartjs-plugin-annotation/${docsVersion}/`;
+
+module.exports = {
+  dest: 'dist/docs',
+  title: 'chartjs-plugin-annotation',
+  description: 'Annotations for Chart.js',
+  theme: 'chartjs',
+  base,
+  head: [
+    ['link', {rel: 'icon', href: '/favicon.png'}],
+  ],
+  plugins: [
+    ['flexsearch'],
+    ['redirect', {
+      redirectors: [
+        // Default sample page when accessing /samples.
+        {base: '/samples', alternative: ['intro']},
+      ],
+    }],
+    [
+      'vuepress-plugin-typedoc',
+      {
+        entryPoints: ['../../types/index.d.ts'],
+        hideInPageTOC: true,
+        tsconfig: 'tsconfig.json',
+        sidebar: {
+          fullNames: true,
+          parentCategory: 'API',
+        },
+      },
+    ],
+    ['@simonbrunel/vuepress-plugin-versions', {
+      filters: {
+        suffix: (tag) => tag ? ` (${tag})` : '',
+        title: (v, vars) => window.location.href.includes('master') ? 'Development (master)' : v + (vars.tag ? ` (${tag})` : ''),
+      },
+      menu: {
+        text: '{{version|title}}',
+        items: [
+          {
+            text: 'Documentation',
+            items: [
+              {
+                text: 'Development (master)',
+                link: '/chartjs-plugin-annotation/master/',
+                target: '_self',
+              },
+              {
+                type: 'versions',
+                text: '{{version}}{{tag|suffix}}',
+                link: '/chartjs-plugin-annotation/{{version}}/',
+                exclude: /^[0]\.[0-4]\./,
+                group: 'minor',
+                target: '_self',
+              }
+            ]
+          },
+          {
+            text: 'Release notes (5 latest)',
+            items: [
+              {
+                type: 'versions',
+                limit: 5,
+                target: '_blank',
+                group: 'patch',
+                link: 'https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v{{version}}'
+              }
+            ]
+          }
+        ]
+      },
+    }],
+  ],
+  chainWebpack(config) {
+    config.module
+      .rule('chart.js')
+      .include.add(path.resolve('node_modules/chart.js')).end()
+      .use('babel-loader')
+      .loader('babel-loader')
+      .options({
+        presets: ['@babel/preset-env']
+      })
+      .end();
+  },
+  markdown: {
+    extendMarkdown: md => {
+      md.use(require('markdown-it-include'), path.resolve(__dirname, '../'));
+    }
+  },
+  themeConfig: {
+    repo: 'chartjs/chartjs-plugin-annotation',
+    logo: '/favicon.png',
+    lastUpdated: 'Last Updated',
+    searchPlaceholder: 'Search...',
+    editLinks: true,
+    docsDir: 'docs',
+    chart: {
+      imports: [
+        ['scripts/register.js'],
+        ['scripts/defaults.js'],
+        ['scripts/utils.js', 'Utils'],
+      ]
+    },
+    nav: [
+      {text: 'Home', link: '/'},
+      {text: 'API', link: '/api/'},
+      {text: 'Guide', link: '/guide/'},
+      {text: 'Samples', link: '/samples/'},
+    ],
+    sidebar: {
+      '/api/': {
+        title: 'API'
+      },
+      '/guide/': [
+        '',
+        'integration',
+        'usage',
+        'options',
+        'configuration',
+        {
+          title: 'Annotations',
+          collapsable: false,
+          children: [
+            'types/box',
+            'types/ellipse',
+            'types/label',
+            'types/line',
+            'types/point',
+            'types/polygon',
+            'types/doughnutLabel'
+          ]
+        },
+        'migrationV1',
+        'migrationV2'
+      ],
+      '/samples/': [
+        'intro',
+        {
+          title: 'Box annotations',
+          children: [
+            'box/basic',
+            'box/quarters',
+            'box/disclosure',
+            'box/canvas',
+            'box/image',
+            'box/initAnim',
+            'box/gradient',
+          ]
+        },
+        {
+          title: 'Ellipse annotations',
+          children: [
+            'ellipse/basic',
+            'ellipse/rotation',
+            'ellipse/label',
+            'ellipse/image',
+          ]
+        },
+        {
+          title: 'Label annotations',
+          children: [
+            'label/basic',
+            'label/point',
+            'label/callout',
+            'label/canvas',
+            'label/image',
+            'label/innerChart',
+            'label/lowerUpper',
+            'label/fontsColors',
+            'label/autoscaling'
+          ]
+        },
+        {
+          title: 'Line annotations',
+          children: [
+            'line/basic',
+            'line/curve',
+            'line/lowerUpper',
+            'line/limited',
+            'line/average',
+            'line/standardDeviation',
+            'line/callout',
+            'line/visibility',
+            'line/labelVisibility',
+            'line/canvas',
+            'line/image',
+            'line/datasetBars',
+            'line/animation',
+            'line/hook',
+          ]
+        },
+        {
+          title: 'Point annotations',
+          children: [
+            'point/basic',
+            'point/combined',
+            'point/outsideChartArea',
+            'point/shadow',
+            'point/initAnim',
+          ]
+        },
+        {
+          title: 'Polygon annotations',
+          children: [
+            'polygon/basic',
+            'polygon/stop',
+            'polygon/outsideChartArea',
+            'polygon/shadow',
+            ]
+        },
+        {
+          title: 'Doughnut label annotations',
+          children: [
+            'doughnutLabel/basic',
+            'doughnutLabel/canvas',
+            'doughnutLabel/image',
+            'doughnutLabel/gauge',
+            'doughnutLabel/background',
+          ]
+        },
+        {
+          title: 'Charts',
+          children: [
+            'charts/bar',
+            'charts/line',
+          ],
+        },
+        {
+          title: 'Interaction',
+          children: [
+            'interaction/interaction',
+            'interaction/dragging',
+            'interaction/selection',
+            'interaction/cartesianplane',
+          ],
+        },
+        'utils',
+      ]
+    }
+  }
+};

docs/.vuepress/config.ts

@@ -131,7 +131,8 @@ export default defineConfig({
             'types/label',
             'types/line',
             'types/point',
-            'types/polygon'
+            'types/polygon',
+            'types/doughnutLabel'
           ]
         },
         'developers',
@@ -220,6 +221,16 @@ export default defineConfig({
             'polygon/shadow'
             ]
         },
+        {
+          title: 'Doughnut label annotations',
+          children: [
+            'doughnutLabel/basic',
+            'doughnutLabel/canvas',
+            'doughnutLabel/image',
+            'doughnutLabel/gauge',
+            'doughnutLabel/background',
+          ]
+        },
         {
           title: 'Charts',
           children: [

docs/diagrams/elementDoughnutLabelProps.drawio

@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2023-01-04T15:27:51.065Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/20.6.2 Chrome/106.0.5249.199 Electron/21.3.3 Safari/537.36" etag="UwpRt7ZZ2I8QNyQM25Nf" version="20.6.2" type="device"><diagram id="EVLCtf8sz0nmjKRDlPg8" name="Page-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==</diagram></mxfile>

docs/guide/configuration.md

@@ -56,7 +56,9 @@ const options = {
 | Name | Option | Value
 | ---- | ---- | ----
 | `numbers` | `properties` | `['x', 'y', 'x2', 'y2', 'width', 'height', 'centerX', 'centerY', 'pointX', 'pointY', 'radius']`
-| `numbers` | `type` | `number`
+| `numbers` | `type` | `'number'`
+| `colors` | `properties` | `['backgroundColor', 'borderColor']`
+| `colors` | `type` | `'color'`
 
 ## Common
 

docs/guide/index.md

@@ -8,7 +8,11 @@ This plugin needs to be registered. It does not function as inline plugin.
 
 An annotation plugin for Chart.js >= 4.0.0
 
-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. Annotations will not work on any chart that does not have exactly two axes, including pie, radar, and polar area charts.
+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.
+
+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.
+
+Annotations will not work on any chart that does not have exactly two axes, including pie, radar, and polar area charts.
 
 ![Banner](./banner.png)