From 2abcd9f2b5b49d3988b53089b129bb1fc5bcc2d8 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Thu, 15 Oct 2020 09:10:59 -0700
Subject: [PATCH] Fix legend rendering.

---
 components/metrics/BarChart.js    | 5 +++++
 components/metrics/EventsChart.js | 1 +
 2 files changed, 6 insertions(+)

diff --git a/components/metrics/BarChart.js b/components/metrics/BarChart.js
index 1bd9ce65..f42cf73f 100644
--- a/components/metrics/BarChart.js
+++ b/components/metrics/BarChart.js
@@ -9,6 +9,7 @@ import useTheme from 'hooks/useTheme';
 import { DEFAUL_CHART_HEIGHT, DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
 import styles from './BarChart.module.css';
 import ChartTooltip from './ChartTooltip';
+import useForceUpdate from '../../hooks/useForceUpdate';
 
 export default function BarChart({
   chartId,
@@ -28,6 +29,8 @@ export default function BarChart({
   const [tooltip, setTooltip] = useState(null);
   const [locale] = useLocale();
   const [theme] = useTheme();
+  const forceUpdate = useForceUpdate();
+
   const colors = {
     text: THEME_COLORS[theme].gray700,
     line: THEME_COLORS[theme].gray200,
@@ -180,6 +183,8 @@ export default function BarChart({
     onUpdate(chart.current);
 
     chart.current.update();
+
+    forceUpdate();
   }
 
   useEffect(() => {
diff --git a/components/metrics/EventsChart.js b/components/metrics/EventsChart.js
index dfaa424a..68556c96 100644
--- a/components/metrics/EventsChart.js
+++ b/components/metrics/EventsChart.js
@@ -79,6 +79,7 @@ export default function EventsChart({ websiteId, className, token }) {
       className={className}
       datasets={datasets}
       unit={unit}
+      height={300}
       records={getDateLength(startDate, endDate, unit)}
       onUpdate={handleUpdate}
       loading={loading}