size update

web/src/components/ui/charts/BusterChartJS/hooks/useChartSpecificOptions/pieChartOptions.ts

@@ -17,6 +17,7 @@ import {
 } from '@/api/asset_interfaces/metric/charts';
 import { determineFontColorContrast } from '@/lib/colors';
 import { Context } from 'chartjs-plugin-datalabels';
+import clamp from 'lodash/clamp';
 
 type PieOptions = ChartProps<'pie'>['options'] | ChartProps<'doughnut'>['options'];
 
@@ -70,13 +71,10 @@ export const piePluginsHandler = ({
               )
             ];
           },
-          font: ({ chart }) => {
-            const minDimension = Math.min(chart.width, chart.height);
-            return [
-              { size: Math.max(20, minDimension * 0.02) }, // title font
-              { size: Math.max(42, minDimension * 0.042) } // value font
-            ];
-          },
+          font: [
+            { size: 16 }, // title font
+            { size: 28 } // value font
+          ],
           color: [titleColor, valueColor]
         }
       }

web/src/components/ui/charts/stories/BusterChart.PieChart.stories.tsx

@@ -144,6 +144,7 @@ export const ResizableContainer: Story = {
   args: {
     selectedChartType: ChartType.Pie,
     data: generatePieChartData(),
+
     pieChartAxis: {
       x: ['segment'],
       y: ['value']
@@ -160,7 +161,9 @@ export const ResizableContainer: Story = {
       } satisfies IColumnLabelFormat
     } satisfies Record<keyof PieChartData, IColumnLabelFormat>,
     pieDisplayLabelAs: 'percent',
-    pieDonutWidth: 0
+    pieDonutWidth: 0.6,
+    pieInnerLabelTitle: 'Total',
+    pieInnerLabelAggregate: 'sum'
   },
   parameters: {
     docs: {