--- a/static/candolint.css	Mon Oct 16 11:29:02 2017 +0800
+++ b/static/candolint.css	Mon Oct 16 20:37:16 2017 +0800
@@ -91,10 +91,20 @@
 }
 
 .chart-tooltip {
-    padding: 10px;
+    background: white;
+    border: 1px solid #000;
+    border-radius: 3px;
+    padding: 2px 8px;
     pointer-events: none;
 }
 
+.legend-dot {
+    height: 8px;
+    width: 8px;
+    border-radius: 4px;
+    margin-right: 4px;
+}
+
 .check-log {
     background: #3c3c3c;
     color: white;

--- a/static/candolint.js	Mon Oct 16 11:29:02 2017 +0800
+++ b/static/candolint.js	Mon Oct 16 20:37:16 2017 +0800
@@ -56,6 +56,10 @@
         {name: 'errors', color: '#da314b', scale: y1}
     ];
 
+    $.each(config, function(i, series) {
+        $tooltip.find('[data-dot="' + series.name + '"]').css('background', series.color);
+    });
+
     var render = function() {
         svg.attr('width', $container.width());
         svg.attr('height', $container.height());

--- a/templates/check.html	Mon Oct 16 11:29:02 2017 +0800
+++ b/templates/check.html	Mon Oct 16 20:37:16 2017 +0800
@@ -71,16 +71,29 @@
     {% if chart %}
       <div class="uk-position-relative uk-margin-top chart-container">
         <svg id="check-chart"></svg>
-        <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-display-inline-block uk-position-absolute uk-hidden chart-tooltip">
-          <dl class="uk-description-list-horizontal list-terse">
-            <dt>Warnings:</dt>
-            <dd data-point="warnings">0</dd>
-            <dt>Errors:</dt>
-            <dd data-point="errors">0</dd>
-            <dt>Duration:</dt>
-            <dd data-point="duration">0</dd>
-          </dl>
-        </div>
+        <table class="uk-display-inline-block uk-position-absolute uk-position-z-index uk-hidden chart-tooltip">
+          <tr>
+            <td>
+              <div class="uk-display-inline-block legend-dot" data-dot="warnings"></div>
+            </td>
+            <td>Warnings:</td>
+            <td data-point="warnings">0</td>
+          </tr>
+          <tr>
+            <td>
+              <div class="uk-display-inline-block legend-dot" data-dot="errors"></div>
+            </td>
+            <td>Errors:</td>
+            <td data-point="errors">0</td>
+          </tr>
+          <tr>
+            <td>
+              <div class="uk-display-inline-block legend-dot" data-dot="duration"></div>
+            </td>
+            <td>Duration:</td>
+            <td data-point="duration">0</td>
+          </tr>
+        </table>
       </div>
       <script type="application/json" id="check-chart-data">{% raw json_encode(chart) %}</script>
     {% end %}