diff --git a/src/client/components/facet_bar/ChartDialog.js b/src/client/components/facet_bar/ChartDialog.js
index 85a3c7ed2924ba727c5f417598e1c0c862261dc9..800174e5ab9da0dde138cbe32f2d0fd4dbd3c752 100644
--- a/src/client/components/facet_bar/ChartDialog.js
+++ b/src/client/components/facet_bar/ChartDialog.js
@@ -51,9 +51,30 @@ const ChartDialog = props => {
             legend: {
               position: 'right',
               width: 400,
-              fontSize: 14,
+              fontSize: 16,
               itemMargin: {
                 horizontal: 5
+              },
+              onItemHover: {
+                highlightDataSeries: false
+              },
+              onItemClick: {
+                toggleDataSeries: false
+              },
+              markers: {
+                width: 18,
+                height: 18,
+              },
+              formatter: (seriesName, opts) => {
+                return `${seriesName} [${opts.w.globals.series[opts.seriesIndex]}]`;
+              }
+            },
+            tooltip: {
+              //enabled: false,
+              followCursor: false,
+              fixed: {
+                enabled: true,
+                position: 'topRight'
               }
             }
           }}
diff --git a/src/client/index.html b/src/client/index.html
index e23b0241de7e133b989deadb2088c99c1459dd09..39d1f1f4f9c3cae5732faee2dd4fc17bfd58b213 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -51,6 +51,16 @@
     .ReactVirtualized__Grid {
       outline: none;
     }
+    .apexcharts-legend {
+      box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),
+        0px 1px 1px 0px rgba(0,0,0,0.14),
+        0px 1px 3px 0px rgba(0,0,0,0.12);
+      transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;  
+
+    }
+    .apexcharts-legend-marker {
+      top: 3px !important;
+    }
     </style>
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>