diff --git a/packages/api/src/clickhouse/index.ts b/packages/api/src/clickhouse/index.ts
index 1f0cd38a3..7add58cb4 100644
--- a/packages/api/src/clickhouse/index.ts
+++ b/packages/api/src/clickhouse/index.ts
@@ -1715,7 +1715,7 @@ export const getMultiSeriesChart = async ({
 
     queries = await Promise.all(
       series.map(s => {
-        if (s.type != 'time' && s.type != 'table') {
+        if (s.type != 'time' && s.type != 'table' && s.type != 'number') {
           throw new Error(`Unsupported series type: ${s.type}`);
         }
         if (s.table != 'logs' && s.table != null) {
@@ -1727,7 +1727,7 @@ export const getMultiSeriesChart = async ({
           endTime,
           field: s.field,
           granularity,
-          groupBy: s.groupBy,
+          groupBy: s.type === 'number' ? [] : s.groupBy,
           propertyTypeMappingsModel,
           q: s.where,
           sortOrder: s.type === 'table' ? s.sortOrder : undefined,
@@ -1746,7 +1746,7 @@ export const getMultiSeriesChart = async ({
 
     queries = await Promise.all(
       series.map(s => {
-        if (s.type != 'time' && s.type != 'table') {
+        if (s.type != 'time' && s.type != 'table' && s.type != 'number') {
           throw new Error(`Unsupported series type: ${s.type}`);
         }
         if (s.table != 'metrics') {
@@ -1764,13 +1764,13 @@ export const getMultiSeriesChart = async ({
           endTime,
           name: s.field,
           granularity,
-          groupBy: s.groupBy,
           sortOrder: s.type === 'table' ? s.sortOrder : undefined,
           q: s.where,
           startTime,
           teamId,
           dataType: s.metricDataType,
           propertyTypeMappingsModel,
+          groupBy: s.type === 'number' ? [] : s.groupBy,
         });
       }),
     );
diff --git a/packages/app/src/ChartUtils.tsx b/packages/app/src/ChartUtils.tsx
index 6604c8703..18b761fb6 100644
--- a/packages/app/src/ChartUtils.tsx
+++ b/packages/app/src/ChartUtils.tsx
@@ -77,6 +77,23 @@ export enum Granularity {
   ThirtyDay = '30 day',
 }
 
+export const GRANULARITY_SECONDS_MAP: Record<Granularity, number> = {
+  [Granularity.ThirtySecond]: 30,
+  [Granularity.OneMinute]: 60,
+  [Granularity.FiveMinute]: 5 * 60,
+  [Granularity.TenMinute]: 10 * 60,
+  [Granularity.FifteenMinute]: 15 * 60,
+  [Granularity.ThirtyMinute]: 30 * 60,
+  [Granularity.OneHour]: 60 * 60,
+  [Granularity.TwoHour]: 2 * 60 * 60,
+  [Granularity.SixHour]: 6 * 60 * 60,
+  [Granularity.TwelveHour]: 12 * 60 * 60,
+  [Granularity.OneDay]: 24 * 60 * 60,
+  [Granularity.TwoDay]: 2 * 24 * 60 * 60,
+  [Granularity.SevenDay]: 7 * 24 * 60 * 60,
+  [Granularity.ThirtyDay]: 30 * 24 * 60 * 60,
+};
+
 export const isGranularity = (value: string): value is Granularity => {
   return Object.values(Granularity).includes(value as Granularity);
 };
diff --git a/packages/app/src/DashboardPage.tsx b/packages/app/src/DashboardPage.tsx
index 81280b234..2c3458d77 100644
--- a/packages/app/src/DashboardPage.tsx
+++ b/packages/app/src/DashboardPage.tsx
@@ -189,12 +189,18 @@ const Tile = forwardRef(
         : type === 'number'
         ? {
             type,
-            table: chart.series[0].table ?? 'logs',
-            aggFn: chart.series[0].aggFn,
             field: chart.series[0].field ?? '', // TODO: Fix in definition
-            where: buildAndWhereClause(query, chart.series[0].where),
-            dateRange,
             numberFormat: chart.series[0].numberFormat,
+            series: chart.series.map(s => ({
+              ...s,
+              where: buildAndWhereClause(
+                query,
+                s.type === 'number' ? s.where : '',
+              ),
+            })),
+            dateRange,
+            granularity:
+              granularity ?? convertDateRangeToGranularityString(dateRange, 60),
           }
         : {
             type,
diff --git a/packages/app/src/EditChartForm.tsx b/packages/app/src/EditChartForm.tsx
index 7c618c26a..4b3951535 100644
--- a/packages/app/src/EditChartForm.tsx
+++ b/packages/app/src/EditChartForm.tsx
@@ -370,12 +370,11 @@ export const EditNumberChartForm = ({
   const chartConfig = useMemo(() => {
     return _editedChart != null && _editedChart.series[0].type === 'number'
       ? {
-          aggFn: _editedChart.series[0].aggFn ?? 'count',
-          table: _editedChart.series[0].table ?? 'logs',
           field: _editedChart.series[0].field ?? '', // TODO: Fix in definition
-          where: _editedChart.series[0].where,
           dateRange,
           numberFormat: _editedChart.series[0].numberFormat,
+          series: _editedChart.series,
+          granularity: convertDateRangeToGranularityString(dateRange, 60),
         }
       : null;
   }, [_editedChart, dateRange]);
@@ -393,9 +392,6 @@ export const EditNumberChartForm = ({
     return null;
   }
 
-  const labelWidth = 320;
-  const aggFn = _editedChart.series[0].aggFn ?? 'count';
-
   return (
     <form
       onSubmit={e => {
@@ -419,105 +415,14 @@ export const EditNumberChartForm = ({
           placeholder="Chart Name"
         />
       </div>
-      <div className="d-flex mt-3 align-items-center">
-        <div style={{ width: labelWidth }} className="text-muted fw-500 ps-2">
-          Aggregation Function
-        </div>
-        <div className="ms-3 flex-grow-1">
-          <Select
-            options={AGG_FNS}
-            className="ds-select"
-            value={AGG_FNS.find(v => v.value === aggFn)}
-            onChange={opt => {
-              _setEditedChart(
-                produce(_editedChart, draft => {
-                  if (draft.series[0].type === 'number') {
-                    draft.series[0].aggFn = opt?.value ?? 'count';
-                  }
-                }),
-              );
-            }}
-            classNamePrefix="ds-react-select"
-          />
-        </div>
-      </div>
-      {aggFn !== 'count' && (
-        <div className="d-flex mt-3 align-items-center">
-          <div style={{ width: labelWidth }} className="text-muted fw-500 ps-2">
-            Field
-          </div>
-          <div className="ms-3 flex-grow-1">
-            <FieldSelect
-              value={_editedChart.series[0].field ?? ''}
-              setValue={field =>
-                _setEditedChart(
-                  produce(_editedChart, draft => {
-                    if (draft.series[0].type === 'number') {
-                      draft.series[0].field = field;
-                    }
-                  }),
-                )
-              }
-              types={
-                aggFn === 'count_distinct'
-                  ? ['number', 'string', 'bool']
-                  : ['number']
-              }
-            />
-          </div>
-        </div>
-      )}
-      <div className="d-flex mt-3 align-items-center">
-        <div style={{ width: labelWidth }} className="text-muted fw-500 ps-2">
-          Where
-        </div>
-        <div className="ms-3 flex-grow-1">
-          <InputGroup>
-            <Form.Control
-              type="text"
-              placeholder={'Filter results by a search query'}
-              className="border-0 fs-7"
-              value={_editedChart.series[0].where}
-              onChange={event =>
-                _setEditedChart(
-                  produce(_editedChart, draft => {
-                    if (draft.series[0].type === 'number') {
-                      draft.series[0].where = event.target.value;
-                    }
-                  }),
-                )
-              }
-            />
-          </InputGroup>
-        </div>
-      </div>
-      <div className="ms-2 mt-2 mb-3">
-        <Divider
-          label={
-            <>
-              <i className="bi bi-gear me-1" />
-              Chart Settings
-            </>
-          }
-          c="dark.2"
-          mb={8}
-        />
-        <Group>
-          <div className="fs-8 text-slate-300">Number Format</div>
-          <NumberFormatInput
-            value={_editedChart.series[0].numberFormat}
-            onChange={numberFormat =>
-              _setEditedChart(
-                produce(_editedChart, draft => {
-                  if (draft.series[0].type === 'number') {
-                    draft.series[0].numberFormat = numberFormat;
-                  }
-                }),
-              )
-            }
-          />
-        </Group>
-      </div>
+      <EditMultiSeriesChartForm
+        {...{
+          editedChart: _editedChart,
+          setEditedChart: _setEditedChart,
+          chartType: 'number',
+        }}
+      />
+
       {(onSave != null || onClose != null) && (
         <div className="d-flex justify-content-between my-3 ps-2">
           {onSave != null && (
@@ -684,7 +589,7 @@ export const EditTableChartForm = ({
         {...{
           editedChart: _editedChart,
           setEditedChart: _setEditedChart,
-          CHART_TYPE,
+          chartType: CHART_TYPE,
         }}
       />
       {(onSave != null || onClose != null) && (
@@ -1008,13 +913,13 @@ function pushNewSeries(draft: Draft<Chart>) {
 export const EditMultiSeriesChartForm = ({
   editedChart,
   setEditedChart,
-  CHART_TYPE,
+  chartType,
 }: {
   editedChart: Chart;
   setEditedChart: (chart: Chart) => void;
-  CHART_TYPE: 'time' | 'table';
+  chartType: 'time' | 'table' | 'number';
 }) => {
-  if (editedChart.series[0].type !== CHART_TYPE) {
+  if (editedChart.series[0].type !== chartType) {
     return null;
   }
 
@@ -1033,7 +938,7 @@ export const EditMultiSeriesChartForm = ({
                 setEditedChart(
                   produce(editedChart, draft => {
                     draft.series.forEach((series, i) => {
-                      if (series.type === CHART_TYPE) {
+                      if (series.type === chartType) {
                         series.table = table;
                         series.aggFn = aggFn;
                       }
@@ -1046,7 +951,7 @@ export const EditMultiSeriesChartForm = ({
         </Flex>
       )}
       {editedChart.series.map((series, i) => {
-        if (series.type !== CHART_TYPE) {
+        if (series.type !== chartType) {
           return null;
         }
 
@@ -1072,7 +977,7 @@ export const EditMultiSeriesChartForm = ({
                       }}
                     >
                       <i className="bi bi-trash me-2" />
-                      Remove Series
+                      Remove {series.type === 'number' ? 'Ratio' : 'Series'}
                     </Button>
                   )}
                 </>
@@ -1085,14 +990,14 @@ export const EditMultiSeriesChartForm = ({
               table={series.table ?? 'logs'}
               aggFn={series.aggFn}
               where={series.where}
-              groupBy={series.groupBy[0]}
+              groupBy={series.type !== 'number' ? series.groupBy[0] : undefined}
               field={series.field ?? ''}
               numberFormat={series.numberFormat}
               setAggFn={aggFn =>
                 setEditedChart(
                   produce(editedChart, draft => {
                     const draftSeries = draft.series[i];
-                    if (draftSeries.type === CHART_TYPE) {
+                    if (draftSeries.type === chartType) {
                       draftSeries.aggFn = aggFn;
                     }
                   }),
@@ -1102,19 +1007,22 @@ export const EditMultiSeriesChartForm = ({
                 setEditedChart(
                   produce(editedChart, draft => {
                     const draftSeries = draft.series[i];
-                    if (draftSeries.type === CHART_TYPE) {
+                    if (draftSeries.type === chartType) {
                       draftSeries.where = where;
                     }
                   }),
                 )
               }
               setGroupBy={
-                editedChart.series.length === 1
+                editedChart.series.length === 1 && series.type !== 'number'
                   ? groupBy =>
                       setEditedChart(
                         produce(editedChart, draft => {
                           const draftSeries = draft.series[i];
-                          if (draftSeries.type === CHART_TYPE) {
+                          if (
+                            draftSeries.type === chartType &&
+                            draftSeries.type !== 'number'
+                          ) {
                             if (groupBy != undefined) {
                               draftSeries.groupBy[0] = groupBy;
                             } else {
@@ -1129,7 +1037,7 @@ export const EditMultiSeriesChartForm = ({
                 setEditedChart(
                   produce(editedChart, draft => {
                     const draftSeries = draft.series[i];
-                    if (draftSeries.type === CHART_TYPE) {
+                    if (draftSeries.type === chartType) {
                       draftSeries.field = field;
                     }
                   }),
@@ -1141,7 +1049,7 @@ export const EditMultiSeriesChartForm = ({
                       setEditedChart(
                         produce(editedChart, draft => {
                           const draftSeries = draft.series[i];
-                          if (draftSeries.type === CHART_TYPE) {
+                          if (draftSeries.type === chartType) {
                             draftSeries.table = table;
                             draftSeries.aggFn = aggFn;
                           }
@@ -1154,7 +1062,7 @@ export const EditMultiSeriesChartForm = ({
                 setEditedChart(
                   produce(editedChart, draft => {
                     const draftSeries = draft.series[i];
-                    if (draftSeries.type === CHART_TYPE) {
+                    if (draftSeries.type === chartType) {
                       draftSeries.field = field;
                       draftSeries.aggFn = aggFn;
                     }
@@ -1166,37 +1074,41 @@ export const EditMultiSeriesChartForm = ({
         );
       })}
       <Divider my="md" />
-      {editedChart.series.length > 1 && (
-        <Flex align="center" gap="md" mb="sm">
-          <div className="text-muted">Group By</div>
-          <div className="flex-grow-1">
-            <GroupBySelect
-              table={editedChart.series[0].table ?? 'logs'}
-              groupBy={editedChart.series[0].groupBy[0]}
-              fields={
-                editedChart.series
-                  .map(s => (s as TimeChartSeries).field)
-                  .filter(f => f != null) as string[]
-              }
-              setGroupBy={groupBy => {
-                setEditedChart(
-                  produce(editedChart, draft => {
-                    draft.series.forEach((series, i) => {
-                      if (series.type === CHART_TYPE) {
-                        if (groupBy != undefined) {
-                          series.groupBy[0] = groupBy;
-                        } else {
-                          series.groupBy = [];
+      {editedChart.series.length > 1 &&
+        editedChart.series[0].type !== 'number' && (
+          <Flex align="center" gap="md" mb="sm">
+            <div className="text-muted">Group By</div>
+            <div className="flex-grow-1">
+              <GroupBySelect
+                table={editedChart.series[0].table ?? 'logs'}
+                groupBy={editedChart.series[0].groupBy[0]}
+                fields={
+                  editedChart.series
+                    .map(s => (s as TimeChartSeries).field)
+                    .filter(f => f != null) as string[]
+                }
+                setGroupBy={groupBy => {
+                  setEditedChart(
+                    produce(editedChart, draft => {
+                      draft.series.forEach((series, i) => {
+                        if (
+                          series.type === chartType &&
+                          series.type !== 'number'
+                        ) {
+                          if (groupBy != undefined) {
+                            series.groupBy[0] = groupBy;
+                          } else {
+                            series.groupBy = [];
+                          }
                         }
-                      }
-                    });
-                  }),
-                );
-              }}
-            />
-          </div>
-        </Flex>
-      )}
+                      });
+                    }),
+                  );
+                }}
+              />
+            </div>
+          </Flex>
+        )}
       <Flex justify="space-between">
         <Flex gap="md" align="center">
           {editedChart.series.length === 1 && (
@@ -1218,24 +1130,26 @@ export const EditMultiSeriesChartForm = ({
               Add Ratio
             </Button>
           )}
-          <Button
-            mt={4}
-            variant="subtle"
-            size="sm"
-            color="gray"
-            onClick={() => {
-              setEditedChart(
-                produce(editedChart, draft => {
-                  pushNewSeries(draft);
-                  draft.seriesReturnType = 'column';
-                }),
-              );
-            }}
-          >
-            <i className="bi bi-plus-circle me-2" />
-            Add Series
-          </Button>
-          {editedChart.series.length == 2 && (
+          {chartType !== 'number' && (
+            <Button
+              mt={4}
+              variant="subtle"
+              size="sm"
+              color="gray"
+              onClick={() => {
+                setEditedChart(
+                  produce(editedChart, draft => {
+                    pushNewSeries(draft);
+                    draft.seriesReturnType = 'column';
+                  }),
+                );
+              }}
+            >
+              <i className="bi bi-plus-circle me-2" />
+              Add Series
+            </Button>
+          )}
+          {editedChart.series.length == 2 && chartType !== 'number' && (
             <Switch
               label="As Ratio"
               checked={editedChart.seriesReturnType === 'ratio'}
@@ -1257,7 +1171,7 @@ export const EditMultiSeriesChartForm = ({
             setEditedChart(
               produce(editedChart, draft => {
                 draft.series.forEach((series, i) => {
-                  if (series.type === CHART_TYPE) {
+                  if (series.type === chartType) {
                     series.numberFormat = numberFormat;
                   }
                 });
@@ -1389,7 +1303,7 @@ export const EditLineChartForm = ({
         {...{
           editedChart: _editedChart,
           setEditedChart: _setEditedChart,
-          CHART_TYPE,
+          chartType: CHART_TYPE,
         }}
       />
 
diff --git a/packages/app/src/HDXNumberChart.tsx b/packages/app/src/HDXNumberChart.tsx
index d20635db8..95cef8d76 100644
--- a/packages/app/src/HDXNumberChart.tsx
+++ b/packages/app/src/HDXNumberChart.tsx
@@ -1,56 +1,40 @@
 import { memo } from 'react';
 
 import api from './api';
-import type { AggFn, NumberFormat } from './types';
+import type { ChartSeries, NumberFormat } from './types';
 import { formatNumber } from './utils';
 
 const HDXNumberChart = memo(
   ({
-    config: { table, aggFn, field, where, dateRange, numberFormat },
+    config: { series, dateRange, numberFormat },
     onSettled,
   }: {
     config: {
-      table: string;
-      aggFn: AggFn;
-      field: string;
-      where: string;
+      series: ChartSeries[];
       dateRange: [Date, Date];
       numberFormat?: NumberFormat;
     };
     onSettled?: () => void;
   }) => {
-    const { data, isError, isLoading } =
-      table === 'logs'
-        ? api.useLogsChart(
-            {
-              aggFn,
-              endDate: dateRange[1] ?? new Date(),
-              field,
-              granularity: undefined,
-              groupBy: '',
-              q: where,
-              startDate: dateRange[0] ?? new Date(),
-            },
-            {
-              onSettled,
-            },
-          )
-        : api.useMetricsChart(
-            {
-              aggFn,
-              endDate: dateRange[1] ?? new Date(),
-              granularity: undefined,
-              name: field,
-              q: where,
-              startDate: dateRange[0] ?? new Date(),
-              groupBy: '',
-            },
-            {
-              onSettled,
-            },
-          );
+    const { data, isError, isLoading } = api.useMultiSeriesChart(
+      {
+        series,
+        startDate: dateRange[0],
+        endDate: dateRange[1],
+        seriesReturnType: series.length > 1 ? 'ratio' : 'column',
+      },
+      {
+        onSettled,
+      },
+    );
+    const sortedData = data?.data?.sort(
+      (a: any, b: any) => b?.ts_bucket - a?.ts_bucket,
+    );
 
-    const number = formatNumber(data?.data?.[0]?.data, numberFormat);
+    const number = formatNumber(
+      sortedData?.[0]?.['series_0.data'],
+      numberFormat,
+    );
 
     return isLoading ? (
       <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">