diff --git a/frontend/src/container/BillingContainer/BillingContainer.tsx b/frontend/src/container/BillingContainer/BillingContainer.tsx
index fe784a0c57..9b45801356 100644
--- a/frontend/src/container/BillingContainer/BillingContainer.tsx
+++ b/frontend/src/container/BillingContainer/BillingContainer.tsx
@@ -26,7 +26,7 @@ import useAnalytics from 'hooks/analytics/useAnalytics';
 import useAxiosError from 'hooks/useAxiosError';
 import useLicense from 'hooks/useLicense';
 import { useNotifications } from 'hooks/useNotifications';
-import { pick } from 'lodash-es';
+import { isEmpty, pick } from 'lodash-es';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery } from 'react-query';
@@ -149,6 +149,9 @@ export default function BillingContainer(): JSX.Element {
 
 	const processUsageData = useCallback(
 		(data: any): void => {
+			if (isEmpty(data?.payload)) {
+				return;
+			}
 			const {
 				details: { breakdown = [], billTotal },
 				billingPeriodStart,
@@ -420,12 +423,14 @@ export default function BillingContainer(): JSX.Element {
 					)}
 
 				{!isLoading && !isFetchingBillingData ? (
-					<Alert
-						message={headerText}
-						type="info"
-						showIcon
-						style={{ marginTop: 12 }}
-					/>
+					headerText && (
+						<Alert
+							message={headerText}
+							type="info"
+							showIcon
+							style={{ marginTop: 12 }}
+						/>
+					)
 				) : (
 					<Skeleton.Input active style={{ height: 20, marginTop: 20 }} />
 				)}
diff --git a/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx b/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx
index fa6ce813a6..be77ebba95 100644
--- a/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx
+++ b/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx
@@ -3,9 +3,7 @@ import '../../../lib/uPlotLib/uPlotLib.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
 import { Card, Flex, Typography } from 'antd';
-import { getComponentForPanelType } from 'constants/panelTypes';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { PropsTypePropsMap } from 'container/GridPanelSwitch/types';
+import Uplot from 'components/Uplot';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import tooltipPlugin from 'lib/uPlotLib/plugins/tooltipPlugin';
@@ -14,7 +12,7 @@ import getRenderer from 'lib/uPlotLib/utils/getRenderer';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { getXAxisScale } from 'lib/uPlotLib/utils/getXAxisScale';
 import { getYAxisScale } from 'lib/uPlotLib/utils/getYAxisScale';
-import { FC, useMemo, useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import uPlot from 'uplot';
 
 import {
@@ -43,6 +41,21 @@ const paths = (
 	return renderer(u, seriesIdx, idx0, idx1, extendGap, buildClip);
 };
 
+const calculateStartEndTime = (
+	data: any,
+): { startTime: number; endTime: number } => {
+	const timestamps: number[] = [];
+	data?.details?.breakdown?.forEach((breakdown: any) => {
+		breakdown?.dayWiseBreakdown?.breakdown.forEach((entry: any) => {
+			timestamps.push(entry?.timestamp);
+		});
+	});
+	const billingTime = [data?.billingPeriodStart, data?.billingPeriodEnd];
+	const startTime: number = Math.min(...timestamps, ...billingTime);
+	const endTime: number = Math.max(...timestamps, ...billingTime);
+	return { startTime, endTime };
+};
+
 export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 	const { data, billAmount } = props;
 	const graphCompatibleData = useMemo(
@@ -54,11 +67,9 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const containerDimensions = useResizeObserver(graphRef);
 
-	const { billingPeriodStart: startTime, billingPeriodEnd: endTime } = data;
-
-	const Component = getComponentForPanelType(PANEL_TYPES.BAR) as FC<
-		PropsTypePropsMap[PANEL_TYPES]
-	>;
+	const { startTime, endTime } = useMemo(() => calculateStartEndTime(data), [
+		data,
+	]);
 
 	const getGraphSeries = (color: string, label: string): any => ({
 		drawStyle: 'bars',
@@ -183,7 +194,7 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 				</Flex>
 			</Flex>
 			<div ref={graphRef} style={{ height: '100%', paddingBottom: 48 }}>
-				<Component data={chartData} options={optionsForChart} />
+				<Uplot data={chartData} options={optionsForChart} />
 			</div>
 		</Card>
 	);
diff --git a/frontend/src/lib/uPlotLib/plugins/tooltipPlugin.ts b/frontend/src/lib/uPlotLib/plugins/tooltipPlugin.ts
index 4ec3677dfb..b06e5bff63 100644
--- a/frontend/src/lib/uPlotLib/plugins/tooltipPlugin.ts
+++ b/frontend/src/lib/uPlotLib/plugins/tooltipPlugin.ts
@@ -3,6 +3,7 @@ import { themeColors } from 'constants/theme';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import getLabelName from 'lib/getLabelName';
+import { get } from 'lodash-es';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
 import { placement } from '../placement';
@@ -68,7 +69,18 @@ const generateTooltipContent = (
 				const dataIngested = quantity[idx];
 				const label = getLabelName(metric, queryName || '', legend || '');
 
-				const color = generateColor(label, themeColors.chartcolors);
+				let color = generateColor(label, themeColors.chartcolors);
+
+				// in case of billing graph pick colors from the series options
+				if (isBillingUsageGraphs) {
+					let clr;
+					series.forEach((item) => {
+						if (item.label === label) {
+							clr = get(item, '_fill');
+						}
+					});
+					color = clr ?? color;
+				}
 
 				let tooltipItemLabel = label;