Refactor chart components.

components/common/Dot.js

@@ -4,12 +4,14 @@ import styles from './Dot.module.css';
 
 export default function Dot({ color, size, className }) {
   return (
-    <div
-      style={{ background: color }}
-      className={classNames(styles.dot, className, {
-        [styles.small]: size === 'small',
-        [styles.large]: size === 'large',
-      })}
-    />
+    <div className={styles.wrapper}>
+      <div
+        style={{ background: color }}
+        className={classNames(styles.dot, className, {
+          [styles.small]: size === 'small',
+          [styles.large]: size === 'large',
+        })}
+      />
+    </div>
   );
 }

components/common/Dot.module.css

@@ -1,9 +1,14 @@
+.wrapper {
+  background: var(--gray50);
+  margin-right: 10px;
+  border-radius: 100%;
+}
+
 .dot {
   background: var(--green400);
   width: 10px;
   height: 10px;
   border-radius: 100%;
-  margin-right: 10px;
 }
 
 .dot.small {