diff --git a/static/app/views/insights/browser/resources/components/charts/assetSizeChart.tsx b/static/app/views/insights/browser/resources/components/charts/assetSizeChart.tsx
new file mode 100644
index 00000000000000..1f0a942098645d
--- /dev/null
+++ b/static/app/views/insights/browser/resources/components/charts/assetSizeChart.tsx
@@ -0,0 +1,39 @@
+import {tct} from 'sentry/locale';
+import type {Series} from 'sentry/types/echarts';
+import {formatBytesBase2} from 'sentry/utils/bytes/formatBytesBase2';
+import getDynamicText from 'sentry/utils/getDynamicText';
+import {DATA_TYPE} from 'sentry/views/insights/browser/resources/settings';
+import {AVG_COLOR} from 'sentry/views/insights/colors';
+import Chart, {ChartType} from 'sentry/views/insights/common/components/chart';
+import ChartPanel from 'sentry/views/insights/common/components/chartPanel';
+import {DataTitles} from 'sentry/views/insights/common/views/spans/types';
+
+interface Props {
+  isLoading: boolean;
+  series: Series[];
+  error?: Error | null;
+}
+
+export function AssetSizeChart({series, isLoading}: Props) {
+  return (
+    <ChartPanel title={tct('Average [dataType] Size', {dataType: DATA_TYPE})}>
+      <Chart
+        height={160}
+        aggregateOutputFormat="size"
+        data={series}
+        loading={isLoading}
+        chartColors={[AVG_COLOR]}
+        type={ChartType.LINE}
+        definedAxisTicks={4}
+        tooltipFormatterOptions={{
+          valueFormatter: bytes =>
+            getDynamicText({
+              value: formatBytesBase2(bytes),
+              fixed: 'xx KiB',
+            }),
+          nameFormatter: name => DataTitles[name],
+        }}
+      />
+    </ChartPanel>
+  );
+}
diff --git a/static/app/views/insights/browser/resources/components/charts/durationChart.tsx b/static/app/views/insights/browser/resources/components/charts/durationChart.tsx
new file mode 100644
index 00000000000000..f635c78d3e3ba2
--- /dev/null
+++ b/static/app/views/insights/browser/resources/components/charts/durationChart.tsx
@@ -0,0 +1,33 @@
+import type {Series} from 'sentry/types/echarts';
+import {AVG_COLOR} from 'sentry/views/insights/colors';
+import Chart, {ChartType} from 'sentry/views/insights/common/components/chart';
+import ChartPanel from 'sentry/views/insights/common/components/chartPanel';
+import {getDurationChartTitle} from 'sentry/views/insights/common/views/spans/types';
+import {CHART_HEIGHT} from 'sentry/views/insights/database/settings';
+
+interface Props {
+  isLoading: boolean;
+  series: Series[];
+  error?: Error | null;
+}
+
+export function DurationChart({series, isLoading, error}: Props) {
+  return (
+    <ChartPanel title={getDurationChartTitle('resource')}>
+      <Chart
+        height={CHART_HEIGHT}
+        grid={{
+          left: '0',
+          right: '0',
+          top: '8px',
+          bottom: '0',
+        }}
+        data={series}
+        loading={isLoading}
+        error={error}
+        chartColors={[AVG_COLOR]}
+        type={ChartType.LINE}
+      />
+    </ChartPanel>
+  );
+}
diff --git a/static/app/views/insights/browser/resources/components/charts/resourceLandingPageCharts.tsx b/static/app/views/insights/browser/resources/components/charts/resourceLandingPageCharts.tsx
index 2ca19cc6598f33..3b11f3ac0943a0 100644
--- a/static/app/views/insights/browser/resources/components/charts/resourceLandingPageCharts.tsx
+++ b/static/app/views/insights/browser/resources/components/charts/resourceLandingPageCharts.tsx
@@ -1,217 +1,58 @@
 import styled from '@emotion/styled';
 
