Add maxBarThickness for chart.js

e-mission · May 25, 2024 · 8cf5fb0 · 8cf5fb0
1 parent 084224e
commit 8cf5fb0
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git a/www/js/components/Chart.tsx b/www/js/components/Chart.tsx
@@ -34,6 +34,7 @@ export type Props = {
   showLegend?: boolean;
   reverse?: boolean;
   enableTooltip?: boolean;
+  maxBarThickness?: number;
 };
 const Chart = ({
   records,
@@ -49,6 +50,7 @@ const Chart = ({
   showLegend = true,
   reverse = true,
   enableTooltip = true,
+  maxBarThickness = 100,
 }: Props) => {
   const { colors } = useTheme();
   const [numVisibleDatasets, setNumVisibleDatasets] = useState(1);
@@ -74,6 +76,7 @@ const Chart = ({
           getColorForChartEl?.(chartRef.current, e, barCtx, 'border'),
         borderWidth: borderWidth || 2,
         borderRadius: 3,
+        maxBarThickness: maxBarThickness,
       })),
     };
   }, [chartDatasets, getColorForLabel]);

diff --git a/www/js/metrics/SurveyTripCategoriesCard.tsx b/www/js/metrics/SurveyTripCategoriesCard.tsx
@@ -73,6 +73,7 @@ const SurveyTripCategoriesCard = ({ userMetrics, aggMetrics }: Props) => {
               getColorForChartEl={(l) => (l === 'Response' ? colors.navy : colors.orange)}
               showLegend={false}
               reverse={false}
+              maxBarThickness={60}
             />
             <LabelPanel first={t('main-metrics.response')} second={t('main-metrics.no-response')} />
           </>