Convert local time to timezone.

src/components/charts/BarChart.tsx

@@ -66,7 +66,7 @@ export function BarChart(props: BarChartProps) {
         },
       },
     };
-  }, [colors]);
+  }, [colors, unit, stacked, renderXLabel, renderYLabel]);
 
   const handleTooltip = ({ tooltip }: { tooltip: any }) => {
     const { opacity } = tooltip;

src/components/hooks/queries/useWebsiteEvents.ts

@@ -1,12 +1,29 @@
 import useApi from './useApi';
 import { UseQueryOptions } from '@tanstack/react-query';
+import { useDateRange, useNavigation, useTimezone } from 'components/hooks';
+import { zonedTimeToUtc } from 'date-fns-tz';
 
 export function useWebsiteEvents(
   websiteId: string,
-  params?: { [key: string]: any },
   options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
 ) {
   const { get, useQuery } = useApi();
+  const [dateRange] = useDateRange(websiteId);
+  const { startDate, endDate, unit, offset } = dateRange;
+  const { timezone } = useTimezone();
+  const {
+    query: { url, event },
+  } = useNavigation();
+
+  const params = {
+    startAt: +zonedTimeToUtc(startDate, timezone),
+    endAt: +zonedTimeToUtc(endDate, timezone),
+    unit,
+    offset,
+    timezone,
+    url,
+    event,
+  };
 
   return useQuery({
     queryKey: ['events', { ...params }],

src/components/hooks/queries/useWebsitePageviews.ts

@@ -1,3 +1,4 @@
+import { zonedTimeToUtc } from 'date-fns-tz';
 import { useApi, useDateRange, useNavigation, useTimezone } from 'components/hooks';
 
 export function useWebsitePageviews(websiteId: string, options?: { [key: string]: string }) {
@@ -10,8 +11,8 @@ export function useWebsitePageviews(websiteId: string, options?: { [key: string]
   } = useNavigation();
 
   const params = {
-    startAt: +startDate,
-    endAt: +endDate,
+    startAt: +zonedTimeToUtc(startDate, timezone),
+    endAt: +zonedTimeToUtc(endDate, timezone),
     unit,
     timezone,
     url,

src/components/metrics/EventsChart.tsx

@@ -3,39 +3,19 @@ import { Loading } from 'react-basics';
 import { colord } from 'colord';
 import BarChart from 'components/charts/BarChart';
 import { getDateArray } from 'lib/date';
-import {
-  useLocale,
-  useDateRange,
-  useTimezone,
-  useNavigation,
-  useWebsiteEvents,
-} from 'components/hooks';
+import { useLocale, useDateRange, useWebsiteEvents } from 'components/hooks';
 import { CHART_COLORS } from 'lib/constants';
 import { renderDateLabels } from 'lib/charts';
 
 export interface EventsChartProps {
   websiteId: string;
   className?: string;
-  token?: string;
 }
 
-export function EventsChart({ websiteId, className, token }: EventsChartProps) {
-  const [{ startDate, endDate, unit, offset }] = useDateRange(websiteId);
+export function EventsChart({ websiteId, className }: EventsChartProps) {
+  const [{ startDate, endDate, unit }] = useDateRange(websiteId);
   const { locale } = useLocale();
-  const { timezone } = useTimezone();
-  const {
-    query: { url, event },
-  } = useNavigation();
-  const { data, isLoading } = useWebsiteEvents(websiteId, {
-    startAt: +startDate,
-    endAt: +endDate,
-    unit,
-    timezone,
-    url,
-    event,
-    token,
-    offset,
-  });
+  const { data, isLoading } = useWebsiteEvents(websiteId);
 
   const chartData = useMemo(() => {
     if (!data) return [];