[筆記] chartjs-plugin-datalabels 在 Chart.js 產出的圖表上加 label @地瓜大的飛翔旅程

章節連結

內容
參考資料

Chart.js 若要在其圖表本體內加上標籤的自訂說明，原生是沒有支援的，但可透過 chartjs-plugin-datalabels 來實現。雖說這套件最近一次更新已是 2022 年的事了，但目前也無其他替代品。

內容

有支援 TypeScript 型別，所以無需字型下載型別檔案。

https://chartjs-plugin-datalabels.netlify.app/

設定檔掛在 options.plugins.datalabels 下，像是：

options: {
    plugins: {
        datalabels: {
            color: '#FFFFFF',
            font: {
               size: 16,
               weight: 'bold',
               family: 'Arial, sans-serif',
            },
            formatter: function (_, context) {
              return displayOrderArr[context.dataIndex]
            },
        },       
   },
},