I’m using React.js and Chart.js to render analytics data. The backend provides timestamps in UTC, and I convert these timestamps to the user’s local timezone before rendering the chart.
After applying timezone conversion using toLocaleString() and a convertTZ() helper, the chart fails to render — it either stays blank or doesn’t update.
I’ve confirmed that the API receives and returns valid data. Here’s the function responsible for fetching and formatting that data:
const getChartDataCampId = async (campId) => {
if (!campId) return;
handleLoader(true);
const now = Date.now();
let { from, to } = dateRange;
from = from ? new Date(from) : subDays(now, DEFAULT_DAYS_ON_CHART);
to = to ? new Date(to) : new Date(now);
if (Date.parse(from) > Date.parse(to)) {
setDateRangeErr("Invalid date range");
return;
}
setDateRangeErr("");
const userTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
const fromInUserTZ = convertTZ(from, userTz);
const toInUserTZ = convertTZ(to, userTz);
const formattedFrom1 = fromInUserTZ.toLocaleString("sv-SE", {
timeZone: userTz,
}).replace(" ", "T");
const formattedTo1 = toInUserTZ.toLocaleString("sv-SE", {
timeZone: userTz,
}).replace(" ", "T");
try {
const params = {
campaignIds: campId,
from: formattedFrom1,
to: formattedTo1,
};
let emailSentChartData = await jobsApi.getChartData(null, campId, params);
let multiChannelChartData = await jobsApi.getMultichannelChartData(
user.email,
null,
params
);
const augRes = getAugmentRes({
clicks: emailSentChartData.clicks,
conversations: emailSentChartData.conversations,
meetings: emailSentChartData.meetings,
emailsSent: emailSentChartData?.dailySends,
leadsGenerated: emailSentChartData?.dailyLeads,
emailsDelivered: emailSentChartData?.dailyDelivered,
emailsOpened: emailSentChartData?.dailyOpened,
allReplies: emailSentChartData?.allReplies,
repliedEmails: emailSentChartData?.repliedEmails,
unSubscribeCount: emailSentChartData?.unSubscribeCount,
webSiteVisit: emailSentChartData?.webSiteVisit,
replies: emailSentChartData?.replies,
pageViews: emailSentChartData?.pageViews,
videoViews: emailSentChartData?.videoViews,
avgVideoViews: emailSentChartData?.avgVideoViews,
avgVideoViewPercentage: emailSentChartData?.avgVideoViewPercentage,
invitationSent: multiChannelChartData.dailyInvitationSends,
invitationAccepted: multiChannelChartData.dailyAccepted,
invitationRejected: multiChannelChartData.dailyRejected,
messageSent: multiChannelChartData.dailyMessagesSent,
messageSeen: multiChannelChartData.messageSeen,
params,
});
if (filterData === "Total") {
const totalDataRes = await jobsApi.getLeadsTotalData([campId], dateRange);
const augResTotal = getAugmentResTotal({
clicks: totalDataRes?.clicks,
emailsOpened: totalDataRes?.opens,
params,
});
augRes.clicks = augResTotal.clicks;
augRes.emailsOpened = augResTotal.emailsOpened;
}
handleLoader(false);
return augRes;
} catch (err) {
console.log("Error fetching chart data!");
console.log("Error here", err);
}
};
What I want:
I want to show chart data in local timezone rather than UTC using Chart.js in React.
What happens:
After timezone conversion, the chart becomes blank or does not update.
What am I doing wrong? How should I fix this?
