aliencharts 0.3.2 → 0.3.3

package/README.md

@@ -123,17 +123,17 @@ See the [Vanilla Web example source](https://github.com/FarangLab/AlienCharts/bl
 ### CDN / script tag
 
 For browser use without npm or a bundler, load the stylesheet and standalone
-build from jsDelivr:
+build from jsDelivr. Replace `VERSION_TAG` with the latest published version:
 
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/aliencharts@0.3.1/dist/aliencharts.css"
+  href="https://cdn.jsdelivr.net/npm/aliencharts@VERSION_TAG/dist/aliencharts.css"
 >
 
 <div id="charts" style="height: 100vh"></div>
 
-<script src="https://cdn.jsdelivr.net/npm/aliencharts@0.3.1/dist/aliencharts.global.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/aliencharts@VERSION_TAG/dist/aliencharts.global.min.js"></script>
 <script>
   const series = AlienCharts.createLineSeries({
     id: "run-1",

package/dist/aliencharts.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}@layer theme{:root,:host{--color-orange-500:oklch(70.5% .213 47.604);--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--blur-sm:8px}}@layer base{.aliencharts-root,.aliencharts-root *,.aliencharts-root :before,.aliencharts-root :after{box-sizing:border-box;border:0 solid}.aliencharts-root button,.aliencharts-root input{font:inherit;color:inherit;letter-spacing:inherit;background:0 0;margin:0}.aliencharts-root button{cursor:pointer;padding:0}.aliencharts-root button:disabled{cursor:default}.aliencharts-root svg{display:block}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.inset-x-0{inset-inline:0}.inset-x-2{inset-inline:calc(var(--spacing) * 2)}.top-0{top:0}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing) * 2)}.top-12{top:calc(var(--spacing) * 12)}.right-16{right:calc(var(--spacing) * 16)}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:calc(var(--spacing) * 2)}.left-full{left:100%}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-\[60\]{z-index:60}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.my-1{margin-block:var(--spacing)}.mt-1{margin-top:var(--spacing)}.mb-1{margin-bottom:var(--spacing)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.inline{display:inline}.inline-flex{display:inline-flex}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-2\.5{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-full{height:100%}.h-px{height:1px}.min-h-0{min-height:0}.w-14{width:calc(var(--spacing) * 14)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-28{width:calc(var(--spacing) * 28)}.w-\[220px\]{width:220px}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-rotate-45{rotate:-45deg}.rotate-90{rotate:90deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.grid-cols-\[auto_1fr\]{grid-template-columns:auto 1fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-x-2{column-gap:calc(var(--spacing) * 2)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:3.40282e38px}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-background{border-color:var(--background)}.border-border\/50{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.border-border\/50{border-color:color-mix(in oklab, var(--border) 50%, transparent)}}.border-border\/70{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.border-border\/70{border-color:color-mix(in oklab, var(--border) 70%, transparent)}}.border-foreground\/40{border-color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.border-foreground\/40{border-color:color-mix(in oklab, var(--foreground) 40%, transparent)}}.border-primary\/70{border-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.border-primary\/70{border-color:color-mix(in oklab, var(--primary) 70%, transparent)}}.bg-background,.bg-background\/80{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/80{background-color:color-mix(in oklab, var(--background) 80%, transparent)}}.bg-background\/85{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/85{background-color:color-mix(in oklab, var(--background) 85%, transparent)}}.bg-popover\/80{background-color:var(--popover)}@supports (color:color-mix(in lab, red, red)){.bg-popover\/80{background-color:color-mix(in oklab, var(--popover) 80%, transparent)}}.bg-primary\/10{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--primary) 10%, transparent)}}.bg-primary\/15{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/15{background-color:color-mix(in oklab, var(--primary) 15%, transparent)}}.p-1{padding:var(--spacing)}.p-2{padding:calc(var(--spacing) * 2)}.px-1{padding-inline:var(--spacing)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.pt-1{padding-top:var(--spacing)}.pr-3{padding-right:calc(var(--spacing) * 3)}.text-center{text-align:center}.text-right{text-align:right}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.leading-none{--tw-leading:1;line-height:1}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-border\/40{color:var(--border)}@supports (color:color-mix(in lab, red, red)){.text-border\/40{color:color-mix(in oklab, var(--border) 40%, transparent)}}.text-foreground,.text-foreground\/50{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/50{color:color-mix(in oklab, var(--foreground) 50%, transparent)}}.text-foreground\/70{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/70{color:color-mix(in oklab, var(--foreground) 70%, transparent)}}.text-foreground\/80{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/80{color:color-mix(in oklab, var(--foreground) 80%, transparent)}}.text-muted-foreground{color:var(--muted-foreground)}.text-orange-500{color:var(--color-orange-500)}.text-popover-foreground{color:var(--popover-foreground)}.text-primary{color:var(--primary)}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-70{opacity:.7}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-primary\/40{--tw-ring-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ring-primary\/40{--tw-ring-color:color-mix(in oklab, var(--primary) 40%, transparent)}}.ring-primary\/70{--tw-ring-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ring-primary\/70{--tw-ring-color:color-mix(in oklab, var(--primary) 70%, transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}}}.aliencharts-root{--radius:.5rem;--background:#fff;--foreground:#161616;--popover:#fff;--popover-foreground:#161616;--primary:#45aeee;--muted-foreground:#626262;--accent:#d1d1d1;--accent-foreground:#494949;--border:#626262}.dark .aliencharts-root,.aliencharts-root.dark{--background:#1c1719;--foreground:#e8e3e5;--popover:#1c1719;--popover-foreground:#e8e3e5;--primary:#077dc4;--muted-foreground:#a69399;--accent:#332a2d;--accent-foreground:#bdafb4;--border:#a69399}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}@layer theme{:root,:host{--color-orange-500:oklch(70.5% .213 47.604);--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--blur-sm:8px}}@layer base{.aliencharts-root,.aliencharts-root *,.aliencharts-root :before,.aliencharts-root :after{box-sizing:border-box;border:0 solid}.aliencharts-root button,.aliencharts-root input{font:inherit;color:inherit;letter-spacing:inherit;background:0 0;margin:0}.aliencharts-root button{cursor:pointer;padding:0}.aliencharts-root button:disabled{cursor:default}.aliencharts-root svg{display:block}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.inset-x-0{inset-inline:0}.inset-x-2{inset-inline:calc(var(--spacing) * 2)}.top-0{top:0}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing) * 2)}.top-12{top:calc(var(--spacing) * 12)}.right-16{right:calc(var(--spacing) * 16)}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:calc(var(--spacing) * 2)}.left-full{left:100%}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-\[60\]{z-index:60}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.my-1{margin-block:var(--spacing)}.mt-1{margin-top:var(--spacing)}.mb-1{margin-bottom:var(--spacing)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-2\.5{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-full{height:100%}.h-px{height:1px}.min-h-0{min-height:0}.w-14{width:calc(var(--spacing) * 14)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-28{width:calc(var(--spacing) * 28)}.w-\[220px\]{width:220px}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-rotate-45{rotate:-45deg}.rotate-90{rotate:90deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.grid-cols-\[auto_1fr\]{grid-template-columns:auto 1fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-x-2{column-gap:calc(var(--spacing) * 2)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:3.40282e38px}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-background{border-color:var(--background)}.border-border\/50{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.border-border\/50{border-color:color-mix(in oklab, var(--border) 50%, transparent)}}.border-border\/70{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.border-border\/70{border-color:color-mix(in oklab, var(--border) 70%, transparent)}}.border-foreground\/40{border-color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.border-foreground\/40{border-color:color-mix(in oklab, var(--foreground) 40%, transparent)}}.border-primary\/70{border-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.border-primary\/70{border-color:color-mix(in oklab, var(--primary) 70%, transparent)}}.bg-background,.bg-background\/80{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/80{background-color:color-mix(in oklab, var(--background) 80%, transparent)}}.bg-background\/85{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/85{background-color:color-mix(in oklab, var(--background) 85%, transparent)}}.bg-popover\/80{background-color:var(--popover)}@supports (color:color-mix(in lab, red, red)){.bg-popover\/80{background-color:color-mix(in oklab, var(--popover) 80%, transparent)}}.bg-primary\/10{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--primary) 10%, transparent)}}.bg-primary\/15{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/15{background-color:color-mix(in oklab, var(--primary) 15%, transparent)}}.p-1{padding:var(--spacing)}.p-2{padding:calc(var(--spacing) * 2)}.px-1{padding-inline:var(--spacing)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.pt-1{padding-top:var(--spacing)}.pr-3{padding-right:calc(var(--spacing) * 3)}.text-center{text-align:center}.text-right{text-align:right}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.leading-none{--tw-leading:1;line-height:1}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-border\/40{color:var(--border)}@supports (color:color-mix(in lab, red, red)){.text-border\/40{color:color-mix(in oklab, var(--border) 40%, transparent)}}.text-foreground,.text-foreground\/50{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/50{color:color-mix(in oklab, var(--foreground) 50%, transparent)}}.text-foreground\/70{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/70{color:color-mix(in oklab, var(--foreground) 70%, transparent)}}.text-foreground\/80{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/80{color:color-mix(in oklab, var(--foreground) 80%, transparent)}}.text-muted-foreground{color:var(--muted-foreground)}.text-orange-500{color:var(--color-orange-500)}.text-popover-foreground{color:var(--popover-foreground)}.text-primary{color:var(--primary)}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-70{opacity:.7}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-primary\/40{--tw-ring-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ring-primary\/40{--tw-ring-color:color-mix(in oklab, var(--primary) 40%, transparent)}}.ring-primary\/70{--tw-ring-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ring-primary\/70{--tw-ring-color:color-mix(in oklab, var(--primary) 70%, transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}}}.aliencharts-root{--radius:.5rem;--background:#fff;--foreground:#161616;--popover:#fff;--popover-foreground:#161616;--primary:#45aeee;--muted-foreground:#626262;--accent:#d1d1d1;--accent-foreground:#494949;--border:#626262}.dark .aliencharts-root,.aliencharts-root.dark{--background:#1c1719;--foreground:#e8e3e5;--popover:#1c1719;--popover-foreground:#e8e3e5;--primary:#077dc4;--muted-foreground:#a69399;--accent:#332a2d;--accent-foreground:#bdafb4;--border:#a69399}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}

package/dist/aliencharts.global.js

@@ -1773,19 +1773,24 @@ var AlienCharts = (() => {
     descriptor,
     state,
     plot,
+    yBaseRangeRef,
     yScaleRef,
     yCenterOffsetRef
-  }) => applyYScale(
-    getYRange(
+  }) => {
+    const automaticRange = getYRange(
       chart,
       state.xMin,
       state.xMax,
       getCategoryPixelLength(chart, plot, descriptor),
       descriptor
-    ),
-    yScaleRef.current.get(chart.id) ?? 1,
-    yCenterOffsetRef.current.get(chart.id) ?? 0
-  );
+    );
+    const lockedRange = yBaseRangeRef?.current.get(chart.id);
+    return applyYScale(
+      lockedRange ? { ...automaticRange, ...lockedRange } : automaticRange,
+      yScaleRef.current.get(chart.id) ?? 1,
+      yCenterOffsetRef.current.get(chart.id) ?? 0
+    );
+  };
   var applyRectangleZoom = ({
     chart,
     descriptor: suppliedDescriptor,
@@ -1794,6 +1799,7 @@ var AlienCharts = (() => {
     end,
     initialVisiblePoints,
     viewStateRef,
+    yBaseRangeRef,
     yScaleRef,
     yCenterOffsetRef,
     yManualScaleRef
@@ -1810,6 +1816,7 @@ var AlienCharts = (() => {
       descriptor,
       state,
       plot,
+      yBaseRangeRef,
       yScaleRef,
       yCenterOffsetRef
     });
@@ -1862,6 +1869,7 @@ var AlienCharts = (() => {
     plot,
     initialVisiblePoints,
     viewStateRef,
+    yBaseRangeRef,
     yScaleRef,
     yCenterOffsetRef
   }) => {
@@ -1872,6 +1880,7 @@ var AlienCharts = (() => {
       descriptor,
       state,
       plot,
+      yBaseRangeRef,
       yScaleRef,
       yCenterOffsetRef
     });
@@ -1988,6 +1997,7 @@ var AlienCharts = (() => {
     antialiasLines = false,
     layouts,
     viewStateRef,
+    yBaseRangeRef,
     yScaleRef,
     yCenterOffsetRef,
     initialVisiblePoints,
@@ -2025,17 +2035,15 @@ var AlienCharts = (() => {
         plot,
         descriptor
       );
-      const yRange = applyYScale(
-        getYRange(
-          chart,
-          state.xMin,
-          state.xMax,
-          categoryPixelLength,
-          descriptor
-        ),
-        yScaleRef.current.get(chart.id) ?? 1,
-        yCenterOffsetRef.current.get(chart.id) ?? 0
-      );
+      const yRange = getScaledYRangeForLayout({
+        chart,
+        descriptor,
+        state,
+        plot,
+        yBaseRangeRef,
+        yScaleRef,
+        yCenterOffsetRef
+      });
       gl.enable(gl.SCISSOR_TEST);
       gl.scissor(
         Math.floor(scaledPlot.x),
@@ -2275,6 +2283,7 @@ var AlienCharts = (() => {
       this.viewStates = /* @__PURE__ */ new Map();
       this.yScales = /* @__PURE__ */ new Map();
       this.yOffsets = /* @__PURE__ */ new Map();
+      this.yBaseRanges = /* @__PURE__ */ new Map();
       this.latestX = /* @__PURE__ */ new Map();
       this.axisOverlays = {};
       this.layouts = [];
@@ -2325,7 +2334,7 @@ var AlienCharts = (() => {
     }
     initializeChartState() {
       const ids = new Set(this.options.charts.map((chart) => chart.id));
-      [this.viewStates, this.yScales, this.yOffsets, this.latestX].forEach((map) => {
+      [this.viewStates, this.yScales, this.yOffsets, this.yBaseRanges, this.latestX].forEach((map) => {
         [...map.keys()].forEach((id) => {
           if (!ids.has(id)) map.delete(id);
         });
@@ -2512,6 +2521,7 @@ var AlienCharts = (() => {
         antialiasLines: this.options.antialiasLines,
         layouts,
         viewStateRef: { current: this.viewStates },
+        yBaseRangeRef: { current: this.yBaseRanges },
         yScaleRef: { current: this.yScales },
         yCenterOffsetRef: { current: this.yOffsets },
         initialVisiblePoints: this.options.initialVisiblePoints,
@@ -2657,8 +2667,11 @@ var AlienCharts = (() => {
         (item) => item.id === crosshair.chartId
       );
       const xAxisLabel = chart?.xAxisLabel ?? this.options.xAxisLabel;
+      const pointLayer = `<div data-crosshair-points class="pointer-events-none absolute z-30 overflow-hidden" style="left:${crosshair.plot.x}px;top:${crosshair.plot.y}px;width:${crosshair.plot.width}px;height:${crosshair.plot.height}px">
+      ${crosshair.points.map((point) => `<div data-crosshair-point class="absolute size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-background" style="left:${point.x - crosshair.plot.x}px;top:${point.y - crosshair.plot.y}px;background:${point.color}"></div>`).join("")}
+    </div>`;
       return `<div class="pointer-events-none absolute z-20 border-l border-foreground/40" style="left:${crosshair.x}px;top:0;height:100%"></div><div class="pointer-events-none absolute z-20 border-t border-foreground/40" style="top:${crosshair.y}px;left:0;width:100%"></div>
-      ${crosshair.points.map((point) => `<div class="pointer-events-none absolute z-30 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-background" style="left:${point.x}px;top:${point.y}px;background:${point.color}"></div>`).join("")}
+      ${pointLayer}
       <div data-crosshair-tooltip class="pointer-events-none absolute z-30 w-[220px] rounded-sm border border-border/70 bg-popover/80 px-2 py-1.5 text-xs text-popover-foreground shadow-sm backdrop-blur-sm" style="left:${crosshair.tooltipX}px;top:${crosshair.tooltipY}px"><div class="mb-1 font-medium">${escapeHtml(xAxisLabel)}: ${escapeHtml(crosshair.categoryLabel ?? this.options.formatXValue(crosshair.xValue))}</div>${crosshair.points.map((point) => `<div class="grid grid-cols-[auto_1fr] gap-x-2"><span class="mt-1 size-2 rounded-full" style="background:${point.color}"></span><div class="min-w-0"><div class="truncate text-muted-foreground">${escapeHtml(point.name)}</div><div class="tabular-nums">${escapeHtml(this.options.formatYValue(point.yValue))}</div></div></div>`).join("")}</div>`;
     }
     rectangleOverlayHtml() {
@@ -2689,22 +2702,42 @@ var AlienCharts = (() => {
       return this.getTransform(layout, state, range).dataToScreen(point);
     }
     getRange(layout, state = this.viewStates.get(layout.chart.id)) {
-      return applyYScale(
-        getYRange(
+      const automaticRange = getYRange(
+        layout.chart,
+        state.xMin,
+        state.xMax,
+        getCategoryPixelLength(
           layout.chart,
-          state.xMin,
-          state.xMax,
-          getCategoryPixelLength(
-            layout.chart,
-            layout.plot,
-            layout.descriptor
-          ),
+          layout.plot,
           layout.descriptor
         ),
+        layout.descriptor
+      );
+      const lockedRange = this.yBaseRanges.get(layout.chart.id);
+      return applyYScale(
+        lockedRange ? { ...automaticRange, ...lockedRange } : automaticRange,
         this.yScales.get(layout.chart.id),
         this.yOffsets.get(layout.chart.id)
       );
     }
+    lockYRange(layout, state = this.viewStates.get(layout.chart.id)) {
+      if (this.yBaseRanges.has(layout.chart.id)) return;
+      const range = getYRange(
+        layout.chart,
+        state.xMin,
+        state.xMax,
+        getCategoryPixelLength(
+          layout.chart,
+          layout.plot,
+          layout.descriptor
+        ),
+        layout.descriptor
+      );
+      this.yBaseRanges.set(layout.chart.id, {
+        minY: range.minY,
+        maxY: range.maxY
+      });
+    }
     getTransform(layout, state, range) {
       return createCoordinateTransform({
         orientation: layout.descriptor.orientation,
@@ -2807,7 +2840,7 @@ var AlienCharts = (() => {
       this.focusedChartId = layout.chart.id;
       const inPlot = point.x >= layout.plot.x && point.x <= layout.plot.x + layout.plot.width && point.y >= layout.plot.y && point.y <= layout.plot.y + layout.plot.height;
       if (inPlot && this.activeDrawingTool && !this.options.disableDrawings && layout.descriptor.capabilities.drawings) {
-        const dataPoint = screenPointToDataPoint({ point, chart: layout.chart, descriptor: layout.descriptor, plot: layout.plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } });
+        const dataPoint = screenPointToDataPoint({ point, chart: layout.chart, descriptor: layout.descriptor, plot: layout.plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yBaseRangeRef: { current: this.yBaseRanges }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } });
         if (["hline", "vline", "pin"].includes(this.activeDrawingTool)) {
           this.commitDrawing(layout.chart.id, this.activeDrawingTool, dataPoint, dataPoint);
         } else if (this.drawingSession?.chartId === layout.chart.id) {
@@ -2830,7 +2863,17 @@ var AlienCharts = (() => {
         } else {
           this.selectedDrawingId = null;
           this.emit("onSelectedDrawingIdChange", null);
-          this.drag = { type: "pan", layout, start: point, state: { ...this.viewStates.get(layout.chart.id) }, yOffset: this.yOffsets.get(layout.chart.id) || 0 };
+          const state = { ...this.viewStates.get(layout.chart.id) };
+          const range = this.getRange(layout, state);
+          this.drag = {
+            type: "pan",
+            layout,
+            start: point,
+            state,
+            yOffset: this.yOffsets.get(layout.chart.id) || 0,
+            canPanY: this.yBaseRanges.has(layout.chart.id),
+            valueSpan: range.maxY - range.minY
+          };
         }
       } else if (layout.descriptor.orientation === "vertical" && point.x >= layout.plot.x + layout.plot.width) {
         this.drag = { type: "y-scale", layout, start: point, scale: this.yScales.get(layout.chart.id) || 1 };
@@ -2852,7 +2895,7 @@ var AlienCharts = (() => {
       const { layout, point } = context;
       if (this.drawingSession) {
         if (layout.chart.id !== this.drawingSession.chartId) return;
-        const end = screenPointToDataPoint({ point, chart: layout.chart, descriptor: layout.descriptor, plot: layout.plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } });
+        const end = screenPointToDataPoint({ point, chart: layout.chart, descriptor: layout.descriptor, plot: layout.plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yBaseRangeRef: { current: this.yBaseRanges }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } });
         this.draftDrawing = createDraftDrawing({ ...this.drawingSession, end });
         this.requestRender();
         return;
@@ -2860,7 +2903,7 @@ var AlienCharts = (() => {
       if (this.drag) {
         const { chart, descriptor, plot } = this.drag.layout;
         if (this.drag.type === "drawing-edit") {
-          const dataPoint = screenPointToDataPoint({ point, chart, descriptor, plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } });
+          const dataPoint = screenPointToDataPoint({ point, chart, descriptor, plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yBaseRangeRef: { current: this.yBaseRanges }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } });
           const next = updateDrawingById(this.drawings, this.drag.drawingId, (drawing) => {
             if (drawing.type === "hline") {
               const deltaX = (drawing.end?.x ?? drawing.start.x) - drawing.start.x;
@@ -2878,22 +2921,13 @@ var AlienCharts = (() => {
         }
         if (this.drag.type === "rectangle") this.rectangleZoomRect = { start: this.drag.start, end: point };
         if (this.drag.type === "pan") {
-          const span = this.drag.state.xMax - this.drag.state.xMin;
-          const baseRange = getYRange(
-            chart,
-            this.drag.state.xMin,
-            this.drag.state.xMax,
-            getCategoryPixelLength(chart, plot, descriptor),
-            descriptor
-          );
-          const rangeSpan = (baseRange.maxY - baseRange.minY) * (this.yScales.get(chart.id) || 1);
           const transform = createCoordinateTransform({
             orientation: descriptor.orientation,
             categoryRange: {
               min: this.drag.state.xMin,
               max: this.drag.state.xMax
             },
-            valueRange: { min: 0, max: rangeSpan },
+            valueRange: { min: 0, max: this.drag.valueSpan },
             plot
           });
           const categoryDelta = transform.categoryDragDelta(
@@ -2905,7 +2939,9 @@ var AlienCharts = (() => {
             point
           );
           this.viewStates.set(chart.id, { xMin: this.drag.state.xMin - categoryDelta, xMax: this.drag.state.xMax - categoryDelta });
-          this.yOffsets.set(chart.id, this.drag.yOffset + valueDelta);
+          if (this.drag.canPanY) {
+            this.yOffsets.set(chart.id, this.drag.yOffset + valueDelta);
+          }
         }
         if (this.drag.type === "y-scale") {
           const transform = createCoordinateTransform({
@@ -2915,6 +2951,7 @@ var AlienCharts = (() => {
             plot
           });
           const delta = transform.valueScaleDelta(this.drag.start, point);
+          if (delta !== 0) this.lockYRange(this.drag.layout);
           this.yScales.set(
             chart.id,
             scaleValueRange(
@@ -2957,7 +2994,7 @@ var AlienCharts = (() => {
         const normalized = normalizeRect(this.rectangleZoomRect.start, this.rectangleZoomRect.end);
         if (normalized?.width >= 4 && normalized?.height >= 4) {
           const layout = this.drag.layout;
-          applyRectangleZoom({
+          const zoomed = applyRectangleZoom({
             chart: layout.chart,
             descriptor: layout.descriptor,
             plot: layout.plot,
@@ -2965,10 +3002,12 @@ var AlienCharts = (() => {
             end: this.rectangleZoomRect.end,
             initialVisiblePoints: this.options.initialVisiblePoints,
             viewStateRef: { current: this.viewStates },
+            yBaseRangeRef: { current: this.yBaseRanges },
             yScaleRef: { current: this.yScales },
             yCenterOffsetRef: { current: this.yOffsets },
             yManualScaleRef: { current: /* @__PURE__ */ new Set() }
           });
+          if (zoomed) this.lockYRange(layout);
         }
         this.rectangleZoomChartId = null;
         this.rectangleZoomRect = null;
@@ -2989,6 +3028,7 @@ var AlienCharts = (() => {
       if (event.shiftKey) {
         const wheelDelta = event.deltaY || event.deltaX;
         const currentScale = this.yScales.get(layout.chart.id) || 1;
+        if (wheelDelta !== 0) this.lockYRange(layout);
         this.yScales.set(
           layout.chart.id,
           scaleValueRange(
@@ -3023,7 +3063,7 @@ var AlienCharts = (() => {
       event.preventDefault();
       const { layout, point } = context;
       const inPlot = point.x >= layout.plot.x && point.x <= layout.plot.x + layout.plot.width && point.y >= layout.plot.y && point.y <= layout.plot.y + layout.plot.height;
-      const data = inPlot ? screenPointToDataPoint({ point, chart: layout.chart, descriptor: layout.descriptor, plot: layout.plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } }) : null;
+      const data = inPlot ? screenPointToDataPoint({ point, chart: layout.chart, descriptor: layout.descriptor, plot: layout.plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yBaseRangeRef: { current: this.yBaseRanges }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } }) : null;
       this.options.onChartContextMenu({ chart: layout.chart, event, point: data });
     }
     updateCrosshair(point, layout) {
@@ -3070,6 +3110,7 @@ var AlienCharts = (() => {
         xValue: nearest.xValue,
         categoryLabel: getCategoryLabel(layout.chart, nearest.xValue),
         points,
+        plot: { ...layout.plot },
         tooltipX: point.x + 232 > layout.rect.x + layout.rect.width ? point.x - 232 : point.x + 12,
         tooltipY: clamp(point.y + 12, layout.plot.y, layout.rect.y + layout.rect.height - 96)
       };
@@ -3137,6 +3178,7 @@ var AlienCharts = (() => {
       this.viewStates.set(chartId, getInitialView(chart, this.options.initialVisiblePoints));
       this.yScales.set(chartId, 1);
       this.yOffsets.set(chartId, 0);
+      this.yBaseRanges.delete(chartId);
       this.requestRender();
     }
     openFullscreen(chartId) {