From 188dd256194bbe1bdd3ee82bf31bf8cb011635b2 Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Wed, 3 Jun 2026 00:30:49 -0400 Subject: [PATCH 1/2] fix(ChartState): Prevent `Cannot read properties of null (reading 'axis')` crash in cartesian charts (AreaChart, etc.) when no transform is configured (#872) --- .changeset/fix-transformstate-null-axis-guard.md | 5 +++++ packages/layerchart/src/lib/states/chart.svelte.ts | 12 ++++++------ 2 files changed, 11 insertions(+), 6 deletions(-) create mode 100644 .changeset/fix-transformstate-null-axis-guard.md diff --git a/.changeset/fix-transformstate-null-axis-guard.md b/.changeset/fix-transformstate-null-axis-guard.md new file mode 100644 index 000000000..333e34942 --- /dev/null +++ b/.changeset/fix-transformstate-null-axis-guard.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +fix(ChartState): Prevent `Cannot read properties of null (reading 'axis')` crash in cartesian charts (AreaChart, etc.) when no transform is configured (#872) diff --git a/packages/layerchart/src/lib/states/chart.svelte.ts b/packages/layerchart/src/lib/states/chart.svelte.ts index 26f8b832f..5be62795c 100644 --- a/packages/layerchart/src/lib/states/chart.svelte.ts +++ b/packages/layerchart/src/lib/states/chart.svelte.ts @@ -552,7 +552,7 @@ export class ChartState< private _xScaleRange = $derived.by(() => { if ( this.transformState?.mode === 'domain' && - (this.transformState.axis === 'x' || this.transformState.axis === 'both') && + (this.transformState?.axis === 'x' || this.transformState?.axis === 'both') && isScaleBand(this._xScaleProp) && this.width > 0 ) { @@ -565,7 +565,7 @@ export class ChartState< private _yScaleRange = $derived.by(() => { if ( this.transformState?.mode === 'domain' && - (this.transformState.axis === 'y' || this.transformState.axis === 'both') && + (this.transformState?.axis === 'y' || this.transformState?.axis === 'both') && isScaleBand(this._yScaleProp) && this.height > 0 ) { @@ -865,7 +865,7 @@ export class ChartState< _rawXDomain = $derived.by(() => { if ( this.transformState?.mode === 'domain' && - (this.transformState.axis === 'x' || this.transformState.axis === 'both') && + (this.transformState?.axis === 'x' || this.transformState?.axis === 'both') && this.width > 0 ) { return this._computeTransformDomain( @@ -881,7 +881,7 @@ export class ChartState< _rawYDomain = $derived.by(() => { if ( this.transformState?.mode === 'domain' && - (this.transformState.axis === 'y' || this.transformState.axis === 'both') && + (this.transformState?.axis === 'y' || this.transformState?.axis === 'both') && this.height > 0 ) { return this._computeTransformDomain( @@ -1142,7 +1142,7 @@ export class ChartState< xRange = $derived.by(() => { if ( this.transformState?.mode === 'domain' && - (this.transformState.axis === 'x' || this.transformState.axis === 'both') && + (this.transformState?.axis === 'x' || this.transformState?.axis === 'both') && isScaleBand(this._xScaleProp) ) { return getRange(this.baseXScale); @@ -1152,7 +1152,7 @@ export class ChartState< yRange = $derived.by(() => { if ( this.transformState?.mode === 'domain' && - (this.transformState.axis === 'y' || this.transformState.axis === 'both') && + (this.transformState?.axis === 'y' || this.transformState?.axis === 'both') && isScaleBand(this._yScaleProp) ) { return getRange(this.baseYScale); From 16e03c14d6b2e70f6304fc84beef72687e527689 Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Wed, 3 Jun 2026 10:06:58 -0400 Subject: [PATCH 2/2] Revert chart state null axis guard workaround and bump esrap to 2.2.11 in lock file to fix --- .changeset/fix-transformstate-null-axis-guard.md | 5 ----- packages/layerchart/src/lib/states/chart.svelte.ts | 12 ++++++------ pnpm-lock.yaml | 8 ++++---- 3 files changed, 10 insertions(+), 15 deletions(-) delete mode 100644 .changeset/fix-transformstate-null-axis-guard.md diff --git a/.changeset/fix-transformstate-null-axis-guard.md b/.changeset/fix-transformstate-null-axis-guard.md deleted file mode 100644 index 333e34942..000000000 --- a/.changeset/fix-transformstate-null-axis-guard.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'layerchart': patch ---- - -fix(ChartState): Prevent `Cannot read properties of null (reading 'axis')` crash in cartesian charts (AreaChart, etc.) when no transform is configured (#872) diff --git a/packages/layerchart/src/lib/states/chart.svelte.ts b/packages/layerchart/src/lib/states/chart.svelte.ts index 5be62795c..26f8b832f 100644 --- a/packages/layerchart/src/lib/states/chart.svelte.ts +++ b/packages/layerchart/src/lib/states/chart.svelte.ts @@ -552,7 +552,7 @@ export class ChartState< private _xScaleRange = $derived.by(() => { if ( this.transformState?.mode === 'domain' && - (this.transformState?.axis === 'x' || this.transformState?.axis === 'both') && + (this.transformState.axis === 'x' || this.transformState.axis === 'both') && isScaleBand(this._xScaleProp) && this.width > 0 ) { @@ -565,7 +565,7 @@ export class ChartState< private _yScaleRange = $derived.by(() => { if ( this.transformState?.mode === 'domain' && - (this.transformState?.axis === 'y' || this.transformState?.axis === 'both') && + (this.transformState.axis === 'y' || this.transformState.axis === 'both') && isScaleBand(this._yScaleProp) && this.height > 0 ) { @@ -865,7 +865,7 @@ export class ChartState< _rawXDomain = $derived.by(() => { if ( this.transformState?.mode === 'domain' && - (this.transformState?.axis === 'x' || this.transformState?.axis === 'both') && + (this.transformState.axis === 'x' || this.transformState.axis === 'both') && this.width > 0 ) { return this._computeTransformDomain( @@ -881,7 +881,7 @@ export class ChartState< _rawYDomain = $derived.by(() => { if ( this.transformState?.mode === 'domain' && - (this.transformState?.axis === 'y' || this.transformState?.axis === 'both') && + (this.transformState.axis === 'y' || this.transformState.axis === 'both') && this.height > 0 ) { return this._computeTransformDomain( @@ -1142,7 +1142,7 @@ export class ChartState< xRange = $derived.by(() => { if ( this.transformState?.mode === 'domain' && - (this.transformState?.axis === 'x' || this.transformState?.axis === 'both') && + (this.transformState.axis === 'x' || this.transformState.axis === 'both') && isScaleBand(this._xScaleProp) ) { return getRange(this.baseXScale); @@ -1152,7 +1152,7 @@ export class ChartState< yRange = $derived.by(() => { if ( this.transformState?.mode === 'domain' && - (this.transformState?.axis === 'y' || this.transformState?.axis === 'both') && + (this.transformState.axis === 'y' || this.transformState.axis === 'both') && isScaleBand(this._yScaleProp) ) { return getRange(this.baseYScale); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ea3f78a69..3f41c1c0d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3929,8 +3929,8 @@ packages: esrap@1.4.9: resolution: {integrity: sha512-3OMlcd0a03UGuZpPeUC1HxR3nA23l+HEyCiZw3b3FumJIN9KphoGzDJKMXI1S72jVS1dsenDyQC0kJlO1U9E1g==} - esrap@2.2.10: - resolution: {integrity: sha512-HUTyxhhAQBl1hhsyLlHD1sh9xF6o6vaejzLxK5sge+LzrdEflQPQaNhC+n98d+OVB8v3LCCF+y80x/4bACjjJw==} + esrap@2.2.11: + resolution: {integrity: sha512-gPdx+I+BjYEinNMQaBXFjbaJVyoPMU4ZODg5mE+M4DqVG9VusAVHHjcBX+zqyITlI0DIARwDMMzZwAWj36dRoQ==} peerDependencies: '@typescript-eslint/types': ^8.2.0 peerDependenciesMeta: @@ -9160,7 +9160,7 @@ snapshots: dependencies: '@jridgewell/sourcemap-codec': 1.5.5 - esrap@2.2.10(@typescript-eslint/types@8.60.1): + esrap@2.2.11(@typescript-eslint/types@8.60.1): dependencies: '@jridgewell/sourcemap-codec': 1.5.5 optionalDependencies: @@ -10927,7 +10927,7 @@ snapshots: clsx: 2.1.1 devalue: 5.8.1 esm-env: 1.2.2 - esrap: 2.2.10(@typescript-eslint/types@8.60.1) + esrap: 2.2.11(@typescript-eslint/types@8.60.1) is-reference: 3.0.3 locate-character: 3.0.0 magic-string: 0.30.21