diff --git a/README.md b/README.md
index 0d40b1f..55b41db 100644
--- a/README.md
+++ b/README.md
@@ -15,97 +15,97 @@ A Web Component that builds an SVG Sparkline.
 ```html
 <script type="module" src="svg-sparkline.js"></script>
 
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9"></svg-sparkline>
 ```
 
 ### With curve
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" curve="true"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" curve="true"></svg-sparkline>
 ```
 
 ### Start and End labels
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" start-label="Start" end-label="End"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" start-label="Start" end-label="End"></svg-sparkline>
 ```
 
 ### Animated
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" animate="true"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" animate="true"></svg-sparkline>
 ```
 
 ### Defined Animation Duration
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" animate="true" animation-duration="2s"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" animate="true" animation-duration="2s"></svg-sparkline>
 ```
 
 ### Defined Animation Delay
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" animate="true" animation-delay="2s"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" animate="true" animation-delay="2s"></svg-sparkline>
 ```
 
 ### Defined color
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" color="purple"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" color="purple"></svg-sparkline>
 ```
 
 ### With gradient
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" gradient="true"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" gradient="true"></svg-sparkline>
 ```
 
 ### Defined gradient color
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" gradient="true" gradient-color="rebeccapurple"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" gradient="true" gradient-color="rebeccapurple"></svg-sparkline>
 ```
 
 ### Filled
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" fill="true"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" fill="true"></svg-sparkline>
 ```
 
 ### Defined fill color
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" fill="true" fill-color="rebeccapurple"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" fill="true" fill-color="rebeccapurple"></svg-sparkline>
 ```
 
 ### Defined endpoint color
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" endpoint-color="red"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" endpoint-color="red"></svg-sparkline>
 ```
 
 ### Defined endpoint width
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" endpoint-width="12"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" endpoint-width="12"></svg-sparkline>
 ```
 
 ### Without endpoint
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" endpoint="false"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" endpoint="false"></svg-sparkline>
 ```
 
 ### Defined line width
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" line-width="6"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" line-width="6"></svg-sparkline>
 ```
 
 ### Defined width and height
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" width="300" height="100"></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>
 ```
 
 ## Features
diff --git a/demo.html b/demo.html
index ff99045..3ac16db 100644
--- a/demo.html
+++ b/demo.html
@@ -17,74 +17,74 @@
   <body>
     <h2 id="general">General usage example</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9"></svg-sparkline>
     </p>
     <h2 id="curve">With curve</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" curve="true"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" curve="true"></svg-sparkline>
     </p>
     <h2 id="labels">Start and End labels</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" start-label="Start" end-label="End"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" start-label="Start" end-label="End"></svg-sparkline>
     </p>
     <h2 id="animate">Animated</h2>
     <p>Only animates when the <code>prefers-reduced-motion</code> media query has the value <code>no-preference</code>.</p>
     <p>Waits until the sparkline is visible in the viewport to initate the animation.</p>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" start-label="Start" end-label="End" animate="true"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" start-label="Start" end-label="End" animate="true"></svg-sparkline>
     </p>
     <h2 id="animation-duration">Defined Animation Duration</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" start-label="Start" end-label="End" animate="true" animation-duration="2s"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" start-label="Start" end-label="End" animate="true" animation-duration="2s"></svg-sparkline>
     </p>
     <h2 id="animation-delay">Defined Animation Delay</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" start-label="Start" end-label="End" animate="true" animation-delay="2s"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" start-label="Start" end-label="End" animate="true" animation-delay="2s"></svg-sparkline>
     </p>
     <h2 id="color">Defined color</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" color="red"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" color="red"></svg-sparkline>
     </p>
     <h2 id="gradient">With gradient</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" gradient="true"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" gradient="true"></svg-sparkline>
     </p>
     <h2 id="gradient-color">Defined gradient color</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" gradient="true" gradient-color="red"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" gradient="true" gradient-color="red"></svg-sparkline>
     </p>
     <h2 id="fill">Filled</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" fill="true"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" fill="true"></svg-sparkline>
     </p>
     <h2 id="fill-color">Defined fill color</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" fill="true" fill-color="red"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" fill="true" fill-color="red"></svg-sparkline>
     </p>
     <h2 id="endpoint-color">Defined endpoint color</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" endpoint-color="red"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" endpoint-color="red"></svg-sparkline>
     </p>
     <h2 id="endpoint">Without endpoint</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" endpoint="false"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" endpoint="false"></svg-sparkline>
     </p>
     <h2 id="endpoint-width">Defined endpoint width</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" endpoint-width="12"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" endpoint-width="12"></svg-sparkline>
     </p>
     <h2 id="line-width">Defined line width</h2>
     <p>Doesn’t look great when the <code>line-width</code> is greater than the <code>endpoint-width</code>!</p>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" line-width="10"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" line-width="10"></svg-sparkline>
     </p>
     <h2 id="size">Defined width and height</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" width="300" height="100"></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>
     </p>
     <h2 id="server-rendered">Server-rendered and hydrated</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" start-label="Start" end-label="End">
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" start-label="Start" end-label="End">
           <span>Start</span>
           <svg width="200px" height="36px" viewBox="0 0 15 12" preserveAspectRatio="none" role="img">
             <title>Sparkline ranging from 1 to 10.</title>
diff --git a/package.json b/package.json
index 1413967..a73952b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chrisburnell/svg-sparkline",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "A Web Component that builds an SVG Sparkline.",
   "main": "svg-sparkline.js",
   "scripts": {
diff --git a/svg-sparkline.js b/svg-sparkline.js
index 6b96d58..8833782 100644
--- a/svg-sparkline.js
+++ b/svg-sparkline.js
@@ -19,7 +19,8 @@ class SVGSparkline extends HTMLElement {
       padding: var(--svg-sparkline-padding, 0.375rem);
       overflow: visible;
     }
-    svg:has(title) {
+    :host(:not([curve])) svg:has(title),
+    :host(:not([curve="true"])) svg:has(title) {
       overflow-y: hidden;
     }
     svg[aria-hidden] {
@@ -282,11 +283,11 @@ class SVGSparkline extends HTMLElement {
     return [x, y]
   }
 
-  bezierCommand(point, i, a) {
+  bezierCommand(point, i, a, maxY) {
     const [csx, csy] = this.controlPoint(i - 1, a[i - 1], i - 2, a[i - 2], i, point)
     const [cex, cey] = this.controlPoint(i, point, i - 1, a[i - 1], i + 1, a[i + 1], true)
 
-    return `C ${this.maxDecimals(csx)},${this.maxDecimals(csy)} ${this.maxDecimals(cex)},${this.maxDecimals(cey)} ${i},${point}`
+    return `C ${this.maxDecimals(csx)},${Math.min(maxY, this.maxDecimals(csy))} ${this.maxDecimals(cex)},${Math.min(maxY, this.maxDecimals(cey))} ${i},${point}`
   }
 
   getPath(values, curve) {
@@ -296,7 +297,7 @@ class SVGSparkline extends HTMLElement {
         .map((point) => Math.max(...values) - point + 1)
         // generate a string
         .reduce((acc, point, i, a) => {
-          return i < 1 ? `M 0,${point}` : `${acc} ${curve ? this.bezierCommand(point, i, a) : this.lineCommand(point, i)}`
+          return i < 1 ? `M 0,${point}` : `${acc} ${curve ? this.bezierCommand(point, i, a, this.getAdjustedMaxY(values)) : this.lineCommand(point, i)}`
         }, "")
     )
   }