-import {getInterval} from 'sentry/components/charts/utils';
 import {space} from 'sentry/styles/space';
-import type {PageFilters} from 'sentry/types/core';
-import EventView from 'sentry/utils/discover/eventView';
-import {DiscoverDatasets} from 'sentry/utils/discover/types';
-import {formatRate} from 'sentry/utils/formatters';
-import {EMPTY_OPTION_VALUE} from 'sentry/utils/tokenizeSearch';
-import usePageFilters from 'sentry/utils/usePageFilters';
-import {AVG_COLOR, THROUGHPUT_COLOR} from 'sentry/views/insights/colors';
-import Chart, {
-  ChartType,
-  useSynchronizeCharts,
-} from 'sentry/views/insights/common/components/chart';
-import ChartPanel from 'sentry/views/insights/common/components/chartPanel';
-import {useSpansQuery} from 'sentry/views/insights/common/queries/useSpansQuery';
-import {STARFISH_CHART_INTERVAL_FIDELITY} from 'sentry/views/insights/common/utils/constants';
-import {
-  getDurationChartTitle,
-  getThroughputChartTitle,
-} from 'sentry/views/insights/common/views/spans/types';
+import {EMPTY_OPTION_VALUE, MutableSearch} from 'sentry/utils/tokenizeSearch';
+import {useSynchronizeCharts} from 'sentry/views/insights/common/components/chart';
+import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
 import type {ModuleFilters} from 'sentry/views/insights/common/views/spans/useModuleFilters';
-import {ModuleName, SpanMetricsField} from 'sentry/views/insights/types';
+import {SpanMetricsField} from 'sentry/views/insights/types';
 
-import {RESOURCE_THROUGHPUT_UNIT} from '../../settings';
+import {DurationChart} from './durationChart';
+import {ThroughputChart} from './throughputChart';
 
 const {SPAN_SELF_TIME, SPAN_DESCRIPTION, SPAN_DOMAIN} = SpanMetricsField;
 
-const CHART_HEIGHT = 140;
-
 type Props = {
   appliedFilters: ModuleFilters;
   extraQuery?: string[];
 };
 
-type ChartProps = {
-  filters: ModuleFilters;
-  title: string;
-  extraQuery?: string[];
-};
-
 export function ResourceLandingPageCharts({appliedFilters, extraQuery}: Props) {
-  const moduleName = ModuleName.RESOURCE;
-  const {selection} = usePageFilters();
-
-  const eventView = getEventView(selection, appliedFilters);
+  let query: string = buildDiscoverQueryConditions(appliedFilters);
 
   if (extraQuery) {
-    eventView.query += ` ${extraQuery.join(' ')}`;
+    query += ` ${extraQuery.join(' ')}`;
   }
 
-  const {isPending} = useSpansQuery({
-    eventView,
-    initialData: [],
-    referrer: 'api.starfish.span-time-charts',
-  });
+  const {data, isPending, error} = useSpanMetricsSeries(
+    {
+      search: new MutableSearch(query),
+      yAxis: ['spm()', `avg(${SPAN_SELF_TIME})`],
+    },
+    'api.starfish.span-time-charts'
+  );
 
   useSynchronizeCharts(1, !isPending);
 
   return (
     <ChartsContainer>
       <ChartsContainerItem>
-        <ThroughputChart
-          title={getThroughputChartTitle(moduleName, RESOURCE_THROUGHPUT_UNIT)}
-          filters={appliedFilters}
-          extraQuery={extraQuery}
-        />
+        <ThroughputChart series={data['spm()']} isLoading={isPending} error={error} />
       </ChartsContainerItem>
 
       <ChartsContainerItem>
         <DurationChart
-          title={getDurationChartTitle(moduleName)}
-          filters={appliedFilters}
-          extraQuery={extraQuery}
+          series={[data[`avg(${SPAN_SELF_TIME})`]]}
+          isLoading={isPending}
+          error={error}
         />
       </ChartsContainerItem>
     </ChartsContainer>
   );
 }
 
