Replace chart legend with custom component.

components/metrics/BarChart.js

@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import ReactTooltip from 'react-tooltip';
 import classNames from 'classnames';
 import ChartJS from 'chart.js';
+import Dot from 'components/common/Dot';
 import { formatLongNumber } from 'lib/format';
 import { dateFormat } from 'lib/lang';
 import useLocale from 'hooks/useLocale';
@@ -24,6 +25,7 @@ export default function BarChart({
 }) {
   const canvas = useRef();
   const chart = useRef();
+  const [legend, setLegend] = useState();
   const [tooltip, setTooltip] = useState(null);
   const [locale] = useLocale();
   const [theme] = useTheme();
@@ -111,9 +113,7 @@ export default function BarChart({
       responsiveAnimationDuration: 0,
       maintainAspectRatio: false,
       legend: {
-        labels: {
+        display: false,
-          fontColor: colors.text,
-        },
       },
       scales: {
         xAxes: [
@@ -143,6 +143,7 @@ export default function BarChart({
               callback: renderYLabel,
               beginAtZero: true,
               fontColor: colors.text,
+              precision: 0,
             },
             gridLines: {
               color: colors.line,
@@ -163,6 +164,8 @@ export default function BarChart({
       },
       options,
     });
+
+    chart.current.generateLegend();
   }
 
   function updateChart() {
@@ -179,6 +182,10 @@ export default function BarChart({
     options.tooltips.custom = renderTooltip;
 
     onUpdate(chart.current);
+
+    chart.current.update();
+
+    chart.current.generateLegend();
   }
 
   useEffect(() => {
@@ -189,6 +196,7 @@ export default function BarChart({
         setTooltip(null);
         updateChart();
       }
+      setLegend({ ...chart.current.legend });
     }
   }, [datasets, unit, animationDuration, locale, theme]);
 
@@ -202,6 +210,7 @@ export default function BarChart({
       >
         <canvas ref={canvas} />
       </div>
+      <Legend items={legend?.legendItems} locale={locale} />
       <ReactTooltip id={`${chartId}-tooltip`}>
         {tooltip ? <Tooltip {...tooltip} /> : null}
       </ReactTooltip>
@@ -209,6 +218,17 @@ export default function BarChart({
   );
 }
 
+const Legend = ({ items = [], locale }) => (
+  <div className={styles.legend}>
+    {items.map(({ text, fillStyle }) => (
+      <div key={text} className={styles.label}>
+        <Dot color={fillStyle} />
+        <span className={locale}>{text}</span>
+      </div>
+    ))}
+  </div>
+);
+
 const Tooltip = ({ title, value, label, labelColor }) => (
   <div className={styles.tooltip}>
     <div className={styles.content}>

components/metrics/BarChart.module.css

@@ -41,3 +41,20 @@
   width: 10px;
   height: 10px;
 }
+
+.legend {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-xsmall);
+}
+
+.label + .label {
+  margin-left: 20px;
+}

components/metrics/EventsChart.js

@@ -61,14 +61,6 @@ export default function EventsChart({ websiteId, className, token }) {
     });
   }, [data]);
 
-  function handleCreate(options) {
-    const legend = {
-      position: 'bottom',
-    };
-
-    options.legend = legend;
-  }
-
   function handleUpdate(chart) {
     chart.data.datasets = datasets;
 
@@ -86,7 +78,6 @@ export default function EventsChart({ websiteId, className, token }) {
       datasets={datasets}
       unit={unit}
       records={getDateLength(startDate, endDate, unit)}
-      onCreate={handleCreate}
       onUpdate={handleUpdate}
       stacked
     />

components/metrics/PageviewsChart.js

@@ -45,8 +45,6 @@ export default function PageviewsChart({
       id: 'metrics.page-views',
       defaultMessage: 'Page views',
     });
-
-    chart.update();
   };
 
   if (!data) {

components/pages/WebsiteDetails.module.css

@@ -31,5 +31,5 @@
 }
 
 .eventschart {
-  padding: 30px 0;
+  padding-top: 30px;
 }