Merge pull request #202 from nzzdev/fix-annotation-overflow

Fix annotation overflow label
nzzdev · Feb 15, 2021 · 889729f · 889729f
2 parents 8e87eab + d94fdac
commit 889729f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 21 deletions.
diff --git a/styles_src/q-chart.scss b/styles_src/q-chart.scss
@@ -7,14 +7,18 @@
 }
 
 .q-chart-events {
-  margin: 0 4px;
+  margin-top: 4px;
   display: flex;
   flex-direction: row;
-  align-items: flex-start;
+}
+
+.q-chart-events__icon {
+  height: 18px;
+  width: 18px;
+  margin-right: 4px;
 }
 
 .q-chart-events__label {
   display: flex;
   align-items: center;
-  margin-left: 4px;
 }
diff --git a/views/events.html b/views/events.html
@@ -3,24 +3,29 @@
   style="margin: 15px -4px; display: flex; flex-wrap: wrap;"
 >
   {%- for event in events.data %}
-  <div class="q-chart q-chart-events">
+  <div class="q-chart-events" style="margin-right: 4px; margin-left: 4px;"
+  >
     {% set radius = events.config.radius %}
-    <svg width="{{ 2 * radius + 2 }}" height="{{ 2 * radius + 2 }}" style="vertical-align: sub;">
-      <g transform="translate({{ radius + 1 }}, {{ radius + 1 }})">
-        <path
-          d="M{{ radius }},0A{{ radius }},{{ radius }},0,1,1,-{{ radius }},0A{{ radius }},{{ radius }},0,1,1,{{ radius }},0"
-          style="fill: none; stroke: currentColor; stroke-width: 1;"
-        ></path>
-        <text
-          y="4"
-          text-anchor="middle"
-          style="font-size: {{ events.config.fontSize }}px; font-weight: {{ events.config.fontWeight }}; fill: currentColor;"
-        >
-          {{ loop.index }}
-        </text>
-      </g>
-    </svg>
-    <span class="q-chart q-chart-events__label">{{ event.label }}</span>
-  </div style="margin: 0 4px;">
+    <div class="q-chart-events__icon">
+      <svg width="{{ 2 * radius + 2 }}" height="{{ 2 * radius + 2 }}">
+        <g transform="translate({{ radius + 1 }}, {{ radius + 1 }})">
+          <circle
+            r="{{ radius }}"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1"
+          />
+          <text
+            y="4"
+            text-anchor="middle"
+            style="font-size: {{ events.config.fontSize }}px; font-weight: {{ events.config.fontWeight }}; fill: currentColor;"
+          >
+            {{ loop.index }}
+          </text>
+        </g>
+      </svg>
+    </div>
+    <div class="q-chart-events__label">{{ event.label }}</div>
+  </div>
   {%- endfor %}
 </div>