-function ThroughputChart({title, filters, extraQuery}: ChartProps): JSX.Element {
-  const pageFilters = usePageFilters();
-  const eventView = getEventView(pageFilters.selection, filters);
-  if (extraQuery) {
-    eventView.query += ` ${extraQuery.join(' ')}`;
-  }
-
-  const label = 'Requests';
-  const {isPending, data} = useSpansQuery<
-    {
-      'avg(span.self_time)': number;
-      interval: number;
-      'spm()': number;
-    }[]
-  >({
-    eventView,
-    initialData: [],
-    referrer: 'api.starfish.span-time-charts',
-  });
-  const dataByGroup = {[label]: data};
-
-  const throughputTimeSeries = Object.keys(dataByGroup).map(groupName => {
-    const groupData = dataByGroup[groupName];
-
-    return {
-      seriesName: label ?? 'Throughput',
-      data: (groupData ?? []).map(datum => ({
-        value: datum['spm()'],
-        name: datum.interval,
-      })),
-    };
-  });
-
-  return (
-    <ChartPanel title={title}>
-      <Chart
-        height={CHART_HEIGHT}
-        data={throughputTimeSeries}
-        loading={isPending}
-        grid={{
-          left: '0',
-          right: '0',
-          top: '8px',
-          bottom: '0',
-        }}
-        definedAxisTicks={4}
-        aggregateOutputFormat="rate"
-        rateUnit={RESOURCE_THROUGHPUT_UNIT}
-        stacked
-        type={ChartType.LINE}
-        chartColors={[THROUGHPUT_COLOR]}
-        tooltipFormatterOptions={{
-          valueFormatter: value => formatRate(value, RESOURCE_THROUGHPUT_UNIT),
-        }}
-      />
-    </ChartPanel>
-  );
-}
-
-function DurationChart({title, filters, extraQuery}: ChartProps): JSX.Element {
-  const pageFilters = usePageFilters();
-  const eventView = getEventView(pageFilters.selection, filters);
-  if (extraQuery) {
-    eventView.query += ` ${extraQuery.join(' ')}`;
-  }
-
-  const label = `avg(${SPAN_SELF_TIME})`;
-
-  const {isPending, data} = useSpansQuery<
-    {
-      'avg(span.self_time)': number;
-      interval: number;
-      'spm()': number;
-    }[]
-  >({
-    eventView,
-    initialData: [],
-    referrer: 'api.starfish.span-time-charts',
-  });
-  const dataByGroup = {[label]: data};
-
-  const avgSeries = Object.keys(dataByGroup).map(groupName => {
-    const groupData = dataByGroup[groupName];
-
-    return {
-      seriesName: label,
-      data: (groupData ?? []).map(datum => ({
-        value: datum[`avg(${SPAN_SELF_TIME})`],
-        name: datum.interval,
-      })),
-    };
-  });
-
-  return (
-    <ChartPanel title={title}>
-      <Chart
-        height={CHART_HEIGHT}
-        data={[...avgSeries]}
-        loading={isPending}
-        grid={{
-          left: '0',
-          right: '0',
-          top: '8px',
-          bottom: '0',
-        }}
-        definedAxisTicks={4}
-        stacked
-        type={ChartType.LINE}
-        chartColors={[AVG_COLOR]}
-      />
-    </ChartPanel>
-  );
-}
-
 const SPAN_FILTER_KEYS = ['span_operation', SPAN_DOMAIN, 'action'];
 
