feat: show pie chart values against segments (#14216)

* feat: show pie chart values against segments

* update snapshots

* rollback snapshot change

* only show label if 2 or more data points

* add a little padding when values are below 10

* update even more snapshots

frontend/src/scenes/insights/views/LineGraph/PieChart.tsx

@@ -31,6 +31,7 @@ import { SeriesDatum } from 'scenes/insights/InsightTooltip/insightTooltipUtils'
 import { SeriesLetter } from 'lib/components/SeriesGlyph'
 
 import './chartjsSetup'
+import ChartDataLabels from 'chartjs-plugin-datalabels'
 
 let timer: NodeJS.Timeout | null = null
 
@@ -93,6 +94,7 @@ export function PieChart({
         const onlyOneValue = processedDatasets?.[0]?.data?.length === 1
         const newChart = new Chart(canvasRef.current?.getContext('2d') as ChartItem, {
             type: 'pie',
+            plugins: [ChartDataLabels],
             data: {
                 labels,
                 datasets: processedDatasets,
@@ -119,6 +121,31 @@ export function PieChart({
                     onChartClick(event, chart, datasets, onClick)
                 },
                 plugins: {
+                    datalabels: {
+                        color: 'white',
+                        anchor: 'end',
+                        backgroundColor: (context) => {
+                            return context.dataset.backgroundColor?.[context.dataIndex] || 'black'
+                        },
+                        display: (context) => {
+                            const total = context.dataset.data.reduce(
+                                (a, b) => (a as number) + (b as number),
+                                0
+                            ) as number
+                            const percentage = ((context.dataset.data[context.dataIndex] as number) / total) * 100
+                            return context.dataset.data.length > 1 && percentage > 5
+                        },
+                        padding: (context) => {
+                            // in order to make numbers below 10 look circular we need a little padding
+                            const value = context.dataset.data[context.dataIndex] as number
+                            const paddingY = value < 10 ? 2 : 4
+                            const paddingX = value < 10 ? 5 : 4
+                            return { top: paddingY, bottom: paddingY, left: paddingX, right: paddingX }
+                        },
+                        borderRadius: 25,
+                        borderWidth: 2,
+                        borderColor: 'white',
+                    },
                     legend: {
                         display: false,
                     },

package.json

@@ -82,6 +82,7 @@
         "chart.js": "^3.9.1",
         "chartjs-adapter-dayjs-3": "^1.2.3",
         "chartjs-plugin-crosshair": "^1.2.0",
+        "chartjs-plugin-datalabels": "^2.2.0",
         "chokidar": "^3.5.3",
         "clsx": "^1.1.1",
         "core-js": "3.15.2",

pnpm-lock.yaml

@@ -76,6 +76,7 @@ specifiers:
   chart.js: ^3.9.1
   chartjs-adapter-dayjs-3: ^1.2.3
   chartjs-plugin-crosshair: ^1.2.0
+  chartjs-plugin-datalabels: ^2.2.0
   chokidar: ^3.5.3
   clsx: ^1.1.1
   concurrently: ^5.3.0
@@ -209,6 +210,7 @@ dependencies:
   chart.js: 3.9.1
   chartjs-adapter-dayjs-3: 1.2.3_ygcept37un3u7jsj2baqr5ze4e
   chartjs-plugin-crosshair: 1.2.0_chart.js@3.9.1
+  chartjs-plugin-datalabels: 2.2.0_chart.js@3.9.1
   chokidar: 3.5.3
   clsx: 1.2.1
   core-js: 3.15.2
@@ -6741,6 +6743,14 @@ packages:
       chart.js: 3.9.1
     dev: false
 
+  /chartjs-plugin-datalabels/2.2.0_chart.js@3.9.1:
+    resolution: {integrity: sha512-14ZU30lH7n89oq+A4bWaJPnAG8a7ZTk7dKf48YAzMvJjQtjrgg5Dpk9f+LbjCF6bpx3RAGTeL13IXpKQYyRvlw==}
+    peerDependencies:
+      chart.js: '>=3.0.0'
+    dependencies:
+      chart.js: 3.9.1
+    dev: false
+
   /check-more-types/2.24.0:
     resolution: {integrity: sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA==}
     engines: {node: '>= 0.8.0'}