Merge pull request #1 from amjadtaleb/main

allow custom title
chrisburnell · Mar 14, 2024 · 536bb09 · 536bb09
2 parents 45d8dce + 3f471b3
commit 536bb09
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -108,6 +108,12 @@ A Web Component that builds an SVG Sparkline.
 <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" width="300" height="100"></svg-sparkline>
 ```
 
+### Set a custom title
+
+```html
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" title="Sparkline with a custom title"></svg-sparkline>
+```
+
 ## Features
 
 This Web Component builds a sparkline based on the required `values` attribute.

diff --git a/svg-sparkline.js b/svg-sparkline.js
@@ -111,9 +111,10 @@ class SVGSparkline extends HTMLElement {
       content.push(`<span>${this.startLabel}</span>`)
     }
 
+    const title = this.title || `Sparkline ranging from ${this.getMinY(this.values)} to ${this.getMaxY(this.values)}.`;
     content.push(`
       <svg width="${this.width}px" height="${this.height}px" viewBox="${this.getViewBox(this.values)}" preserveAspectRatio="none" role="img">
-        <title>Sparkline ranging from ${this.getMinY(this.values)} to ${this.getMaxY(this.values)}.</title>
+        <title>${title}</title>
     `)
 
     let gradientID