diff --git a/frontend/web/components/charts/BarChart.tsx b/frontend/web/components/charts/BarChart.tsx
index b4d0b838b924..3e745d794870 100644
--- a/frontend/web/components/charts/BarChart.tsx
+++ b/frontend/web/components/charts/BarChart.tsx
@@ -34,20 +34,30 @@ type BarChartProps = {
    * (e.g. numeric env ids) that need a human-readable label on display.
    */
   seriesLabels?: Record<string, string>
+  /** Fixed bar width in pixels. Default: recharts auto-sizes by available space. */
+  barSize?: number
+  /** Render vertical grid lines (one per x tick). Default `true`. */
+  verticalGrid?: boolean
 }
 
 const BarChart: FC<BarChartProps> = ({
+  barSize,
   colorMap,
   data,
   series,
   seriesLabels,
   showLegend = false,
+  verticalGrid = true,
   xAxisInterval = 0,
 }) => {
   return (
     <ResponsiveContainer height={400} width='100%'>
       <RawBarChart data={data}>
-        <CartesianGrid strokeDasharray='3 5' strokeOpacity={0.4} />
+        <CartesianGrid
+          strokeDasharray='3 5'
+          strokeOpacity={0.4}
+          vertical={verticalGrid}
+        />
         <XAxis
           dataKey='day'
           padding='gap'
@@ -84,6 +94,7 @@ const BarChart: FC<BarChartProps> = ({
             dataKey={label}
             stackId='series'
             fill={colorMap[label]}
+            barSize={barSize}
             animationBegin={index * 80}
             animationDuration={600}
             animationEasing='ease-out'
diff --git a/frontend/web/components/organisation-settings/usage/OrganisationUsage.container.tsx b/frontend/web/components/organisation-settings/usage/OrganisationUsage.container.tsx
index ee79c463c04c..0eab33f9ab28 100644
--- a/frontend/web/components/organisation-settings/usage/OrganisationUsage.container.tsx
+++ b/frontend/web/components/organisation-settings/usage/OrganisationUsage.container.tsx
@@ -1,21 +1,8 @@
-import Utils from 'common/utils/utils'
-import React, { FC } from 'react'
-import {
-  Bar,
-  BarChart,
-  ResponsiveContainer,
-  Tooltip as _Tooltip,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  TooltipProps,
-} from 'recharts'
+import React, { FC, useMemo } from 'react'
 import moment from 'moment'
-import {
-  NameType,
-  ValueType,
-} from 'recharts/types/component/DefaultTooltipContent'
 import { AggregateUsageDataItem } from 'common/types/responses'
+import EmptyState from 'components/EmptyState'
+import BarChart, { ChartDataPoint } from 'components/charts/BarChart'
 import UsageAPIDefinitions from './components/UsageAPIDefinitions'
 
 type OrganisationUsageProps = {
@@ -25,184 +12,98 @@ type OrganisationUsageProps = {
   colours: string[]
 }
 
+// Stable mapping between the user-facing selection label and the API field
+// (and therefore the chart's dataKey).
+const METRICS = [
+  { dataKey: 'flags', label: 'Flags' },
+  { dataKey: 'identities', label: 'Identities' },
+  { dataKey: 'environment_document', label: 'Environment Document' },
+  { dataKey: 'traits', label: 'Traits' },
+] as const
+
+type MetricDataKey = (typeof METRICS)[number]['dataKey']
+
 const OrganisationUsage: FC<OrganisationUsageProps> = ({
   chartData,
   colours,
   isError,
   selection,
 }) => {
-  return chartData || isError ? (
-    <>
-      {isError || chartData?.length === 0 ? (
-        <div className='py-4 fw-semibold text-center'>
-          {isError
-            ? 'Your organisation does not have recurrent billing periods'
-            : 'No usage recorded.'}
-        </div>
-      ) : (
-        <ResponsiveContainer height={400} width='100%'>
-          <BarChart data={chartData} style={{ stroke: '#fff', strokeWidth: 1 }}>
-            <CartesianGrid stroke='#EFF1F4' vertical={false} />
-            <XAxis
-              padding='gap'
-              allowDataOverflow={false}
-              dataKey='day'
-              interval={chartData?.length > 31 ? 7 : 0}
-              height={120}
-              angle={-90}
-              textAnchor='end'
-              tickFormatter={(v) => moment(v).format('D MMM')}
-              axisLine={{ stroke: '#EFF1F4' }}
-              tick={{ dx: -4, fill: '#656D7B' }}
-              tickLine={false}
-            />
-            <YAxis
-              allowDataOverflow={false}
-              tickLine={false}
-              axisLine={{ stroke: '#EFF1F4' }}
-              tick={{ fill: '#1A2634' }}
-            />
-            <_Tooltip
-              cursor={{ fill: 'transparent' }}
-              content={<RechartsTooltip />}
-            />
-            {selection.includes('Flags') && (
-              <Bar dataKey='flags' barSize={14} stackId='a' fill={colours[0]} />
-            )}
-            {selection.includes('Identities') && (
-              <Bar
-                dataKey='identities'
-                barSize={14}
-                stackId='a'
-                fill={colours[1]}
-              />
-            )}
-            {selection.includes('Environment Document') && (
-              <Bar
-                name='Environment Document'
-                dataKey='environment_document'
-                stackId='a'
-                fill={colours[2]}
-                barSize={14}
-              />
-            )}
-            {selection.includes('Traits') && (
-              <Bar
-                dataKey='traits'
-                barSize={14}
-                stackId='a'
-                fill={colours[3]}
-              />
-            )}
-          </BarChart>
-        </ResponsiveContainer>
-      )}
-      <UsageAPIDefinitions />
-    </>
-  ) : (
-    <div className='text-center'>
-      <Loader />
-    </div>
+  const formattedData: ChartDataPoint[] = useMemo(
+    () =>
+      chartData.map((d) => ({
+        day: moment(d.day).format('D MMM'),
+        environment_document: d.environment_document ?? 0,
+        flags: d.flags ?? 0,
+        identities: d.identities ?? 0,
+        traits: d.traits ?? 0,
+      })),
+    [chartData],
   )
-}
 
-const RechartsTooltip: FC<TooltipProps<ValueType, NameType>> = ({
-  active,
-  label,
-  payload,
-}) => {
-  if (!active || !payload || payload.length === 0) {
-    return null
+  const series = useMemo(
+    () =>
+      METRICS.filter((m) => selection.includes(m.label)).map((m) => m.dataKey),
+    [selection],
+  )
+
+  // dataKey → its colour at the metric's index in METRICS, so colours stay
+  // stable per metric regardless of which selections are active. Typed as
+  // `Record<MetricDataKey, …>` so adding a new entry to METRICS forces this
+  // (and seriesLabels below) to be updated — TS will fail compilation if any
+  // dataKey is missing.
+  const colorMap = useMemo<Record<MetricDataKey, string>>(
+    () => ({
+      environment_document: colours[2],
+      flags: colours[0],
+      identities: colours[1],
+      traits: colours[3],
+    }),
+    [colours],
+  )
+
+  // dataKey → display name (so the tooltip says "Environment Document"
+  // instead of "environment_document").
+  const seriesLabels: Record<MetricDataKey, string> = {
+    environment_document: 'Environment Document',
+    flags: 'Flags',
+    identities: 'Identities',
+    traits: 'Traits',
   }
 
-  return (
-    <div className='recharts-tooltip py-2'>
-      <div className='px-4 py-2 fs-small lh-sm fw-bold recharts-tooltip-header'>
-        {moment(label).format('D MMM')}
+  if (!chartData && !isError) {
+    return (
+      <div className='text-center'>
+        <Loader />
       </div>
-      <hr className='py-0 my-0 mb-3' />
-      {payload.map((el: any) => {
-        const { dataKey, fill, payload } = el
-        switch (dataKey) {
-          case 'traits': {
-            return (
-              <Row key={dataKey} className='px-4 mb-3'>
-                <span
-                  style={{
-                    backgroundColor: fill,
-                    borderRadius: 2,
-                    display: 'inline-block',
-                    height: 16,
-                    width: 16,
-                  }}
-                />
-                <span className='text-muted ml-2'>
-                  Traits: {Utils.numberWithCommas(payload[dataKey])}
-                </span>
-              </Row>
-            )
-          }
-          case 'flags': {
-            return (
-              <Row key={dataKey} className='px-4 mb-3'>
-                <span
-                  style={{
-                    backgroundColor: fill,
-                    borderRadius: 2,
-                    display: 'inline-block',
-                    height: 16,
-                    width: 16,
-                  }}
-                />
-                <span className='text-muted ml-2'>
-                  Flags: {Utils.numberWithCommas(payload[dataKey])}
-                </span>
-              </Row>
-            )
-          }
-          case 'identities': {
-            return (
-              <Row key={dataKey} className='px-4 mb-3'>
-                <span
-                  style={{
-                    backgroundColor: fill,
-                    borderRadius: 2,
-                    display: 'inline-block',
-                    height: 16,
-                    width: 16,
-                  }}
-                />
-                <span className='text-muted ml-2'>
-                  Identities: {Utils.numberWithCommas(payload[dataKey])}
-                </span>
-              </Row>
-            )
-          }
-          case 'environment_document': {
-            return (
-              <Row key={dataKey} className='px-4 mb-3'>
-                <span
-                  style={{
-                    backgroundColor: fill,
-                    borderRadius: 2,
-                    display: 'inline-block',
-                    height: 16,
-                    width: 16,
-                  }}
-                />
-                <span className='text-muted ml-2'>
-                  Environment Document:{' '}
-                  {Utils.numberWithCommas(payload[dataKey])}
-                </span>
-              </Row>
-            )
-          }
-          default: {
-            return null
+    )
+  }
+
+  return (
+    <>
+      {isError || chartData?.length === 0 ? (
+        <EmptyState
+          title={isError ? 'No billing periods' : 'No usage recorded'}
+          description={
+            isError
+              ? 'Your organisation does not have recurrent billing periods.'
+              : 'No usage data available for the selected period and project.'
           }
-        }
-      })}
-    </div>
+          icon='bar-chart'
+        />
+      ) : (
+        <BarChart
+          data={formattedData}
+          series={series}
+          colorMap={colorMap}
+          seriesLabels={seriesLabels}
+          xAxisInterval={chartData?.length > 31 ? 7 : 0}
+          barSize={14}
+          verticalGrid={false}
+        />
+      )}
+      <UsageAPIDefinitions />
+    </>
   )
 }
 
diff --git a/frontend/web/components/organisation-settings/usage/OrganisationUsageMetrics.container.tsx b/frontend/web/components/organisation-settings/usage/OrganisationUsageMetrics.container.tsx
index d2049d9cc695..8a07d7c450a1 100644
--- a/frontend/web/components/organisation-settings/usage/OrganisationUsageMetrics.container.tsx
+++ b/frontend/web/components/organisation-settings/usage/OrganisationUsageMetrics.container.tsx
@@ -1,4 +1,5 @@
 import React, { useMemo, useState } from 'react'
+import moment from 'moment'
 import { Res } from 'common/types/responses'
 import SingleSDKLabelsChart from './components/SingleSDKLabelsChart'
 import { MultiSelect } from 'components/base/select/multi-select'
@@ -46,7 +47,7 @@ const OrganisationUsageMetrics: React.FC<OrganisationUsageMetricsProps> = ({
         return {
           aggregateChartData: [],
           allUserAgents: [],
-          userAgentColorMap: new Map(),
+          userAgentColorMap: {} as Record<string, string>,
         }
 
       const aggregateGrouped: Record<string, ChartDataPoint> = {}
@@ -54,7 +55,9 @@ const OrganisationUsageMetrics: React.FC<OrganisationUsageMetricsProps> = ({
       const userAgentSet = new Set<string>()
 
       data.events_list.forEach((event) => {
-        const date = event.day
+        // BarChart consumes the displayed day string as the x-axis dataKey,
+        // so format here once and let the chart use it verbatim.
+        const date = moment(event.day).format('D MMM')
         const userAgent = event.labels?.user_agent || 'Unknown'
 
         if (!userAgentSet.has(userAgent)) {
@@ -79,9 +82,9 @@ const OrganisationUsageMetrics: React.FC<OrganisationUsageMetricsProps> = ({
           (aggregateGrouped[date][userAgent] || 0) + totalForUserAgent
       })
 
-      const colorMap = new Map()
+      const colorMap: Record<string, string> = {}
       userAgents.forEach((agent, index) => {
-        colorMap.set(agent, colours[index % colours.length])
+        colorMap[agent] = colours[index % colours.length]
       })
 
       return {
@@ -124,9 +127,7 @@ const OrganisationUsageMetrics: React.FC<OrganisationUsageMetricsProps> = ({
         <SingleSDKLabelsChart
           data={aggregateChartData}
           userAgents={filteredUserAgents}
-          metricKey='aggregate'
           title='API Usage'
-          colours={colours}
           userAgentsColorMap={userAgentColorMap}
         />
       </div>
diff --git a/frontend/web/components/organisation-settings/usage/components/SingleSDKLabelsChart.tsx b/frontend/web/components/organisation-settings/usage/components/SingleSDKLabelsChart.tsx
index a83f447ff378..6075180708d4 100644
--- a/frontend/web/components/organisation-settings/usage/components/SingleSDKLabelsChart.tsx
+++ b/frontend/web/components/organisation-settings/usage/components/SingleSDKLabelsChart.tsx
@@ -1,120 +1,43 @@
 import React, { FC } from 'react'
-import {
-  Bar,
-  BarChart,
-  ResponsiveContainer,
-  Tooltip as _Tooltip,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  TooltipProps,
-  Legend,
-} from 'recharts'
-import moment from 'moment'
-import {
-  NameType,
-  ValueType,
-} from 'recharts/types/component/DefaultTooltipContent'
+import BarChart from 'components/charts/BarChart'
+import EmptyState from 'components/EmptyState'
 import { ChartDataPoint } from 'components/organisation-settings/usage/OrganisationUsageMetrics.container'
-import Utils from 'common/utils/utils'
 
-interface UsageChartProps {
-  colours: string[]
+interface SingleSDKLabelsChartProps {
   title: string
   data: ChartDataPoint[]
   userAgents?: string[]
-  userAgentsColorMap: Map<string, string>
-  metricKey: string
+  userAgentsColorMap: Record<string, string>
 }
 
-const UsageChart: React.FC<UsageChartProps> = ({
-  colours,
+const SingleSDKLabelsChart: FC<SingleSDKLabelsChartProps> = ({
   data,
-  metricKey,
   title,
   userAgents = [],
   userAgentsColorMap,
-}) => (
-  <div className='border rounded p-3'>
-    <h5>{title}</h5>
-    <ResponsiveContainer height={400} width='100%'>
-      <BarChart data={data}>
-        <CartesianGrid stroke='#EFF1F4' vertical={false} />
-        <_Tooltip
-          cursor={{ fill: 'transparent' }}
-          content={<RechartsTooltip />}
-        />
-        <XAxis
-          dataKey='day'
-          tickFormatter={(v) => moment(v).format('D MMM')}
-          interval={data?.length > 31 ? 7 : 0}
-          textAnchor='end'
-          axisLine={{ stroke: '#EFF1F4' }}
-          tick={{ dx: -4, fill: '#656D7B' }}
-          angle={-90}
-          tickLine={false}
-          allowDataOverflow={false}
-        />
-        <YAxis
-          allowDataOverflow={false}
-          tickLine={false}
-          axisLine={{ stroke: '#EFF1F4' }}
-          tick={{ fill: '#1A2634' }}
-        />
-        <Legend wrapperStyle={{ paddingTop: '30px' }} />
-        {userAgents?.map((userAgent, index) => (
-          <Bar
-            key={userAgent}
-            dataKey={userAgent}
-            stackId={metricKey}
-            fill={
-              userAgentsColorMap
-                ? userAgentsColorMap.get(userAgent)
-                : colours[index % colours.length]
-            }
-          />
-        ))}
-      </BarChart>
-    </ResponsiveContainer>
-  </div>
-)
-
-const RechartsTooltip: FC<TooltipProps<ValueType, NameType>> = ({
-  active,
-  label,
-  payload,
 }) => {
-  if (!active || !payload || payload.length === 0) {
-    return null
-  }
+  const hasData = data.length > 0 && userAgents.length > 0
 
   return (
-    <div className='recharts-tooltip py-2'>
-      <div className='px-4 py-2 fs-small lh-sm fw-bold recharts-tooltip-header'>
-        {moment(label).format('D MMM')}
-      </div>
-      <hr className='py-0 my-0 mb-3' />
-      {payload.map((el: any) => {
-        const { dataKey, fill, value } = el
-        return (
-          <Row key={dataKey} className='px-4 mb-3'>
-            <span
-              style={{
-                backgroundColor: fill,
-                borderRadius: 2,
-                display: 'inline-block',
-                height: 16,
-                width: 16,
-              }}
-            />
-            <span className='text-muted ml-2'>
-              {dataKey}: {Utils.numberWithCommas(value)}
-            </span>
-          </Row>
-        )
-      })}
+    <div className='border rounded p-3'>
+      <h5>{title}</h5>
+      {hasData ? (
+        <BarChart
+          data={data}
+          series={userAgents}
+          colorMap={userAgentsColorMap}
+          xAxisInterval={data?.length > 31 ? 7 : 0}
+          showLegend
+        />
+      ) : (
+        <EmptyState
+          title='No SDK data'
+          description='No SDK usage data available for the selected period.'
+          icon='bar-chart'
+        />
+      )}
     </div>
   )
 }
 
-export default UsageChart
+export default SingleSDKLabelsChart
diff --git a/frontend/web/styles/3rdParty/_index.scss b/frontend/web/styles/3rdParty/_index.scss
index b921d2249cf1..423ed6ff9a0a 100644
--- a/frontend/web/styles/3rdParty/_index.scss
+++ b/frontend/web/styles/3rdParty/_index.scss
@@ -4,4 +4,3 @@
 @import "react-datepicker";
 @import "hw-badge";
 @import "react-diff";
-@import "recharts";
diff --git a/frontend/web/styles/3rdParty/_recharts.scss b/frontend/web/styles/3rdParty/_recharts.scss
deleted file mode 100644
index 2d4aa25aff3a..000000000000
--- a/frontend/web/styles/3rdParty/_recharts.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-// Recharts global overrides.
-//
-// The new <BarChart /> component passes colour tokens directly as prop values
-// (e.g. `fill={colorTextSecondary}`) which browsers resolve in SVG
-// presentation attributes — no CSS classname plumbing needed.
-//
-// TODO: delete everything below when SingleSDKLabelsChart and
-// OrganisationUsage migrate to <BarChart />. The rules only exist to keep
-// the two remaining raw-recharts consumers styled correctly.
-.recharts-tooltip {
-  background-color: $text-icon-light;
-  border-radius: $border-radius-lg;
-}
-
-.dark {
-  .recharts-tooltip-header {
-    color: $body-color;
-  }
-
-  .recharts-wrapper {
-    line {
-      stroke: $bg-dark100;
-    }
-  }
-}