Configure.

index.html

@@ -73,18 +73,11 @@
             symbol: "BTC",
             metric: "fcas",
             type: "line",
-            yAxis: 0
-          },
-          {
-            name: "BTC Dev",
-            symbol: "BTC",
-            metric: "dev",
-            type: "line",
             yAxis: 1
           }
         ],
         rangeSelector: {
-          enabled: false
+          enabled: true
         }
       });
 

src/chart/index.tsx

@@ -34,6 +34,7 @@ export type Props = {
 class Chart extends Component<Props> {
   static defaultProps: Partial<Props> = {
     axisTitles: [],
+    mode: "light",
     exportingEnabled: false
   };
 
@@ -81,6 +82,7 @@ class Chart extends Component<Props> {
         },
 
         legend: {
+          enabled: series && series.length > 1,
           itemStyle: { color: textColor },
           itemHoverStyle: { color: textColor }
         },
@@ -166,8 +168,9 @@ class Chart extends Component<Props> {
   }
 
   render() {
+    const { mode } = this.props;
     return (
-      <div className={css.wrapper}>
+      <div className={css[mode]}>
         <CustomLinks
           widget="chart"
           api={this.props.api}

src/chart/style.css

@@ -1,3 +1,19 @@
 .wrapper text {
   font-size: 12px;
 }
+.wrapper a {
+  color: #20b7fc;
+}
+
+.dark text,
+.light text {
+  font-size: 12px;
+}
+
+.dark a {
+  color: #20b7fc;
+}
+
+.light a {
+  color: #2d57ed;
+}

src/chart/style.css.d.ts

@@ -1,3 +1,5 @@
 // This file is automatically generated.
 // Please do not change this file!
+export const dark: string;
+export const light: string;
 export const wrapper: string;