add mouse on hover for each rectangle to display x and y values and a…

…xis labels. #224
legumeinfo · Apr 17, 2024 · 30d1eb3 · 30d1eb3
1 parent 3d348c3
commit 30d1eb3
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/src/core/lis-histogram-element.ts b/src/core/lis-histogram-element.ts
@@ -146,7 +146,9 @@ export class LisHistogramElement extends LitElement {
       .attr('y', (d) => y(d.count))
       .attr('width', x.bandwidth())
       .attr('height', (d) => height - y(d.count))
-      .attr('fill', 'steelblue');
+      .attr('fill', 'steelblue')
+      .append('title') // append a title element to each rectangle
+      .text((d) => `${this._xlabel}: ${d.name}, ${this._ylabel}: ${d.count}`); // set the text of the title
 
     // Add the x-axis label
     svgContainer