-const getEventView = (pageFilters: PageFilters, appliedFilters: ModuleFilters) => {
-  const query = buildDiscoverQueryConditions(appliedFilters);
-
-  return EventView.fromNewQueryWithPageFilters(
-    {
-      name: '',
-      fields: [''],
-      yAxis: ['spm()', `avg(${SPAN_SELF_TIME})`],
-      query,
-      dataset: DiscoverDatasets.SPANS_METRICS,
-      interval: getInterval(pageFilters.datetime, STARFISH_CHART_INTERVAL_FIDELITY),
-      version: 2,
-    },
-    pageFilters
-  );
-};
-
 const buildDiscoverQueryConditions = (appliedFilters: ModuleFilters) => {
   const result = Object.keys(appliedFilters)
     .filter(key => SPAN_FILTER_KEYS.includes(key))
diff --git a/static/app/views/insights/browser/resources/components/charts/resourceSummaryCharts.tsx b/static/app/views/insights/browser/resources/components/charts/resourceSummaryCharts.tsx
index a12e2f86dccb91..c939e9035c3675 100644
--- a/static/app/views/insights/browser/resources/components/charts/resourceSummaryCharts.tsx
+++ b/static/app/views/insights/browser/resources/components/charts/resourceSummaryCharts.tsx
@@ -1,28 +1,16 @@
 import {Fragment} from 'react';
 
-import {t, tct} from 'sentry/locale';
-import {formatBytesBase2} from 'sentry/utils/bytes/formatBytesBase2';
-import {formatRate} from 'sentry/utils/formatters';
-import getDynamicText from 'sentry/utils/getDynamicText';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {Referrer} from 'sentry/views/insights/browser/resources/referrer';
-import {
-  DATA_TYPE,
-  RESOURCE_THROUGHPUT_UNIT,
-} from 'sentry/views/insights/browser/resources/settings';
 import {useResourceModuleFilters} from 'sentry/views/insights/browser/resources/utils/useResourceFilters';
-import {AVG_COLOR, THROUGHPUT_COLOR} from 'sentry/views/insights/colors';
-import Chart, {ChartType} from 'sentry/views/insights/common/components/chart';
-import ChartPanel from 'sentry/views/insights/common/components/chartPanel';
 import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
 import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
-import {
-  DataTitles,
-  getDurationChartTitle,
-  getThroughputChartTitle,
-} from 'sentry/views/insights/common/views/spans/types';
 import {SpanMetricsField} from 'sentry/views/insights/types';
 
+import {AssetSizeChart} from './assetSizeChart';
+import {DurationChart} from './durationChart';
+import {ThroughputChart} from './throughputChart';
+
 const {
   SPAN_SELF_TIME,
   HTTP_RESPONSE_CONTENT_LENGTH,
@@ -76,62 +64,28 @@ function ResourceSummaryCharts(props: {groupId: string}) {
   return (
     <Fragment>
       <ModuleLayout.Third>
-        <ChartPanel title={getThroughputChartTitle('http', RESOURCE_THROUGHPUT_UNIT)}>
-          <Chart
-            height={160}
-            data={[spanMetricsSeriesData?.[`spm()`]]}
-            loading={areSpanMetricsSeriesLoading}
-            type={ChartType.LINE}
-            definedAxisTicks={4}
-            aggregateOutputFormat="rate"
-            rateUnit={RESOURCE_THROUGHPUT_UNIT}
-            stacked
-            chartColors={[THROUGHPUT_COLOR]}
-            tooltipFormatterOptions={{
-              valueFormatter: value => formatRate(value, RESOURCE_THROUGHPUT_UNIT),
-              nameFormatter: () => t('Requests'),
-            }}
-          />
-        </ChartPanel>
+        <ThroughputChart
+          series={spanMetricsSeriesData?.[`spm()`]}
+          isLoading={areSpanMetricsSeriesLoading}
+        />
       </ModuleLayout.Third>
 
       <ModuleLayout.Third>
-        <ChartPanel title={getDurationChartTitle('http')}>
-          <Chart
-            height={160}
-            data={[spanMetricsSeriesData?.[`avg(${SPAN_SELF_TIME})`]]}
-            loading={areSpanMetricsSeriesLoading}
-            chartColors={[AVG_COLOR]}
-            type={ChartType.LINE}
-            definedAxisTicks={4}
-          />
-        </ChartPanel>
+        <DurationChart
+          series={[spanMetricsSeriesData?.[`avg(${SPAN_SELF_TIME})`]]}
+          isLoading={areSpanMetricsSeriesLoading}
+        />
       </ModuleLayout.Third>
 
       <ModuleLayout.Third>
-        <ChartPanel title={tct('Average [dataType] Size', {dataType: DATA_TYPE})}>
-          <Chart
-            height={160}
-            aggregateOutputFormat="size"
-            data={[
-              spanMetricsSeriesData?.[`avg(${HTTP_DECODED_RESPONSE_CONTENT_LENGTH})`],
-              spanMetricsSeriesData?.[`avg(${HTTP_RESPONSE_TRANSFER_SIZE})`],
-              spanMetricsSeriesData?.[`avg(${HTTP_RESPONSE_CONTENT_LENGTH})`],
-            ]}
-            loading={areSpanMetricsSeriesLoading}
-            chartColors={[AVG_COLOR]}
-            type={ChartType.LINE}
-            definedAxisTicks={4}
-            tooltipFormatterOptions={{
-              valueFormatter: bytes =>
-                getDynamicText({
-                  value: formatBytesBase2(bytes),
-                  fixed: 'xx KiB',
-                }),
-              nameFormatter: name => DataTitles[name],
-            }}
-          />
-        </ChartPanel>
+        <AssetSizeChart
+          series={[
+            spanMetricsSeriesData?.[`avg(${HTTP_DECODED_RESPONSE_CONTENT_LENGTH})`],
+            spanMetricsSeriesData?.[`avg(${HTTP_RESPONSE_TRANSFER_SIZE})`],
+            spanMetricsSeriesData?.[`avg(${HTTP_RESPONSE_CONTENT_LENGTH})`],
+          ]}
+          isLoading={areSpanMetricsSeriesLoading}
+        />
       </ModuleLayout.Third>
     </Fragment>
   );
diff --git a/static/app/views/insights/browser/resources/components/charts/throughputChart.tsx b/static/app/views/insights/browser/resources/components/charts/throughputChart.tsx
new file mode 100644
index 00000000000000..eb1eaab0d31a57
--- /dev/null
+++ b/static/app/views/insights/browser/resources/components/charts/throughputChart.tsx
@@ -0,0 +1,41 @@
+import type {Series} from 'sentry/types/echarts';
+import {RateUnit} from 'sentry/utils/discover/fields';
+import {formatRate} from 'sentry/utils/formatters';
+import {THROUGHPUT_COLOR} from 'sentry/views/insights/colors';
+import Chart, {ChartType} from 'sentry/views/insights/common/components/chart';
+import ChartPanel from 'sentry/views/insights/common/components/chartPanel';
+import {getThroughputChartTitle} from 'sentry/views/insights/common/views/spans/types';
+import {CHART_HEIGHT} from 'sentry/views/insights/database/settings';
+
+import {RESOURCE_THROUGHPUT_UNIT} from '../../settings';
+
+interface Props {
+  isLoading: boolean;
+  series: Series;
+  error?: Error | null;
+}
+
+export function ThroughputChart({series, isLoading}: Props) {
+  return (
+    <ChartPanel title={getThroughputChartTitle('resource', RESOURCE_THROUGHPUT_UNIT)}>
+      <Chart
+        height={CHART_HEIGHT}
+        grid={{
+          left: '0',
+          right: '0',
+          top: '8px',
+          bottom: '0',
+        }}
+        data={[series]}
+        loading={isLoading}
+        chartColors={[THROUGHPUT_COLOR]}
+        type={ChartType.LINE}
+        aggregateOutputFormat="rate"
+        rateUnit={RateUnit.PER_MINUTE}
+        tooltipFormatterOptions={{
+          valueFormatter: value => formatRate(value, RESOURCE_THROUGHPUT_UNIT),
+        }}
+      />
+    </ChartPanel>
+  );
+}