Bar chart to skip x-axis labels like Linear charts

packages/polaris-viz/src/components/BarChart/stories/MonthlyReport.stories.tsx

@@ -0,0 +1,16 @@
+import type {Story} from '@storybook/react';
+
+export {META as default} from './meta';
+
+import type {BarChartProps} from '../../../components';
+
+import {MONTHLY_REPORT_DATA, Template} from './data';
+
+export const MonthlyReport: Story<BarChartProps> = Template.bind({});
+
+MonthlyReport.args = {
+  data: MONTHLY_REPORT_DATA,
+  onError: (a, b) => {
+    console.log({a, b});
+  },
+};

packages/polaris-viz/src/components/BarChart/stories/data.tsx

@@ -8,6 +8,29 @@ export const Template: Story<BarChartProps> = (args: BarChartProps) => {
   return <BarChart {...args} />;
 };
 
+const generateDataSeries = (length = 30) =>
+  Array(length)
+    .fill(0)
+    .map((value: number, index) => {
+      const date = new Date();
+      date.setDate(date.getDate() + value + index);
+
+      return {
+        key: date.toLocaleDateString(undefined, {
+          month: 'short',
+          day: 'numeric',
+        }),
+        value: Math.floor(Math.random() * 1000),
+      };
+    });
+
+export const MONTHLY_REPORT_DATA: DataSeries[] = [
+  {
+    name: 'Current month',
+    data: generateDataSeries(),
+  },
+];
+
 export const DEFAULT_DATA: DataSeries[] = [
   {
     name: 'Breakfast',

packages/polaris-viz/src/components/VerticalBarChart/Chart.tsx

@@ -129,10 +129,6 @@ export function Chart({
       })
     : null;
 
-  const reducedLabelIndexes = useReducedLabelIndexes({
-    dataLength: data[0] ? data[0].data.length : 0,
-  });
-
   const {min, max} = getStackedMinMax({
     stackedValues,
     data,
@@ -194,6 +190,26 @@ export function Chart({
     yAxisWidth: yAxisLabelWidth,
   });
 
+  const longestLabelWidth = useMemo(() => {
+    const longest = Math.max(
+      ...formattedLabels.map((formattedLabel) =>
+        estimateStringWidth(formattedLabel, characterWidths),
+      ),
+    );
+
+    return longest;
+  }, [characterWidths, formattedLabels]);
+
+  const numberOfLabelsThatFit = Math.floor(drawableWidth / longestLabelWidth);
+  const skipEveryNthLabel = Math.ceil(
+    formattedLabels.length / numberOfLabelsThatFit,
+  );
+
+  const reducedLabelIndexes = useReducedLabelIndexes({
+    dataLength: data[0] ? data[0].data.length : 0,
+    skipEveryNthLabel,
+  });
+
   const annotationsDrawableHeight =
     chartYPosition + drawableHeight + ANNOTATIONS_LABELS_OFFSET;
 
@@ -229,6 +245,9 @@ export function Chart({
     annotationsLookupTable,
   );
 
+  const scaleStep = xScale.step();
+  const scaleStepHalf = xScale.step() / 2;
+  const labelWidth = xScale.bandwidth() + scaleStep;
   const xAxisLabelHalf = xScale.bandwidth() / 2;
 
   return (
@@ -244,10 +263,10 @@ export function Chart({
           <XAxis
             allowLineWrap={xAxisOptions.allowLineWrap}
             labels={formattedLabels}
-            labelWidth={xScale.bandwidth()}
+            labelWidth={labelWidth}
             onHeightChange={setXAxisHeight}
             reducedLabelIndexes={reducedLabelIndexes}
-            x={xAxisBounds.x}
+            x={xAxisBounds.x - scaleStepHalf}
             xScale={xScale}
             y={xAxisBounds.y}
           />