From ee488fb879dbb112fae3d309ceaadfd4af9759e6 Mon Sep 17 00:00:00 2001
From: "deepsource-autofix[bot]"
 <62050782+deepsource-autofix[bot]@users.noreply.github.com>
Date: Thu, 29 May 2025 00:05:58 +0000
Subject: [PATCH] style: format code with Prettier

This commit fixes the style issues introduced in 0bbe781 according to the output
from Prettier.

Details: None
---
 .rules/guidelines/coding.md                   |   6 +
 .rules/guidelines/javascript.md               |   1 +
 .rules/guidelines/svelte.md                   |   2 +
 .rules/llms.md                                |   8 +-
 packages/chart/README.md                      |  13 +-
 packages/chart/spec/brewing/axes.spec.js      | 456 +++++++++---------
 .../chart/spec/brewing/dimensions.spec.js     | 174 +++----
 packages/chart/spec/brewing/scales.spec.js    | 305 ++++++------
 packages/chart/src/index.js                   |  26 +-
 packages/chart/src/lib/brewing/axes.svelte.js | 242 +++++-----
 packages/chart/src/lib/brewing/bars.svelte.js | 140 +++---
 .../src/lib/brewing/dimensions.svelte.js      |  48 +-
 .../chart/src/lib/brewing/index.svelte.js     | 396 ++++++++-------
 .../chart/src/lib/brewing/legends.svelte.js   | 103 ++--
 .../chart/src/lib/brewing/scales.svelte.js    | 127 +++--
 packages/chart/src/lib/brewing/types.js       |   4 +-
 packages/chart/src/lib/context.js             | 224 +++++----
 packages/chart/src/lib/scales.svelte.js       | 167 +++----
 packages/chart/src/lib/utils.js               | 142 +++---
 19 files changed, 1288 insertions(+), 1296 deletions(-)

diff --git a/.rules/guidelines/coding.md b/.rules/guidelines/coding.md
index 42562b5b2..88660cc58 100644
--- a/.rules/guidelines/coding.md
+++ b/.rules/guidelines/coding.md
@@ -1,12 +1,14 @@
 Guidelines for Approaching Code Tasks
 
 ## Initial Assessment Phase
+
 - **Always seek clarification** on requirements before proceeding
 - **Ask targeted questions** to uncover unstated assumptions or edge cases
 - **Establish success criteria** - how will we know when the task is complete?
 - **Identify potential constraints** (performance, compatibility, security)
 
 ## Planning Phase
+
 - **Analyze the existing codebase** and provide a clear understanding of relevant components
 - **Present an implementation strategy** with a step-by-step approach
 - **Break down complex tasks** into smaller, manageable units of work
@@ -14,6 +16,7 @@ Guidelines for Approaching Code Tasks
 - **Identify potential risks** and discuss mitigation strategies
 
 ## Implementation Phase
+
 - **Start with a minimal working foundation** that demonstrates core functionality
 - **Implement features incrementally**, validating each step before proceeding
 - **Keep changes focused** with a small surface area to simplify debugging
@@ -21,13 +24,16 @@ Guidelines for Approaching Code Tasks
 - **Seek feedback** at logical checkpoints during implementation
 
 ## Refinement Phase
+
 - **Review the implementation** against the original requirements
 - **Test edge cases** explicitly
 - **Optimize only after functionality is correct** and only where necessary
 - **Consider maintenance implications** of the implementation
 
 ## Rationale
+
 This structured approach prevents several common issues:
+
 - It avoids wasted effort implementing misunderstood requirements
 - It makes debugging simpler by isolating changes
 - It provides clear checkpoints for validation
diff --git a/.rules/guidelines/javascript.md b/.rules/guidelines/javascript.md
index c9b6bd731..4ed0cc187 100644
--- a/.rules/guidelines/javascript.md
+++ b/.rules/guidelines/javascript.md
@@ -22,3 +22,4 @@ project/
 │   ├── index.spec.js
 │   └── utils.spec.js
 └── README.md
+```
diff --git a/.rules/guidelines/svelte.md b/.rules/guidelines/svelte.md
index 2d57e5905..eb6c66903 100644
--- a/.rules/guidelines/svelte.md
+++ b/.rules/guidelines/svelte.md
@@ -8,6 +8,7 @@
 - E2E tests should follow the page object pattern
 
 ## Svelte 5
+
 {{[Svelte & Svelte Kit Distilled](https://svelte-llm.khromov.se/svelte-complete-distilled)}}
 {{[svelte 5 documentation](https://svelte.dev/docs/svelte/llms.txt)}}
 
@@ -114,6 +115,7 @@ To pass a snippet to another component:
   {/snippet}
 </ChildComponent>
 ```
+
 Both of these options work in a similar way
 
 ### Important: What NOT to do
diff --git a/.rules/llms.md b/.rules/llms.md
index 04d6449e5..ab146decd 100644
--- a/.rules/llms.md
+++ b/.rules/llms.md
@@ -16,11 +16,10 @@ First, carefully review the following guidelines:
 {{[SVELTE_5_GUIDELINES](./guidelines/svelte.md)}}
 </svelte_5_guidelines>
 
-
-
 Now, follow these instructions to implement Svelte 5 components and structure the project:
 
 1. Component Implementation:
+
    - Use Svelte 5 runes mode for all component code.
    - Implement state management using $state, $derived, and $effect runes.
    - Use $props() for component properties.
@@ -29,20 +28,24 @@ Now, follow these instructions to implement Svelte 5 components and structure th
    - Consider reduced motion in your implementations.
 
 2. Project Structure:
+
    - Use SvelteKit for the application structure.
    - Organize your project following the provided directory structure.
    - Use .svelte.js extension for files using runes in the source code.
    - Use .spec.svelte.js extension for test files using runes.
 
 3. Styling:
+
    - Use UnoCSS for all styling in the project.
 
 4. Testing:
+
    - Implement unit tests using vitest.
    - Implement end-to-end (e2e) tests using Playwright.
    - Follow the page object pattern for e2e tests.
 
 5. Event Handling:
+
    - Treat event handlers as properties in Svelte 5.
    - Use onclick instead of on:click for event binding.
    - Pass callback props to components instead of using event forwarding.
@@ -54,6 +57,7 @@ Now, follow these instructions to implement Svelte 5 components and structure th
 When implementing components or structuring the project, provide your code inside <code> tags. For explanations or comments, use <explanation> tags.
 
 Your final output should include:
+
 1. A brief overview of the implemented components or project structure.
 2. The actual implementation or structure in <code> tags.
 3. Explanations for your choices in <explanation> tags.
diff --git a/packages/chart/README.md b/packages/chart/README.md
index 7a5bf139c..e63ea4133 100644
--- a/packages/chart/README.md
+++ b/packages/chart/README.md
@@ -18,7 +18,7 @@ The chart package provides a set of composable components that can be combined t
 <script>
    import { Plot } from '@rokkit/chart'
    import { dataset } from '@rokkit/data'
-   
+
    // Sample data
    const sampleData = [
      { model: 'Model A', name: 'Product 1', category: 'Electronics', count: 45 },
@@ -26,7 +26,7 @@ The chart package provides a set of composable components that can be combined t
      { model: 'Model C', name: 'Product 3', category: 'Electronics', count: 62 },
      // More data...
    ]
-   
+
    // Use the dataset class to process the data
    let data = dataset(sampleData)
      .groupBy('model')
@@ -50,6 +50,7 @@ The chart package provides a set of composable components that can be combined t
 The container component for all charts.
 
 **Props:**
+
 - `data` - The dataset to visualize (array or dataset object)
 - `width` - Width of the chart in pixels (default: 600)
 - `height` - Height of the chart in pixels (default: 400)
@@ -63,6 +64,7 @@ The container component for all charts.
 Renders an axis for the chart.
 
 **Props:**
+
 - `type` - Type of axis ('x' or 'y')
 - `field` - Data field to use for this axis
 - `label` - Axis label text
@@ -75,6 +77,7 @@ Renders an axis for the chart.
 Renders a bar chart.
 
 **Props:**
+
 - `x` - Field to use for x-axis values
 - `y` - Field to use for y-axis values
 - `fill` - Field to use for coloring the bars (optional)
@@ -88,6 +91,7 @@ Renders a bar chart.
 Renders grid lines for the chart.
 
 **Props:**
+
 - `direction` - Direction of grid lines ('x', 'y', or 'both') (default: 'both')
 - `xTicks` - Number of ticks for x-axis grid (optional)
 - `yTicks` - Number of ticks for y-axis grid (optional)
@@ -100,6 +104,7 @@ Renders grid lines for the chart.
 Renders a legend for the chart.
 
 **Props:**
+
 - `title` - Title for the legend (optional)
 - `align` - Alignment of the legend ('left', 'right', 'center') (default: 'right')
 - `verticalAlign` - Vertical position of the legend ('top', 'bottom') (default: 'top')
@@ -115,11 +120,11 @@ The chart components work seamlessly with the `@rokkit/data` package, allowing f
 <script>
    import { Plot } from '@rokkit/chart'
    import { dataset } from '@rokkit/data'
-   
+
    let input = [
      // Your raw data here
    ]
-   
+
    $: processedData = dataset(input)
      .groupBy('category')
      .summarize('name', { count: values => values.length, total: values => values.reduce((a, b) => a + b, 0) })
diff --git a/packages/chart/spec/brewing/axes.spec.js b/packages/chart/spec/brewing/axes.spec.js
index 18d58325d..d48a36db7 100644
--- a/packages/chart/spec/brewing/axes.spec.js
+++ b/packages/chart/spec/brewing/axes.spec.js
@@ -1,229 +1,231 @@
-import { describe, it, expect } from 'vitest';
-import { 
-  createXAxis, 
-  createYAxis, 
-  createGrid, 
-  createTickAttributes 
-} from '../../src/lib/brewing/axes.svelte.js';
+import { describe, it, expect } from 'vitest'
+import {
+	createXAxis,
+	createYAxis,
+	createGrid,
+	createTickAttributes
+} from '../../src/lib/brewing/axes.svelte.js'
 
 describe('axes module', () => {
-  const testScales = {
-    x: null,
-    y: null
-  };
-  
-  const testDimensions = {
-    width: 600,
-    height: 400,
-    margin: { top: 20, right: 30, bottom: 40, left: 50 },
-    innerWidth: 520,
-    innerHeight: 340
-  };
-  
-  // Create mock scales
-  beforeEach(() => {
-    // Mock band scale for x-axis
-    testScales.x = {
-      domain: () => ['A', 'B', 'C'],
-      bandwidth: () => 30,
-      ticks: null,
-      // Mock implementation
-      call: (d) => d
-    };
-    
-    testScales.x.bandwidth = () => 30;
-    
-    // Add custom method for band scales
-    testScales.x = (value) => {
-      const domain = ['A', 'B', 'C'];
-      const index = domain.indexOf(value);
-      if (index === -1) return 0;
-      return index * 40;
-    };
-    
-    testScales.x.domain = () => ['A', 'B', 'C'];
-    testScales.x.bandwidth = () => 30;
-    
-    // Mock linear scale for y-axis with ticks
-    testScales.y = (value) => {
-      // Simple linear mapping: 0 -> 340, 100 -> 0
-      return 340 - (value / 100) * 340;
-    };
-    
-    testScales.y.domain = () => [0, 100];
-    testScales.y.ticks = (count) => {
-      // Generate n evenly spaced ticks from 0 to 100
-      const n = count || 5;
-      return Array.from({ length: n + 1 }, (_, i) => i * (100 / n));
-    };
-  });
-  
-  describe('createXAxis', () => {
-    it('should create x-axis data for band scale', () => {
-      const xAxis = createXAxis(testScales, testDimensions);
-      
-      expect(xAxis.ticks.length).toBe(3);
-      expect(xAxis.transform).toBe(`translate(0, ${testDimensions.innerHeight})`);
-      
-      // Check first tick
-      expect(xAxis.ticks[0].value).toBe('A');
-      expect(xAxis.ticks[0].position).toBe(15); // 0 + bandwidth/2
-      
-      // Check second tick
-      expect(xAxis.ticks[1].value).toBe('B');
-      expect(xAxis.ticks[1].position).toBe(55); // 40 + bandwidth/2
-    });
-    
-    it('should create x-axis with custom tick count', () => {
-      // For band scale, custom tick count should filter ticks
-      testScales.x.domain = () => ['A', 'B', 'C', 'D', 'E', 'F'];
-      
-      const xAxis = createXAxis(testScales, testDimensions, { tickCount: 2 });
-      
-      // Should show fewer ticks
-      expect(xAxis.ticks.length).toBeLessThan(6);
-      expect(xAxis.ticks.length).toBeGreaterThan(0);
-    });
-    
-    it('should create x-axis with custom tick formatter', () => {
-      const tickFormat = (value) => `Category ${value}`;
-      const xAxis = createXAxis(testScales, testDimensions, { tickFormat });
-      
-      expect(xAxis.ticks[0].formattedValue).toBe('Category A');
-    });
-    
-    it('should create x-axis with label', () => {
-      const xAxis = createXAxis(testScales, testDimensions, { label: 'Categories' });
-      
-      expect(xAxis.label).toBe('Categories');
-      expect(xAxis.labelTransform).toBe(`translate(${testDimensions.innerWidth / 2}, 35)`);
-    });
-    
-    it('should return empty ticks if x scale is not defined', () => {
-      const xAxis = createXAxis({ y: testScales.y }, testDimensions);
-      
-      expect(xAxis.ticks).toEqual([]);
-    });
-  });
-  
-  describe('createYAxis', () => {
-    it('should create y-axis data for linear scale', () => {
-      const yAxis = createYAxis(testScales, testDimensions);
-      
-      expect(yAxis.ticks.length).toBeGreaterThan(0);
-      expect(yAxis.transform).toBe('translate(0, 0)');
-      
-      // Check tick positions
-      yAxis.ticks.forEach(tick => {
-        // Higher values should have lower y positions
-        const expectedPosition = testScales.y(tick.value);
-        expect(tick.position).toBe(expectedPosition);
-      });
-    });
-    
-    it('should create y-axis with custom tick count', () => {
-      const yAxis = createYAxis(testScales, testDimensions, { tickCount: 3 });
-      
-      // Should have exactly the number of ticks specified + 1 (for zero)
-      expect(yAxis.ticks.length).toBe(4);
-      expect(yAxis.ticks[0].value).toBe(0);
-      expect(yAxis.ticks[3].value).toBe(100);
-    });
-    
-    it('should create y-axis with custom tick formatter', () => {
-      const tickFormat = (value) => `${value}%`;
-      const yAxis = createYAxis(testScales, testDimensions, { tickFormat });
-      
-      // Check that the formatter was applied
-      yAxis.ticks.forEach(tick => {
-        expect(tick.formattedValue).toBe(`${tick.value}%`);
-      });
-    });
-    
-    it('should create y-axis with label', () => {
-      const yAxis = createYAxis(testScales, testDimensions, { label: 'Values' });
-      
-      expect(yAxis.label).toBe('Values');
-      expect(yAxis.labelTransform).toBe(`translate(-40, ${testDimensions.innerHeight / 2}) rotate(-90)`);
-    });
-    
-    it('should return empty ticks if y scale is not defined', () => {
-      const yAxis = createYAxis({ x: testScales.x }, testDimensions);
-      
-      expect(yAxis.ticks).toEqual([]);
-    });
-  });
-  
-  describe('createGrid', () => {
-    it('should create grid with both x and y lines', () => {
-      const grid = createGrid(testScales, testDimensions);
-      
-      expect(grid.xLines.length).toBeGreaterThan(0);
-      expect(grid.yLines.length).toBeGreaterThan(0);
-      
-      // Check a typical x grid line
-      const xLine = grid.xLines[0];
-      expect(xLine).toHaveProperty('x1');
-      expect(xLine).toHaveProperty('y1');
-      expect(xLine).toHaveProperty('x2');
-      expect(xLine).toHaveProperty('y2');
-      expect(xLine.y2).toBe(testDimensions.innerHeight);
-      
-      // Check a typical y grid line
-      const yLine = grid.yLines[0];
-      expect(yLine).toHaveProperty('x1');
-      expect(yLine).toHaveProperty('y1');
-      expect(yLine).toHaveProperty('x2');
-      expect(yLine).toHaveProperty('y2');
-      expect(yLine.x2).toBe(testDimensions.innerWidth);
-    });
-    
-    it('should create grid with only x lines', () => {
-      const grid = createGrid(testScales, testDimensions, { direction: 'x' });
-      
-      expect(grid.xLines.length).toBeGreaterThan(0);
-      expect(grid.yLines.length).toBe(0);
-    });
-    
-    it('should create grid with only y lines', () => {
-      const grid = createGrid(testScales, testDimensions, { direction: 'y' });
-      
-      expect(grid.xLines.length).toBe(0);
-      expect(grid.yLines.length).toBeGreaterThan(0);
-    });
-    
-    it('should create grid with custom tick counts', () => {
-      const grid = createGrid(testScales, testDimensions, { 
-        xTickCount: 2,
-        yTickCount: 3
-      });
-      
-      // X lines should respect xTickCount (actual implementation may vary)
-      expect(grid.xLines.length).toBeGreaterThan(0);
-      
-      // Y lines should have 3 + 1 lines (including zero)
-      expect(grid.yLines.length).toBe(4);
-    });
-  });
-  
-  describe('createTickAttributes', () => {
-    it('should create attributes for x-axis ticks', () => {
-      const tick = { position: 100, value: 'A', formattedValue: 'A' };
-      const attrs = createTickAttributes(tick, 'x');
-      
-      expect(attrs['data-plot-tick']).toBe('major');
-      expect(attrs.transform).toBe('translate(100, 0)');
-      expect(attrs['text-anchor']).toBe('middle');
-    });
-    
-    it('should create attributes for y-axis ticks', () => {
-      const tick = { position: 50, value: 50, formattedValue: '50' };
-      const attrs = createTickAttributes(tick, 'y');
-      
-      expect(attrs['data-plot-tick']).toBe('major');
-      expect(attrs.transform).toBe('translate(0, 50)');
-      expect(attrs['text-anchor']).toBe('end');
-      expect(attrs['dominant-baseline']).toBe('middle');
-    });
-  });
-});
\ No newline at end of file
+	const testScales = {
+		x: null,
+		y: null
+	}
+
+	const testDimensions = {
+		width: 600,
+		height: 400,
+		margin: { top: 20, right: 30, bottom: 40, left: 50 },
+		innerWidth: 520,
+		innerHeight: 340
+	}
+
+	// Create mock scales
+	beforeEach(() => {
+		// Mock band scale for x-axis
+		testScales.x = {
+			domain: () => ['A', 'B', 'C'],
+			bandwidth: () => 30,
+			ticks: null,
+			// Mock implementation
+			call: (d) => d
+		}
+
+		testScales.x.bandwidth = () => 30
+
+		// Add custom method for band scales
+		testScales.x = (value) => {
+			const domain = ['A', 'B', 'C']
+			const index = domain.indexOf(value)
+			if (index === -1) return 0
+			return index * 40
+		}
+
+		testScales.x.domain = () => ['A', 'B', 'C']
+		testScales.x.bandwidth = () => 30
+
+		// Mock linear scale for y-axis with ticks
+		testScales.y = (value) => {
+			// Simple linear mapping: 0 -> 340, 100 -> 0
+			return 340 - (value / 100) * 340
+		}
+
+		testScales.y.domain = () => [0, 100]
+		testScales.y.ticks = (count) => {
+			// Generate n evenly spaced ticks from 0 to 100
+			const n = count || 5
+			return Array.from({ length: n + 1 }, (_, i) => i * (100 / n))
+		}
+	})
+
+	describe('createXAxis', () => {
+		it('should create x-axis data for band scale', () => {
+			const xAxis = createXAxis(testScales, testDimensions)
+
+			expect(xAxis.ticks.length).toBe(3)
+			expect(xAxis.transform).toBe(`translate(0, ${testDimensions.innerHeight})`)
+
+			// Check first tick
+			expect(xAxis.ticks[0].value).toBe('A')
+			expect(xAxis.ticks[0].position).toBe(15) // 0 + bandwidth/2
+
+			// Check second tick
+			expect(xAxis.ticks[1].value).toBe('B')
+			expect(xAxis.ticks[1].position).toBe(55) // 40 + bandwidth/2
+		})
+
+		it('should create x-axis with custom tick count', () => {
+			// For band scale, custom tick count should filter ticks
+			testScales.x.domain = () => ['A', 'B', 'C', 'D', 'E', 'F']
+
+			const xAxis = createXAxis(testScales, testDimensions, { tickCount: 2 })
+
+			// Should show fewer ticks
+			expect(xAxis.ticks.length).toBeLessThan(6)
+			expect(xAxis.ticks.length).toBeGreaterThan(0)
+		})
+
+		it('should create x-axis with custom tick formatter', () => {
+			const tickFormat = (value) => `Category ${value}`
+			const xAxis = createXAxis(testScales, testDimensions, { tickFormat })
+
+			expect(xAxis.ticks[0].formattedValue).toBe('Category A')
+		})
+
+		it('should create x-axis with label', () => {
+			const xAxis = createXAxis(testScales, testDimensions, { label: 'Categories' })
+
+			expect(xAxis.label).toBe('Categories')
+			expect(xAxis.labelTransform).toBe(`translate(${testDimensions.innerWidth / 2}, 35)`)
+		})
+
+		it('should return empty ticks if x scale is not defined', () => {
+			const xAxis = createXAxis({ y: testScales.y }, testDimensions)
+
+			expect(xAxis.ticks).toEqual([])
+		})
+	})
+
+	describe('createYAxis', () => {
+		it('should create y-axis data for linear scale', () => {
+			const yAxis = createYAxis(testScales, testDimensions)
+
+			expect(yAxis.ticks.length).toBeGreaterThan(0)
+			expect(yAxis.transform).toBe('translate(0, 0)')
+
+			// Check tick positions
+			yAxis.ticks.forEach((tick) => {
+				// Higher values should have lower y positions
+				const expectedPosition = testScales.y(tick.value)
+				expect(tick.position).toBe(expectedPosition)
+			})
+		})
+
+		it('should create y-axis with custom tick count', () => {
+			const yAxis = createYAxis(testScales, testDimensions, { tickCount: 3 })
+
+			// Should have exactly the number of ticks specified + 1 (for zero)
+			expect(yAxis.ticks.length).toBe(4)
+			expect(yAxis.ticks[0].value).toBe(0)
+			expect(yAxis.ticks[3].value).toBe(100)
+		})
+
+		it('should create y-axis with custom tick formatter', () => {
+			const tickFormat = (value) => `${value}%`
+			const yAxis = createYAxis(testScales, testDimensions, { tickFormat })
+
+			// Check that the formatter was applied
+			yAxis.ticks.forEach((tick) => {
+				expect(tick.formattedValue).toBe(`${tick.value}%`)
+			})
+		})
+
+		it('should create y-axis with label', () => {
+			const yAxis = createYAxis(testScales, testDimensions, { label: 'Values' })
+
+			expect(yAxis.label).toBe('Values')
+			expect(yAxis.labelTransform).toBe(
+				`translate(-40, ${testDimensions.innerHeight / 2}) rotate(-90)`
+			)
+		})
+
+		it('should return empty ticks if y scale is not defined', () => {
+			const yAxis = createYAxis({ x: testScales.x }, testDimensions)
+
+			expect(yAxis.ticks).toEqual([])
+		})
+	})
+
+	describe('createGrid', () => {
+		it('should create grid with both x and y lines', () => {
+			const grid = createGrid(testScales, testDimensions)
+
+			expect(grid.xLines.length).toBeGreaterThan(0)
+			expect(grid.yLines.length).toBeGreaterThan(0)
+
+			// Check a typical x grid line
+			const xLine = grid.xLines[0]
+			expect(xLine).toHaveProperty('x1')
+			expect(xLine).toHaveProperty('y1')
+			expect(xLine).toHaveProperty('x2')
+			expect(xLine).toHaveProperty('y2')
+			expect(xLine.y2).toBe(testDimensions.innerHeight)
+
+			// Check a typical y grid line
+			const yLine = grid.yLines[0]
+			expect(yLine).toHaveProperty('x1')
+			expect(yLine).toHaveProperty('y1')
+			expect(yLine).toHaveProperty('x2')
+			expect(yLine).toHaveProperty('y2')
+			expect(yLine.x2).toBe(testDimensions.innerWidth)
+		})
+
+		it('should create grid with only x lines', () => {
+			const grid = createGrid(testScales, testDimensions, { direction: 'x' })
+
+			expect(grid.xLines.length).toBeGreaterThan(0)
+			expect(grid.yLines.length).toBe(0)
+		})
+
+		it('should create grid with only y lines', () => {
+			const grid = createGrid(testScales, testDimensions, { direction: 'y' })
+
+			expect(grid.xLines.length).toBe(0)
+			expect(grid.yLines.length).toBeGreaterThan(0)
+		})
+
+		it('should create grid with custom tick counts', () => {
+			const grid = createGrid(testScales, testDimensions, {
+				xTickCount: 2,
+				yTickCount: 3
+			})
+
+			// X lines should respect xTickCount (actual implementation may vary)
+			expect(grid.xLines.length).toBeGreaterThan(0)
+
+			// Y lines should have 3 + 1 lines (including zero)
+			expect(grid.yLines.length).toBe(4)
+		})
+	})
+
+	describe('createTickAttributes', () => {
+		it('should create attributes for x-axis ticks', () => {
+			const tick = { position: 100, value: 'A', formattedValue: 'A' }
+			const attrs = createTickAttributes(tick, 'x')
+
+			expect(attrs['data-plot-tick']).toBe('major')
+			expect(attrs.transform).toBe('translate(100, 0)')
+			expect(attrs['text-anchor']).toBe('middle')
+		})
+
+		it('should create attributes for y-axis ticks', () => {
+			const tick = { position: 50, value: 50, formattedValue: '50' }
+			const attrs = createTickAttributes(tick, 'y')
+
+			expect(attrs['data-plot-tick']).toBe('major')
+			expect(attrs.transform).toBe('translate(0, 50)')
+			expect(attrs['text-anchor']).toBe('end')
+			expect(attrs['dominant-baseline']).toBe('middle')
+		})
+	})
+})
diff --git a/packages/chart/spec/brewing/dimensions.spec.js b/packages/chart/spec/brewing/dimensions.spec.js
index 39fbc8a5a..0a88ac019 100644
--- a/packages/chart/spec/brewing/dimensions.spec.js
+++ b/packages/chart/spec/brewing/dimensions.spec.js
@@ -1,89 +1,89 @@
-import { describe, it, expect } from 'vitest';
-import { createDimensions, updateDimensions } from '../../src/lib/brewing/dimensions.svelte.js';
+import { describe, it, expect } from 'vitest'
+import { createDimensions, updateDimensions } from '../../src/lib/brewing/dimensions.svelte.js'
 
 describe('dimensions module', () => {
-  describe('createDimensions', () => {
-    it('should create dimensions with default values', () => {
-      const dimensions = createDimensions();
-      
-      expect(dimensions).toEqual({
-        width: 600,
-        height: 400,
-        margin: { top: 20, right: 30, bottom: 40, left: 50 },
-        innerWidth: 600 - 30 - 50,
-        innerHeight: 400 - 20 - 40
-      });
-    });
-    
-    it('should create dimensions with custom values', () => {
-      const dimensions = createDimensions(800, 500, { top: 30, right: 40, bottom: 50, left: 60 });
-      
-      expect(dimensions).toEqual({
-        width: 800,
-        height: 500,
-        margin: { top: 30, right: 40, bottom: 50, left: 60 },
-        innerWidth: 800 - 40 - 60,
-        innerHeight: 500 - 30 - 50
-      });
-    });
-  });
-  
-  describe('updateDimensions', () => {
-    it('should update width and recalculate innerWidth', () => {
-      const dimensions = createDimensions(600, 400);
-      const updated = updateDimensions(dimensions, { width: 800 });
-      
-      expect(updated.width).toBe(800);
-      expect(updated.innerWidth).toBe(800 - 30 - 50);
-      expect(updated.height).toBe(400); // unchanged
-      expect(updated.innerHeight).toBe(400 - 20 - 40); // unchanged
-    });
-    
-    it('should update height and recalculate innerHeight', () => {
-      const dimensions = createDimensions(600, 400);
-      const updated = updateDimensions(dimensions, { height: 500 });
-      
-      expect(updated.height).toBe(500);
-      expect(updated.innerHeight).toBe(500 - 20 - 40);
-      expect(updated.width).toBe(600); // unchanged
-      expect(updated.innerWidth).toBe(600 - 30 - 50); // unchanged
-    });
-    
-    it('should update margins and recalculate inner dimensions', () => {
-      const dimensions = createDimensions(600, 400);
-      const updated = updateDimensions(dimensions, { 
-        margin: { top: 30, right: 40, bottom: 50, left: 60 } 
-      });
-      
-      expect(updated.margin).toEqual({ top: 30, right: 40, bottom: 50, left: 60 });
-      expect(updated.innerWidth).toBe(600 - 40 - 60);
-      expect(updated.innerHeight).toBe(400 - 30 - 50);
-    });
-    
-    it('should handle multiple updates at once', () => {
-      const dimensions = createDimensions(600, 400);
-      const updated = updateDimensions(dimensions, {
-        width: 800,
-        height: 500,
-        margin: { top: 30, right: 40, bottom: 50, left: 60 }
-      });
-      
-      expect(updated).toEqual({
-        width: 800,
-        height: 500,
-        margin: { top: 30, right: 40, bottom: 50, left: 60 },
-        innerWidth: 800 - 40 - 60,
-        innerHeight: 500 - 30 - 50
-      });
-    });
-    
-    it('should not modify the original dimensions object', () => {
-      const dimensions = createDimensions(600, 400);
-      const original = { ...dimensions };
-      
-      updateDimensions(dimensions, { width: 800 });
-      
-      expect(dimensions).toEqual(original);
-    });
-  });
-});
\ No newline at end of file
+	describe('createDimensions', () => {
+		it('should create dimensions with default values', () => {
+			const dimensions = createDimensions()
+
+			expect(dimensions).toEqual({
+				width: 600,
+				height: 400,
+				margin: { top: 20, right: 30, bottom: 40, left: 50 },
+				innerWidth: 600 - 30 - 50,
+				innerHeight: 400 - 20 - 40
+			})
+		})
+
+		it('should create dimensions with custom values', () => {
+			const dimensions = createDimensions(800, 500, { top: 30, right: 40, bottom: 50, left: 60 })
+
+			expect(dimensions).toEqual({
+				width: 800,
+				height: 500,
+				margin: { top: 30, right: 40, bottom: 50, left: 60 },
+				innerWidth: 800 - 40 - 60,
+				innerHeight: 500 - 30 - 50
+			})
+		})
+	})
+
+	describe('updateDimensions', () => {
+		it('should update width and recalculate innerWidth', () => {
+			const dimensions = createDimensions(600, 400)
+			const updated = updateDimensions(dimensions, { width: 800 })
+
+			expect(updated.width).toBe(800)
+			expect(updated.innerWidth).toBe(800 - 30 - 50)
+			expect(updated.height).toBe(400) // unchanged
+			expect(updated.innerHeight).toBe(400 - 20 - 40) // unchanged
+		})
+
+		it('should update height and recalculate innerHeight', () => {
+			const dimensions = createDimensions(600, 400)
+			const updated = updateDimensions(dimensions, { height: 500 })
+
+			expect(updated.height).toBe(500)
+			expect(updated.innerHeight).toBe(500 - 20 - 40)
+			expect(updated.width).toBe(600) // unchanged
+			expect(updated.innerWidth).toBe(600 - 30 - 50) // unchanged
+		})
+
+		it('should update margins and recalculate inner dimensions', () => {
+			const dimensions = createDimensions(600, 400)
+			const updated = updateDimensions(dimensions, {
+				margin: { top: 30, right: 40, bottom: 50, left: 60 }
+			})
+
+			expect(updated.margin).toEqual({ top: 30, right: 40, bottom: 50, left: 60 })
+			expect(updated.innerWidth).toBe(600 - 40 - 60)
+			expect(updated.innerHeight).toBe(400 - 30 - 50)
+		})
+
+		it('should handle multiple updates at once', () => {
+			const dimensions = createDimensions(600, 400)
+			const updated = updateDimensions(dimensions, {
+				width: 800,
+				height: 500,
+				margin: { top: 30, right: 40, bottom: 50, left: 60 }
+			})
+
+			expect(updated).toEqual({
+				width: 800,
+				height: 500,
+				margin: { top: 30, right: 40, bottom: 50, left: 60 },
+				innerWidth: 800 - 40 - 60,
+				innerHeight: 500 - 30 - 50
+			})
+		})
+
+		it('should not modify the original dimensions object', () => {
+			const dimensions = createDimensions(600, 400)
+			const original = { ...dimensions }
+
+			updateDimensions(dimensions, { width: 800 })
+
+			expect(dimensions).toEqual(original)
+		})
+	})
+})
diff --git a/packages/chart/spec/brewing/scales.spec.js b/packages/chart/spec/brewing/scales.spec.js
index b5fa41366..0314210e0 100644
--- a/packages/chart/spec/brewing/scales.spec.js
+++ b/packages/chart/spec/brewing/scales.spec.js
@@ -1,158 +1,151 @@
-import { describe, it, expect } from 'vitest';
-import { createScales, getOrigin } from '../../src/lib/brewing/scales.svelte.js';
+import { describe, it, expect } from 'vitest'
+import { createScales, getOrigin } from '../../src/lib/brewing/scales.svelte.js'
 
 describe('scales module', () => {
-  const testDimensions = {
-    width: 600,
-    height: 400,
-    margin: { top: 20, right: 30, bottom: 40, left: 50 },
-    innerWidth: 520,
-    innerHeight: 340
-  };
-  
-  describe('createScales', () => {
-    it('should return empty scales object for empty data', () => {
-      const scales = createScales([], { x: 'category', y: 'value' }, testDimensions);
-      
-      expect(scales.x).toBeNull();
-      expect(scales.y).toBeNull();
-      expect(scales.color).toBeNull();
-    });
-    
-    it('should create band scale for categorical x-axis data', () => {
-      const data = [
-        { category: 'A', value: 10 },
-        { category: 'B', value: 20 },
-        { category: 'C', value: 30 }
-      ];
-      
-      const scales = createScales(data, { x: 'category', y: 'value' }, testDimensions);
-      
-      expect(scales.x).not.toBeNull();
-      expect(typeof scales.x).toBe('function');
-      expect(scales.x.bandwidth).toBeDefined();
-      expect(scales.x.domain()).toEqual(['A', 'B', 'C']);
-      expect(scales.x.range()).toEqual([0, testDimensions.innerWidth]);
-    });
-    
-    it('should create linear scale for numeric x-axis data', () => {
-      const data = [
-        { category: 10, value: 10 },
-        { category: 20, value: 20 },
-        { category: 30, value: 30 }
-      ];
-      
-      const scales = createScales(data, { x: 'category', y: 'value' }, testDimensions);
-      
-      expect(scales.x).not.toBeNull();
-      expect(typeof scales.x).toBe('function');
-      expect(scales.x.ticks).toBeDefined();
-      expect(scales.x(0)).toBeLessThan(scales.x(30));
-    });
-    
-    it('should create time scale for date x-axis data', () => {
-      const data = [
-        { category: new Date(2023, 0, 1), value: 10 },
-        { category: new Date(2023, 0, 2), value: 20 },
-        { category: new Date(2023, 0, 3), value: 30 }
-      ];
-      
-      const scales = createScales(data, { x: 'category', y: 'value' }, testDimensions);
-      
-      expect(scales.x).not.toBeNull();
-      expect(typeof scales.x).toBe('function');
-      expect(scales.x.ticks).toBeDefined();
-      expect(scales.x(new Date(2023, 0, 1))).toBeLessThan(scales.x(new Date(2023, 0, 3)));
-    });
-    
-    it('should create linear scale for y-axis data', () => {
-      const data = [
-        { category: 'A', value: 10 },
-        { category: 'B', value: 20 },
-        { category: 'C', value: 30 }
-      ];
-      
-      const scales = createScales(data, { x: 'category', y: 'value' }, testDimensions);
-      
-      expect(scales.y).not.toBeNull();
-      expect(typeof scales.y).toBe('function');
-      expect(scales.y(0)).toBeGreaterThan(scales.y(30));
-      expect(scales.y(0)).toBe(testDimensions.innerHeight);
-      expect(scales.y.domain()[1]).toBeGreaterThanOrEqual(30); // Should add some padding
-    });
-    
-    it('should create color scale when color field is provided', () => {
-      const data = [
-        { category: 'A', value: 10, group: 'Group 1' },
-        { category: 'B', value: 20, group: 'Group 2' },
-        { category: 'C', value: 30, group: 'Group 1' }
-      ];
-      
-      const scales = createScales(
-        data, 
-        { x: 'category', y: 'value', color: 'group' }, 
-        testDimensions
-      );
-      
-      expect(scales.color).not.toBeNull();
-      expect(typeof scales.color).toBe('function');
-      expect(scales.color.domain()).toEqual(['Group 1', 'Group 2']);
-      expect(scales.color('Group 1')).not.toBe(scales.color('Group 2'));
-    });
-    
-    it('should not create color scale when color field is not provided', () => {
-      const data = [
-        { category: 'A', value: 10, group: 'Group 1' },
-        { category: 'B', value: 20, group: 'Group 2' }
-      ];
-      
-      const scales = createScales(
-        data,
-        { x: 'category', y: 'value' },
-        testDimensions
-      );
-      
-      expect(scales.color).toBeNull();
-    });
-    
-    it('should use custom padding for band scales', () => {
-      const data = [
-        { category: 'A', value: 10 },
-        { category: 'B', value: 20 }
-      ];
-      
-      const defaultScales = createScales(data, { x: 'category', y: 'value' }, testDimensions);
-      const customScales = createScales(
-        data, 
-        { x: 'category', y: 'value' }, 
-        testDimensions,
-        { padding: 0.5 }
-      );
-      
-      expect(defaultScales.x.padding()).toBe(0.2); // Default padding
-      expect(customScales.x.padding()).toBe(0.5);
-    });
-  });
-  
-  describe('getOrigin', () => {
-    it('should return correct origin for linear scales', () => {
-      const data = [
-        { category: 'A', value: -10 },
-        { category: 'B', value: 20 }
-      ];
-      
-      const scales = createScales(data, { x: 'category', y: 'value' }, testDimensions);
-      const origin = getOrigin(scales, testDimensions);
-      
-      expect(origin.x).toBe(scales.y(0));
-      expect(origin.y).toBe(0);
-    });
-    
-    it('should handle case when scales are not defined', () => {
-      const origin = getOrigin({}, testDimensions);
-      
-      expect(origin.x).toBe(testDimensions.innerHeight);
-      expect(origin.y).toBe(0);
-    });
-  });
-});
\ No newline at end of file
+	const testDimensions = {
+		width: 600,
+		height: 400,
+		margin: { top: 20, right: 30, bottom: 40, left: 50 },
+		innerWidth: 520,
+		innerHeight: 340
+	}
+
+	describe('createScales', () => {
+		it('should return empty scales object for empty data', () => {
+			const scales = createScales([], { x: 'category', y: 'value' }, testDimensions)
+
+			expect(scales.x).toBeNull()
+			expect(scales.y).toBeNull()
+			expect(scales.color).toBeNull()
+		})
+
+		it('should create band scale for categorical x-axis data', () => {
+			const data = [
+				{ category: 'A', value: 10 },
+				{ category: 'B', value: 20 },
+				{ category: 'C', value: 30 }
+			]
+
+			const scales = createScales(data, { x: 'category', y: 'value' }, testDimensions)
+
+			expect(scales.x).not.toBeNull()
+			expect(typeof scales.x).toBe('function')
+			expect(scales.x.bandwidth).toBeDefined()
+			expect(scales.x.domain()).toEqual(['A', 'B', 'C'])
+			expect(scales.x.range()).toEqual([0, testDimensions.innerWidth])
+		})
+
+		it('should create linear scale for numeric x-axis data', () => {
+			const data = [
+				{ category: 10, value: 10 },
+				{ category: 20, value: 20 },
+				{ category: 30, value: 30 }
+			]
+
+			const scales = createScales(data, { x: 'category', y: 'value' }, testDimensions)
+
+			expect(scales.x).not.toBeNull()
+			expect(typeof scales.x).toBe('function')
+			expect(scales.x.ticks).toBeDefined()
+			expect(scales.x(0)).toBeLessThan(scales.x(30))
+		})
+
+		it('should create time scale for date x-axis data', () => {
+			const data = [
+				{ category: new Date(2023, 0, 1), value: 10 },
+				{ category: new Date(2023, 0, 2), value: 20 },
+				{ category: new Date(2023, 0, 3), value: 30 }
+			]
+
+			const scales = createScales(data, { x: 'category', y: 'value' }, testDimensions)
+
+			expect(scales.x).not.toBeNull()
+			expect(typeof scales.x).toBe('function')
+			expect(scales.x.ticks).toBeDefined()
+			expect(scales.x(new Date(2023, 0, 1))).toBeLessThan(scales.x(new Date(2023, 0, 3)))
+		})
+
+		it('should create linear scale for y-axis data', () => {
+			const data = [
+				{ category: 'A', value: 10 },
+				{ category: 'B', value: 20 },
+				{ category: 'C', value: 30 }
+			]
+
+			const scales = createScales(data, { x: 'category', y: 'value' }, testDimensions)
+
+			expect(scales.y).not.toBeNull()
+			expect(typeof scales.y).toBe('function')
+			expect(scales.y(0)).toBeGreaterThan(scales.y(30))
+			expect(scales.y(0)).toBe(testDimensions.innerHeight)
+			expect(scales.y.domain()[1]).toBeGreaterThanOrEqual(30) // Should add some padding
+		})
+
+		it('should create color scale when color field is provided', () => {
+			const data = [
+				{ category: 'A', value: 10, group: 'Group 1' },
+				{ category: 'B', value: 20, group: 'Group 2' },
+				{ category: 'C', value: 30, group: 'Group 1' }
+			]
+
+			const scales = createScales(
+				data,
+				{ x: 'category', y: 'value', color: 'group' },
+				testDimensions
+			)
+
+			expect(scales.color).not.toBeNull()
+			expect(typeof scales.color).toBe('function')
+			expect(scales.color.domain()).toEqual(['Group 1', 'Group 2'])
+			expect(scales.color('Group 1')).not.toBe(scales.color('Group 2'))
+		})
+
+		it('should not create color scale when color field is not provided', () => {
+			const data = [
+				{ category: 'A', value: 10, group: 'Group 1' },
+				{ category: 'B', value: 20, group: 'Group 2' }
+			]
+
+			const scales = createScales(data, { x: 'category', y: 'value' }, testDimensions)
+
+			expect(scales.color).toBeNull()
+		})
+
+		it('should use custom padding for band scales', () => {
+			const data = [
+				{ category: 'A', value: 10 },
+				{ category: 'B', value: 20 }
+			]
+
+			const defaultScales = createScales(data, { x: 'category', y: 'value' }, testDimensions)
+			const customScales = createScales(data, { x: 'category', y: 'value' }, testDimensions, {
+				padding: 0.5
+			})
+
+			expect(defaultScales.x.padding()).toBe(0.2) // Default padding
+			expect(customScales.x.padding()).toBe(0.5)
+		})
+	})
+
+	describe('getOrigin', () => {
+		it('should return correct origin for linear scales', () => {
+			const data = [
+				{ category: 'A', value: -10 },
+				{ category: 'B', value: 20 }
+			]
+
+			const scales = createScales(data, { x: 'category', y: 'value' }, testDimensions)
+			const origin = getOrigin(scales, testDimensions)
+
+			expect(origin.x).toBe(scales.y(0))
+			expect(origin.y).toBe(0)
+		})
+
+		it('should handle case when scales are not defined', () => {
+			const origin = getOrigin({}, testDimensions)
+
+			expect(origin.x).toBe(testDimensions.innerHeight)
+			expect(origin.y).toBe(0)
+		})
+	})
+})
diff --git a/packages/chart/src/index.js b/packages/chart/src/index.js
index aa41b5a88..9aa7f4310 100644
--- a/packages/chart/src/index.js
+++ b/packages/chart/src/index.js
@@ -1,18 +1,18 @@
-import Root from './Plot/Root.svelte';
-import Axis from './Plot/Axis.svelte';
-import Bar from './Plot/Bar.svelte';
-import Grid from './Plot/Grid.svelte';
-import Legend from './Plot/Legend.svelte';
+import Root from './Plot/Root.svelte'
+import Axis from './Plot/Axis.svelte'
+import Bar from './Plot/Bar.svelte'
+import Grid from './Plot/Grid.svelte'
+import Legend from './Plot/Legend.svelte'
 
 // Export components
 export const Plot = {
-  Root,
-  Axis,
-  Bar,
-  Grid,
-  Legend
-};
+	Root,
+	Axis,
+	Bar,
+	Grid,
+	Legend
+}
 
 // Export utilities
-export { ChartBrewer } from './lib/brewing/index.svelte.js';
-export * from './lib/brewing/index.svelte.js';
+export { ChartBrewer } from './lib/brewing/index.svelte.js'
+export * from './lib/brewing/index.svelte.js'
diff --git a/packages/chart/src/lib/brewing/axes.svelte.js b/packages/chart/src/lib/brewing/axes.svelte.js
index 41c272a75..c0759f0ca 100644
--- a/packages/chart/src/lib/brewing/axes.svelte.js
+++ b/packages/chart/src/lib/brewing/axes.svelte.js
@@ -1,6 +1,6 @@
-import { scaleBand } from 'd3-scale';
+import { scaleBand } from 'd3-scale'
 
-import { } from './types.js';
+import {} from './types.js'
 
 /**
  * @typedef {import('./types').TickData} TickData
@@ -11,7 +11,7 @@ import { } from './types.js';
 
 /**
  * Creates x-axis tick data for rendering
- * 
+ *
  * @param {Object} scales - Chart scales
  * @param {Function} scales.x - X-axis scale
  * @param {Object} dimensions - Chart dimensions
@@ -22,52 +22,50 @@ import { } from './types.js';
  * @returns {AxisData} Axis rendering data
  */
 export function createXAxis(scales, dimensions, options = {}) {
-  if (!scales.x) return { ticks: [] };
-  
-  const { tickCount = null, tickFormat = null, label = '' } = options;
-  const xScale = scales.x;
-  
-  // Determine tick values
-  let tickValues;
-  if (xScale.ticks) {
-    // For continuous scales (linear, time)
-    tickValues = tickCount !== null ? xScale.ticks(tickCount) : xScale.ticks();
-  } else {
-    // For band scales
-    tickValues = xScale.domain();
-    if (tickCount !== null && tickCount < tickValues.length) {
-      const step = Math.max(1, Math.floor(tickValues.length / tickCount));
-      tickValues = tickValues.filter((_, i) => i % step === 0);
-    }
-  }
-  
-  // Format ticks
-  const formatter = tickFormat || (v => v);
-  
-  // Generate tick data
-  const ticks = tickValues.map(value => {
-    const position = xScale.bandwidth 
-      ? xScale(value) + xScale.bandwidth() / 2 
-      : xScale(value);
-    
-    return {
-      value,
-      position,
-      formattedValue: formatter(value)
-    };
-  });
-  
-  return {
-    ticks,
-    label,
-    transform: `translate(0, ${dimensions.innerHeight})`,
-    labelTransform: `translate(${dimensions.innerWidth / 2}, 35)`
-  };
+	if (!scales.x) return { ticks: [] }
+
+	const { tickCount = null, tickFormat = null, label = '' } = options
+	const xScale = scales.x
+
+	// Determine tick values
+	let tickValues
+	if (xScale.ticks) {
+		// For continuous scales (linear, time)
+		tickValues = tickCount !== null ? xScale.ticks(tickCount) : xScale.ticks()
+	} else {
+		// For band scales
+		tickValues = xScale.domain()
+		if (tickCount !== null && tickCount < tickValues.length) {
+			const step = Math.max(1, Math.floor(tickValues.length / tickCount))
+			tickValues = tickValues.filter((_, i) => i % step === 0)
+		}
+	}
+
+	// Format ticks
+	const formatter = tickFormat || ((v) => v)
+
+	// Generate tick data
+	const ticks = tickValues.map((value) => {
+		const position = xScale.bandwidth ? xScale(value) + xScale.bandwidth() / 2 : xScale(value)
+
+		return {
+			value,
+			position,
+			formattedValue: formatter(value)
+		}
+	})
+
+	return {
+		ticks,
+		label,
+		transform: `translate(0, ${dimensions.innerHeight})`,
+		labelTransform: `translate(${dimensions.innerWidth / 2}, 35)`
+	}
 }
 
 /**
  * Creates y-axis tick data for rendering
- * 
+ *
  * @param {Object} scales - Chart scales
  * @param {Function} scales.y - Y-axis scale
  * @param {Object} dimensions - Chart dimensions
@@ -78,45 +76,45 @@ export function createXAxis(scales, dimensions, options = {}) {
  * @returns {AxisData} Axis rendering data
  */
 export function createYAxis(scales, dimensions, options = {}) {
-  if (!scales.y) return { ticks: [] };
-  
-  const { tickCount = null, tickFormat = null, label = '' } = options;
-  const yScale = scales.y;
-  
-  // Determine tick values
-  let tickValues = [];
-  
-  if (yScale.ticks) {
-    tickValues = tickCount !== null ? yScale.ticks(tickCount) : yScale.ticks();
-  } else if (yScale.domain) {
-    tickValues = yScale.domain();
-    if (tickCount !== null && tickValues.length > tickCount) {
-      const step = Math.max(1, Math.floor(tickValues.length / tickCount));
-      tickValues = tickValues.filter((_, i) => i % step === 0);
-    }
-  }
-  
-  // Format ticks
-  const formatter = tickFormat || (v => v);
-  
-  // Generate tick data
-  const ticks = tickValues.map(value => ({
-    value,
-    position: yScale(value),
-    formattedValue: formatter(value)
-  }));
-  
-  return {
-    ticks,
-    label,
-    transform: 'translate(0, 0)',
-    labelTransform: `translate(-40, ${dimensions.innerHeight / 2}) rotate(-90)`
-  };
+	if (!scales.y) return { ticks: [] }
+
+	const { tickCount = null, tickFormat = null, label = '' } = options
+	const yScale = scales.y
+
+	// Determine tick values
+	let tickValues = []
+
+	if (yScale.ticks) {
+		tickValues = tickCount !== null ? yScale.ticks(tickCount) : yScale.ticks()
+	} else if (yScale.domain) {
+		tickValues = yScale.domain()
+		if (tickCount !== null && tickValues.length > tickCount) {
+			const step = Math.max(1, Math.floor(tickValues.length / tickCount))
+			tickValues = tickValues.filter((_, i) => i % step === 0)
+		}
+	}
+
+	// Format ticks
+	const formatter = tickFormat || ((v) => v)
+
+	// Generate tick data
+	const ticks = tickValues.map((value) => ({
+		value,
+		position: yScale(value),
+		formattedValue: formatter(value)
+	}))
+
+	return {
+		ticks,
+		label,
+		transform: 'translate(0, 0)',
+		labelTransform: `translate(-40, ${dimensions.innerHeight / 2}) rotate(-90)`
+	}
 }
 
 /**
  * Creates grid line data for rendering
- * 
+ *
  * @param {Object} scales - Chart scales
  * @param {Object} dimensions - Chart dimensions
  * @param {Object} options - Grid options
@@ -126,54 +124,54 @@ export function createYAxis(scales, dimensions, options = {}) {
  * @returns {Object} Grid rendering data
  */
 export function createGrid(scales, dimensions, options = {}) {
-  const { direction = 'both', xTickCount = null, yTickCount = null } = options;
-  const result = { xLines: [], yLines: [] };
-  
-  // Generate X grid lines (vertical)
-  if ((direction === 'x' || direction === 'both') && scales.x) {
-    const xAxis = createXAxis(scales, dimensions, { tickCount: xTickCount });
-    result.xLines = xAxis.ticks.map(tick => ({
-      x1: tick.position,
-      y1: 0,
-      x2: tick.position,
-      y2: dimensions.innerHeight
-    }));
-  }
-  
-  // Generate Y grid lines (horizontal)
-  if ((direction === 'y' || direction === 'both') && scales.y) {
-    const yAxis = createYAxis(scales, dimensions, { tickCount: yTickCount });
-    result.yLines = yAxis.ticks.map(tick => ({
-      x1: 0,
-      y1: tick.position,
-      x2: dimensions.innerWidth,
-      y2: tick.position
-    }));
-  }
-  
-  return result;
+	const { direction = 'both', xTickCount = null, yTickCount = null } = options
+	const result = { xLines: [], yLines: [] }
+
+	// Generate X grid lines (vertical)
+	if ((direction === 'x' || direction === 'both') && scales.x) {
+		const xAxis = createXAxis(scales, dimensions, { tickCount: xTickCount })
+		result.xLines = xAxis.ticks.map((tick) => ({
+			x1: tick.position,
+			y1: 0,
+			x2: tick.position,
+			y2: dimensions.innerHeight
+		}))
+	}
+
+	// Generate Y grid lines (horizontal)
+	if ((direction === 'y' || direction === 'both') && scales.y) {
+		const yAxis = createYAxis(scales, dimensions, { tickCount: yTickCount })
+		result.yLines = yAxis.ticks.map((tick) => ({
+			x1: 0,
+			y1: tick.position,
+			x2: dimensions.innerWidth,
+			y2: tick.position
+		}))
+	}
+
+	return result
 }
 
 /**
  * Creates DOM attributes for a tick element
- * 
+ *
  * @param {TickData} tick - Tick data
  * @param {string} axis - Axis type ('x' or 'y')
  * @returns {Object} Attributes for the tick
  */
 export function createTickAttributes(tick, axis) {
-  if (axis === 'x') {
-    return {
-      'data-plot-tick': 'major',
-      'transform': `translate(${tick.position}, 0)`,
-      'text-anchor': 'middle'
-    };
-  } else {
-    return {
-      'data-plot-tick': 'major',
-      'transform': `translate(0, ${tick.position})`,
-      'text-anchor': 'end',
-      'dominant-baseline': 'middle'
-    };
-  }
-}
\ No newline at end of file
+	if (axis === 'x') {
+		return {
+			'data-plot-tick': 'major',
+			transform: `translate(${tick.position}, 0)`,
+			'text-anchor': 'middle'
+		}
+	} else {
+		return {
+			'data-plot-tick': 'major',
+			transform: `translate(0, ${tick.position})`,
+			'text-anchor': 'end',
+			'dominant-baseline': 'middle'
+		}
+	}
+}
diff --git a/packages/chart/src/lib/brewing/bars.svelte.js b/packages/chart/src/lib/brewing/bars.svelte.js
index 63644d023..6477b1dc1 100644
--- a/packages/chart/src/lib/brewing/bars.svelte.js
+++ b/packages/chart/src/lib/brewing/bars.svelte.js
@@ -1,4 +1,4 @@
-import { } from './types.js';
+import {} from './types.js'
 
 /**
  * @typedef {import('./types').BarData} BarData
@@ -9,7 +9,7 @@ import { } from './types.js';
 
 /**
  * Creates bar data for rendering
- * 
+ *
  * @param {Array} data - Chart data
  * @param {Object} fields - Field mappings
  * @param {string} fields.x - X-axis field
@@ -24,47 +24,47 @@ import { } from './types.js';
  * @returns {BarData[]} Bar data for rendering
  */
 export function createBars(data, fields, scales, dimensions, defaultColor = '#4682b4') {
-  if (!data || data.length === 0 || !scales.x || !scales.y) return [];
-  
-  const { x: xField, y: yField, color: colorField } = fields;
-  
-  return data.map(d => {
-    const barWidth = scales.x.bandwidth ? scales.x.bandwidth() : 10;
-    const barX = scales.x.bandwidth ? scales.x(d[xField]) : scales.x(d[xField]) - barWidth / 2;
-    
-    return {
-      data: d,
-      x: barX,
-      y: scales.y(d[yField]),
-      width: barWidth,
-      height: dimensions.innerHeight - scales.y(d[yField]),
-      color: colorField && scales.color ? scales.color(d[colorField]) : defaultColor
-    };
-  });
+	if (!data || data.length === 0 || !scales.x || !scales.y) return []
+
+	const { x: xField, y: yField, color: colorField } = fields
+
+	return data.map((d) => {
+		const barWidth = scales.x.bandwidth ? scales.x.bandwidth() : 10
+		const barX = scales.x.bandwidth ? scales.x(d[xField]) : scales.x(d[xField]) - barWidth / 2
+
+		return {
+			data: d,
+			x: barX,
+			y: scales.y(d[yField]),
+			width: barWidth,
+			height: dimensions.innerHeight - scales.y(d[yField]),
+			color: colorField && scales.color ? scales.color(d[colorField]) : defaultColor
+		}
+	})
 }
 
 /**
  * Filter bars based on a selection criteria
- * 
+ *
  * @param {BarData[]} bars - Bar data array
  * @param {Object} selection - Selection criteria
  * @returns {BarData[]} Filtered bars
  */
 export function filterBars(bars, selection) {
-  if (!selection) return bars;
-  
-  return bars.filter(bar => {
-    for (const [key, value] of Object.entries(selection)) {
-      if (bar.data[key] !== value) return false;
-    }
-    return true;
-  });
+	if (!selection) return bars
+
+	return bars.filter((bar) => {
+		for (const [key, value] of Object.entries(selection)) {
+			if (bar.data[key] !== value) return false
+		}
+		return true
+	})
 }
 
 /**
  * Creates a grouped bars layout
- * 
- * @param {Array} data - Chart data 
+ *
+ * @param {Array} data - Chart data
  * @param {Object} fields - Field mappings
  * @param {Object} scales - Chart scales
  * @param {Object} dimensions - Chart dimensions
@@ -72,43 +72,43 @@ export function filterBars(bars, selection) {
  * @returns {Object} Grouped bar data
  */
 export function createGroupedBars(data, fields, scales, dimensions, options = {}) {
-  if (!data || data.length === 0 || !fields.group) return { groups: [], bars: [] };
-  
-  const { x: xField, y: yField, group: groupField, color: colorField = groupField } = fields;
-  const { padding = 0.1 } = options;
-  
-  // Get unique groups and x values
-  const groups = [...new Set(data.map(d => d[groupField]))];
-  const xValues = [...new Set(data.map(d => d[xField]))];
-  
-  // Calculate group width and individual bar width
-  const xScale = scales.x;
-  const groupWidth = xScale.bandwidth ? xScale.bandwidth() : 20;
-  const barWidth = (groupWidth - padding * (groups.length - 1)) / groups.length;
-  
-  // Create bars for each group
-  const bars = [];
-  
-  xValues.forEach(xValue => {
-    const groupItems = data.filter(d => d[xField] === xValue);
-    const xPos = xScale(xValue);
-    
-    groups.forEach((group, i) => {
-      const item = groupItems.find(d => d[groupField] === group);
-      if (!item) return;
-      
-      const barX = xPos + i * (barWidth + padding);
-      bars.push({
-        data: item,
-        group,
-        x: barX,
-        y: scales.y(item[yField]),
-        width: barWidth,
-        height: dimensions.innerHeight - scales.y(item[yField]),
-        color: scales.color ? scales.color(item[colorField]) : '#4682b4'
-      });
-    });
-  });
-  
-  return { groups, bars };
-}
\ No newline at end of file
+	if (!data || data.length === 0 || !fields.group) return { groups: [], bars: [] }
+
+	const { x: xField, y: yField, group: groupField, color: colorField = groupField } = fields
+	const { padding = 0.1 } = options
+
+	// Get unique groups and x values
+	const groups = [...new Set(data.map((d) => d[groupField]))]
+	const xValues = [...new Set(data.map((d) => d[xField]))]
+
+	// Calculate group width and individual bar width
+	const xScale = scales.x
+	const groupWidth = xScale.bandwidth ? xScale.bandwidth() : 20
+	const barWidth = (groupWidth - padding * (groups.length - 1)) / groups.length
+
+	// Create bars for each group
+	const bars = []
+
+	xValues.forEach((xValue) => {
+		const groupItems = data.filter((d) => d[xField] === xValue)
+		const xPos = xScale(xValue)
+
+		groups.forEach((group, i) => {
+			const item = groupItems.find((d) => d[groupField] === group)
+			if (!item) return
+
+			const barX = xPos + i * (barWidth + padding)
+			bars.push({
+				data: item,
+				group,
+				x: barX,
+				y: scales.y(item[yField]),
+				width: barWidth,
+				height: dimensions.innerHeight - scales.y(item[yField]),
+				color: scales.color ? scales.color(item[colorField]) : '#4682b4'
+			})
+		})
+	})
+
+	return { groups, bars }
+}
diff --git a/packages/chart/src/lib/brewing/dimensions.svelte.js b/packages/chart/src/lib/brewing/dimensions.svelte.js
index 254d3549d..c1da522a8 100644
--- a/packages/chart/src/lib/brewing/dimensions.svelte.js
+++ b/packages/chart/src/lib/brewing/dimensions.svelte.js
@@ -1,4 +1,4 @@
-import { } from './types.js';
+import {} from './types.js'
 
 /**
  * @typedef {import('./types').ChartMargin} ChartMargin
@@ -9,29 +9,29 @@ import { } from './types.js';
  * Default chart margin
  * @type {ChartMargin}
  */
-export const DEFAULT_MARGIN = { top: 20, right: 30, bottom: 40, left: 50 };
+export const DEFAULT_MARGIN = { top: 20, right: 30, bottom: 40, left: 50 }
 
 /**
  * Creates chart dimensions based on width, height and margins
- * 
+ *
  * @param {number} width - Total chart width
  * @param {number} height - Total chart height
  * @param {ChartMargin} margin - Chart margins
  * @returns {ChartDimensions} Chart dimensions
  */
 export function createDimensions(width = 600, height = 400, margin = DEFAULT_MARGIN) {
-  return {
-    width,
-    height,
-    margin: { ...margin },
-    innerWidth: width - margin.left - margin.right,
-    innerHeight: height - margin.top - margin.bottom
-  };
+	return {
+		width,
+		height,
+		margin: { ...margin },
+		innerWidth: width - margin.left - margin.right,
+		innerHeight: height - margin.top - margin.bottom
+	}
 }
 
 /**
  * Updates existing dimensions with new values
- * 
+ *
  * @param {ChartDimensions} dimensions - Current dimensions
  * @param {Object} updates - Values to update
  * @param {number} [updates.width] - New width
@@ -40,15 +40,17 @@ export function createDimensions(width = 600, height = 400, margin = DEFAULT_MAR
  * @returns {ChartDimensions} Updated dimensions
  */
 export function updateDimensions(dimensions, updates = {}) {
-  const newDimensions = { ...dimensions };
-  
-  if (updates.width !== undefined) newDimensions.width = updates.width;
-  if (updates.height !== undefined) newDimensions.height = updates.height;
-  if (updates.margin !== undefined) newDimensions.margin = { ...updates.margin };
-  
-  // Recalculate inner dimensions
-  newDimensions.innerWidth = newDimensions.width - newDimensions.margin.left - newDimensions.margin.right;
-  newDimensions.innerHeight = newDimensions.height - newDimensions.margin.top - newDimensions.margin.bottom;
-  
-  return newDimensions;
-}
\ No newline at end of file
+	const newDimensions = { ...dimensions }
+
+	if (updates.width !== undefined) newDimensions.width = updates.width
+	if (updates.height !== undefined) newDimensions.height = updates.height
+	if (updates.margin !== undefined) newDimensions.margin = { ...updates.margin }
+
+	// Recalculate inner dimensions
+	newDimensions.innerWidth =
+		newDimensions.width - newDimensions.margin.left - newDimensions.margin.right
+	newDimensions.innerHeight =
+		newDimensions.height - newDimensions.margin.top - newDimensions.margin.bottom
+
+	return newDimensions
+}
diff --git a/packages/chart/src/lib/brewing/index.svelte.js b/packages/chart/src/lib/brewing/index.svelte.js
index 516804073..9025bda6d 100644
--- a/packages/chart/src/lib/brewing/index.svelte.js
+++ b/packages/chart/src/lib/brewing/index.svelte.js
@@ -1,214 +1,202 @@
-import { createDimensions, updateDimensions } from './dimensions.svelte.js';
-import { createScales, getOrigin } from './scales.svelte.js';
-import { createBars, filterBars, createGroupedBars } from './bars.svelte.js';
-import { 
-  createXAxis, 
-  createYAxis, 
-  createGrid, 
-  createTickAttributes 
-} from './axes.svelte.js';
-import { 
-  createLegend, 
-  filterByLegend, 
-  createLegendItemAttributes 
-} from './legends.svelte.js';
+import { createDimensions, updateDimensions } from './dimensions.svelte.js'
+import { createScales, getOrigin } from './scales.svelte.js'
+import { createBars, filterBars, createGroupedBars } from './bars.svelte.js'
+import { createXAxis, createYAxis, createGrid, createTickAttributes } from './axes.svelte.js'
+import { createLegend, filterByLegend, createLegendItemAttributes } from './legends.svelte.js'
 
 /**
  * Chart Brewing - A collection of pure functions for chart data preparation
  */
 export {
-  // Dimensions
-  createDimensions,
-  updateDimensions,
-  
-  // Scales
-  createScales,
-  getOrigin,
-  
-  // Bars
-  createBars,
-  filterBars,
-  createGroupedBars,
-  
-  // Axes
-  createXAxis,
-  createYAxis,
-  createGrid,
-  createTickAttributes,
-  
-  // Legends
-  createLegend,
-  filterByLegend,
-  createLegendItemAttributes
-};
+	// Dimensions
+	createDimensions,
+	updateDimensions,
+
+	// Scales
+	createScales,
+	getOrigin,
+
+	// Bars
+	createBars,
+	filterBars,
+	createGroupedBars,
+
+	// Axes
+	createXAxis,
+	createYAxis,
+	createGrid,
+	createTickAttributes,
+
+	// Legends
+	createLegend,
+	filterByLegend,
+	createLegendItemAttributes
+}
 
 /**
  * Main class that manages chart state and provides access to all brewing functions
  */
 export class ChartBrewer {
-  #data = [];
-  #dimensions = createDimensions();
-  #scales = { x: null, y: null, color: null };
-  #fields = { x: null, y: null, color: null };
-  #options = {
-    padding: 0.2,
-    animationDuration: 300
-  };
-
-  /**
-   * Creates a new ChartBrewer instance
-   * 
-   * @param {Object} options Configuration options
-   */
-  constructor(options = {}) {
-    this.#dimensions = createDimensions(
-      options.width,
-      options.height,
-      options.margin
-    );
-    
-    if (options.padding !== undefined) this.#options.padding = options.padding;
-    if (options.animationDuration !== undefined) this.#options.animationDuration = options.animationDuration;
-  }
-
-  /**
-   * Sets the data for the chart
-   * 
-   * @param {Array} data Data array
-   * @returns {ChartBrewer} this for method chaining
-   */
-  setData(data) {
-    this.#data = Array.isArray(data) ? data : [];
-    return this;
-  }
-
-  /**
-   * Sets the field mappings for axes and color
-   * 
-   * @param {Object} fields Field mappings
-   * @returns {ChartBrewer} this for method chaining
-   */
-  setFields({ x, y, color }) {
-    if (x !== undefined) this.#fields.x = x;
-    if (y !== undefined) this.#fields.y = y;
-    if (color !== undefined) this.#fields.color = color;
-    return this;
-  }
-
-  /**
-   * Sets the dimensions of the chart
-   * 
-   * @param {Object} dimensions Chart dimensions
-   * @returns {ChartBrewer} this for method chaining
-   */
-  setDimensions({ width, height, margin }) {
-    this.#dimensions = updateDimensions(this.#dimensions, { width, height, margin });
-    return this;
-  }
-
-  /**
-   * Creates scales based on data and dimensions
-   * 
-   * @returns {ChartBrewer} this for method chaining
-   */
-  createScales() {
-    this.#scales = createScales(this.#data, this.#fields, this.#dimensions, {
-      padding: this.#options.padding
-    });
-    return this;
-  }
-
-  /**
-   * Creates bar data for rendering
-   * 
-   * @returns {Array} Data for rendering bars
-   */
-  createBars() {
-    return createBars(this.#data, this.#fields, this.#scales, this.#dimensions);
-  }
-
-  /**
-   * Creates x-axis tick data for rendering
-   * 
-   * @param {Object} options Axis options
-   * @returns {Object} Axis rendering data
-   */
-  createXAxis(options = {}) {
-    return createXAxis(this.#scales, this.#dimensions, options);
-  }
-
-  /**
-   * Creates y-axis tick data for rendering
-   * 
-   * @param {Object} options Axis options
-   * @returns {Object} Axis rendering data
-   */
-  createYAxis(options = {}) {
-    return createYAxis(this.#scales, this.#dimensions, options);
-  }
-
-  /**
-   * Creates grid line data for rendering
-   * 
-   * @param {Object} options Grid options
-   * @returns {Object} Grid rendering data
-   */
-  createGrid(options = {}) {
-    return createGrid(this.#scales, this.#dimensions, options);
-  }
-
-  /**
-   * Creates legend data for rendering
-   * 
-   * @param {Object} options Legend options
-   * @returns {Object} Legend rendering data
-   */
-  createLegend(options = {}) {
-    return createLegend(this.#data, this.#fields, this.#scales, this.#dimensions, options);
-  }
-
-  /**
-   * Gets all chart dimensions
-   * 
-   * @returns {Object} Chart dimensions
-   */
-  getDimensions() {
-    return { ...this.#dimensions };
-  }
-
-  /**
-   * Gets all chart scales
-   * 
-   * @returns {Object} Chart scales
-   */
-  getScales() {
-    return { ...this.#scales };
-  }
-
-  /**
-   * Gets the animation duration
-   * 
-   * @returns {number} Animation duration in ms
-   */
-  getAnimationDuration() {
-    return this.#options.animationDuration;
-  }
-
-  /**
-   * Gets the data being used
-   * 
-   * @returns {Array} Chart data
-   */
-  getData() {
-    return [...this.#data];
-  }
-  
-  /**
-   * Gets the fields configuration
-   * 
-   * @returns {Object} Fields configuration
-   */
-  getFields() {
-    return { ...this.#fields };
-  }
-}
\ No newline at end of file
+	#data = []
+	#dimensions = createDimensions()
+	#scales = { x: null, y: null, color: null }
+	#fields = { x: null, y: null, color: null }
+	#options = {
+		padding: 0.2,
+		animationDuration: 300
+	}
+
+	/**
+	 * Creates a new ChartBrewer instance
+	 *
+	 * @param {Object} options Configuration options
+	 */
+	constructor(options = {}) {
+		this.#dimensions = createDimensions(options.width, options.height, options.margin)
+
+		if (options.padding !== undefined) this.#options.padding = options.padding
+		if (options.animationDuration !== undefined)
+			this.#options.animationDuration = options.animationDuration
+	}
+
+	/**
+	 * Sets the data for the chart
+	 *
+	 * @param {Array} data Data array
+	 * @returns {ChartBrewer} this for method chaining
+	 */
+	setData(data) {
+		this.#data = Array.isArray(data) ? data : []
+		return this
+	}
+
+	/**
+	 * Sets the field mappings for axes and color
+	 *
+	 * @param {Object} fields Field mappings
+	 * @returns {ChartBrewer} this for method chaining
+	 */
+	setFields({ x, y, color }) {
+		if (x !== undefined) this.#fields.x = x
+		if (y !== undefined) this.#fields.y = y
+		if (color !== undefined) this.#fields.color = color
+		return this
+	}
+
+	/**
+	 * Sets the dimensions of the chart
+	 *
+	 * @param {Object} dimensions Chart dimensions
+	 * @returns {ChartBrewer} this for method chaining
+	 */
+	setDimensions({ width, height, margin }) {
+		this.#dimensions = updateDimensions(this.#dimensions, { width, height, margin })
+		return this
+	}
+
+	/**
+	 * Creates scales based on data and dimensions
+	 *
+	 * @returns {ChartBrewer} this for method chaining
+	 */
+	createScales() {
+		this.#scales = createScales(this.#data, this.#fields, this.#dimensions, {
+			padding: this.#options.padding
+		})
+		return this
+	}
+
+	/**
+	 * Creates bar data for rendering
+	 *
+	 * @returns {Array} Data for rendering bars
+	 */
+	createBars() {
+		return createBars(this.#data, this.#fields, this.#scales, this.#dimensions)
+	}
+
+	/**
+	 * Creates x-axis tick data for rendering
+	 *
+	 * @param {Object} options Axis options
+	 * @returns {Object} Axis rendering data
+	 */
+	createXAxis(options = {}) {
+		return createXAxis(this.#scales, this.#dimensions, options)
+	}
+
+	/**
+	 * Creates y-axis tick data for rendering
+	 *
+	 * @param {Object} options Axis options
+	 * @returns {Object} Axis rendering data
+	 */
+	createYAxis(options = {}) {
+		return createYAxis(this.#scales, this.#dimensions, options)
+	}
+
+	/**
+	 * Creates grid line data for rendering
+	 *
+	 * @param {Object} options Grid options
+	 * @returns {Object} Grid rendering data
+	 */
+	createGrid(options = {}) {
+		return createGrid(this.#scales, this.#dimensions, options)
+	}
+
+	/**
+	 * Creates legend data for rendering
+	 *
+	 * @param {Object} options Legend options
+	 * @returns {Object} Legend rendering data
+	 */
+	createLegend(options = {}) {
+		return createLegend(this.#data, this.#fields, this.#scales, this.#dimensions, options)
+	}
+
+	/**
+	 * Gets all chart dimensions
+	 *
+	 * @returns {Object} Chart dimensions
+	 */
+	getDimensions() {
+		return { ...this.#dimensions }
+	}
+
+	/**
+	 * Gets all chart scales
+	 *
+	 * @returns {Object} Chart scales
+	 */
+	getScales() {
+		return { ...this.#scales }
+	}
+
+	/**
+	 * Gets the animation duration
+	 *
+	 * @returns {number} Animation duration in ms
+	 */
+	getAnimationDuration() {
+		return this.#options.animationDuration
+	}
+
+	/**
+	 * Gets the data being used
+	 *
+	 * @returns {Array} Chart data
+	 */
+	getData() {
+		return [...this.#data]
+	}
+
+	/**
+	 * Gets the fields configuration
+	 *
+	 * @returns {Object} Fields configuration
+	 */
+	getFields() {
+		return { ...this.#fields }
+	}
+}
diff --git a/packages/chart/src/lib/brewing/legends.svelte.js b/packages/chart/src/lib/brewing/legends.svelte.js
index ff376d3d0..b41efea47 100644
--- a/packages/chart/src/lib/brewing/legends.svelte.js
+++ b/packages/chart/src/lib/brewing/legends.svelte.js
@@ -1,4 +1,4 @@
-import { } from './types.js';
+import {} from './types.js'
 
 /**
  * @typedef {import('./types').LegendItem} LegendItem
@@ -10,7 +10,7 @@ import { } from './types.js';
 
 /**
  * Creates legend data for rendering
- * 
+ *
  * @param {Array} data - Chart data
  * @param {Object} fields - Field mappings
  * @param {string} fields.color - Color field
@@ -25,71 +25,70 @@ import { } from './types.js';
  * @returns {LegendData} Legend rendering data
  */
 export function createLegend(data, fields, scales, dimensions, options = {}) {
-  if (!data || !fields.color || !scales.color) {
-    return { items: [], title: '', transform: 'translate(0, 0)' };
-  }
-  
-  const { title = '', align = 'right', shape = 'rect', markerSize = 10 } = options;
-  
-  // Get unique color values
-  const colorValues = [...new Set(data.map(d => d[fields.color]))];
-  
-  // Create legend items
-  const items = colorValues.map((value, index) => ({
-    value,
-    color: scales.color(value),
-    y: index * (markerSize + 5) + (title ? 15 : 0),
-    shape,
-    markerSize
-  }));
-  
-  // Calculate approximate width for alignment
-  const approximateWidth = Math.max(
-    ...colorValues.map(v => v.toString().length)
-  ) * 8 + markerSize + 10;
-  
-  // Calculate position based on alignment
-  let x = 0;
-  if (align === 'right') {
-    x = dimensions.innerWidth - approximateWidth;
-  } else if (align === 'center') {
-    x = (dimensions.innerWidth - approximateWidth) / 2;
-  }
-  
-  return {
-    items,
-    title,
-    transform: `translate(${x}, 0)`
-  };
+	if (!data || !fields.color || !scales.color) {
+		return { items: [], title: '', transform: 'translate(0, 0)' }
+	}
+
+	const { title = '', align = 'right', shape = 'rect', markerSize = 10 } = options
+
+	// Get unique color values
+	const colorValues = [...new Set(data.map((d) => d[fields.color]))]
+
+	// Create legend items
+	const items = colorValues.map((value, index) => ({
+		value,
+		color: scales.color(value),
+		y: index * (markerSize + 5) + (title ? 15 : 0),
+		shape,
+		markerSize
+	}))
+
+	// Calculate approximate width for alignment
+	const approximateWidth =
+		Math.max(...colorValues.map((v) => v.toString().length)) * 8 + markerSize + 10
+
+	// Calculate position based on alignment
+	let x = 0
+	if (align === 'right') {
+		x = dimensions.innerWidth - approximateWidth
+	} else if (align === 'center') {
+		x = (dimensions.innerWidth - approximateWidth) / 2
+	}
+
+	return {
+		items,
+		title,
+		transform: `translate(${x}, 0)`
+	}
 }
 
 /**
  * Filter data based on legend selection
- * 
+ *
  * @param {Array} data - Chart data
  * @param {string} colorField - Field used for color mapping
  * @param {Array} selectedValues - Selected legend values
  * @returns {Array} Filtered data
  */
 export function filterByLegend(data, colorField, selectedValues) {
-  if (!selectedValues || selectedValues.length === 0) {
-    return data;
-  }
-  
-  return data.filter(d => selectedValues.includes(d[colorField]));
+	if (!selectedValues || selectedValues.length === 0) {
+		return data
+	}
+
+	return data.filter((d) => selectedValues.includes(d[colorField]))
 }
 
 /**
  * Create attributes for legend items
- * 
+ *
  * @param {LegendItem} item - Legend item
  * @returns {Object} Attributes for the legend item
  */
 export function createLegendItemAttributes(item) {
-  return {
-    'data-plot-legend-item': '',
-    'transform': `translate(0, ${item.y})`,
-    'role': 'img',
-    'aria-label': `Legend item for ${item.value}`
-  };
-}
\ No newline at end of file
+	return {
+		'data-plot-legend-item': '',
+		transform: `translate(0, ${item.y})`,
+		role: 'img',
+		'aria-label': `Legend item for ${item.value}`
+	}
+}
diff --git a/packages/chart/src/lib/brewing/scales.svelte.js b/packages/chart/src/lib/brewing/scales.svelte.js
index 1d4d98724..203a7300b 100644
--- a/packages/chart/src/lib/brewing/scales.svelte.js
+++ b/packages/chart/src/lib/brewing/scales.svelte.js
@@ -1,7 +1,7 @@
-import { min, max } from 'd3-array';
-import { scaleBand, scaleLinear, scaleTime, scaleOrdinal } from 'd3-scale';
-import { schemeCategory10 } from 'd3-scale-chromatic';
-import { } from './types.js';
+import { min, max } from 'd3-array'
+import { scaleBand, scaleLinear, scaleTime, scaleOrdinal } from 'd3-scale'
+import { schemeCategory10 } from 'd3-scale-chromatic'
+import {} from './types.js'
 
 /**
  * @typedef {import('./types').ChartScales} ChartScales
@@ -11,7 +11,7 @@ import { } from './types.js';
 
 /**
  * Creates scales based on data, fields, and dimensions
- * 
+ *
  * @param {Array} data - Chart data
  * @param {ScaleFields} fields - Field mappings
  * @param {Object} dimensions - Chart dimensions
@@ -20,75 +20,66 @@ import { } from './types.js';
  * @returns {ChartScales} Chart scales
  */
 export function createScales(data, fields, dimensions, options = {}) {
-  const scales = {
-    x: null,
-    y: null,
-    color: null
-  };
-  
-  if (!data || data.length === 0 || !fields.x || !fields.y) {
-    return scales;
-  }
-  
-  const padding = options.padding !== undefined ? options.padding : 0.2;
-  
-  // Extract values
-  const xValues = data.map(d => d[fields.x]);
-  const yValues = data.map(d => d[fields.y]);
-  
-  // Determine x scale type
-  const xIsDate = xValues.some(v => v instanceof Date);
-  const xIsNumeric = !xIsDate && xValues.every(v => !isNaN(parseFloat(v)));
-  
-  // Create x scale based on data type
-  if (xIsDate) {
-    scales.x = scaleTime()
-      .domain([min(xValues), max(xValues)])
-      .range([0, dimensions.innerWidth])
-      .nice();
-  } else if (xIsNumeric) {
-    scales.x = scaleLinear()
-      .domain([min([0, ...xValues]), max(xValues)])
-      .range([0, dimensions.innerWidth])
-      .nice();
-  } else {
-    scales.x = scaleBand()
-      .domain(xValues)
-      .range([0, dimensions.innerWidth])
-      .padding(padding);
-  }
-  
-  // Create y scale
-  scales.y = scaleLinear()
-    .domain([0, max(yValues) * 1.1]) // Add 10% padding on top
-    .nice()
-    .range([dimensions.innerHeight, 0]);
-  
-  // Create color scale if color field is set
-  if (fields.color) {
-    const colorValues = [...new Set(data.map(d => d[fields.color]))];
-    scales.color = scaleOrdinal()
-      .domain(colorValues)
-      .range(schemeCategory10);
-  }
-  
-  return scales;
+	const scales = {
+		x: null,
+		y: null,
+		color: null
+	}
+
+	if (!data || data.length === 0 || !fields.x || !fields.y) {
+		return scales
+	}
+
+	const padding = options.padding !== undefined ? options.padding : 0.2
+
+	// Extract values
+	const xValues = data.map((d) => d[fields.x])
+	const yValues = data.map((d) => d[fields.y])
+
+	// Determine x scale type
+	const xIsDate = xValues.some((v) => v instanceof Date)
+	const xIsNumeric = !xIsDate && xValues.every((v) => !isNaN(parseFloat(v)))
+
+	// Create x scale based on data type
+	if (xIsDate) {
+		scales.x = scaleTime()
+			.domain([min(xValues), max(xValues)])
+			.range([0, dimensions.innerWidth])
+			.nice()
+	} else if (xIsNumeric) {
+		scales.x = scaleLinear()
+			.domain([min([0, ...xValues]), max(xValues)])
+			.range([0, dimensions.innerWidth])
+			.nice()
+	} else {
+		scales.x = scaleBand().domain(xValues).range([0, dimensions.innerWidth]).padding(padding)
+	}
+
+	// Create y scale
+	scales.y = scaleLinear()
+		.domain([0, max(yValues) * 1.1]) // Add 10% padding on top
+		.nice()
+		.range([dimensions.innerHeight, 0])
+
+	// Create color scale if color field is set
+	if (fields.color) {
+		const colorValues = [...new Set(data.map((d) => d[fields.color]))]
+		scales.color = scaleOrdinal().domain(colorValues).range(schemeCategory10)
+	}
+
+	return scales
 }
 
 /**
  * Gets the origin coordinates for the axes
- * 
+ *
  * @param {ChartScales} scales - Chart scales
  * @param {Object} dimensions - Chart dimensions
  * @returns {Object} Origin coordinates
  */
 export function getOrigin(scales, dimensions) {
-  return {
-    x: scales.y ? scales.y(0) : dimensions.innerHeight,
-    y: scales.x ? (
-      scales.x.ticks 
-        ? scales.x(Math.max(0, min(scales.x.domain())))
-        : 0
-    ) : 0
-  };
-}
\ No newline at end of file
+	return {
+		x: scales.y ? scales.y(0) : dimensions.innerHeight,
+		y: scales.x ? (scales.x.ticks ? scales.x(Math.max(0, min(scales.x.domain()))) : 0) : 0
+	}
+}
diff --git a/packages/chart/src/lib/brewing/types.js b/packages/chart/src/lib/brewing/types.js
index 75c2d7df3..ed1413935 100644
--- a/packages/chart/src/lib/brewing/types.js
+++ b/packages/chart/src/lib/brewing/types.js
@@ -50,7 +50,7 @@
  * @property {number} x - X position
  * @property {number} y - Y position
  * @property {number} width - Width of the bar
- * @property {number} height - Height of the bar 
+ * @property {number} height - Height of the bar
  * @property {string} color - Color of the bar
  */
 
@@ -70,4 +70,4 @@
  * @property {string} transform - SVG transform attribute value
  */
 
-export {};
\ No newline at end of file
+export {}
diff --git a/packages/chart/src/lib/context.js b/packages/chart/src/lib/context.js
index d53e329e5..b4ff13ace 100644
--- a/packages/chart/src/lib/context.js
+++ b/packages/chart/src/lib/context.js
@@ -1,122 +1,132 @@
-import { getContext, setContext } from 'svelte';
-import { writable, derived } from 'svelte/store';
-import * as d3 from 'd3';
+import { getContext, setContext } from 'svelte'
+import { writable, derived } from 'svelte/store'
+import * as d3 from 'd3'
 
-const CHART_CONTEXT = 'chart-context';
+const CHART_CONTEXT = 'chart-context'
 
 /**
  * Creates chart context and provides it to child components
- * 
+ *
  * @param {Object} options Initial chart options
  * @returns {Object} Chart context with all stores and methods
  */
 export function createChartContext(options = {}) {
-  // Default config values
-  const defaultOptions = {
-    width: 600,
-    height: 400,
-    margin: { top: 20, right: 30, bottom: 40, left: 50 },
-    padding: { top: 0, right: 0, bottom: 0, left: 0 },
-    responsive: true,
-    animationDuration: 300,
-    data: []
-  };
-  
-  // Merge options with defaults
-  const config = { ...defaultOptions, ...options };
-  
-  // Create stores for reactive properties
-  const dimensions = writable({
-    width: config.width,
-    height: config.height,
-    margin: { ...config.margin },
-    padding: { ...config.padding }
-  });
-  
-  const data = writable(config.data);
-  const scales = writable({});
-  
-  // Compute inner dimensions (subtracting margins)
-  const innerDimensions = derived(dimensions, $dimensions => {
-    return {
-      width: $dimensions.width - $dimensions.margin.left - $dimensions.margin.right - $dimensions.padding.left - $dimensions.padding.right,
-      height: $dimensions.height - $dimensions.margin.top - $dimensions.margin.bottom - $dimensions.padding.top - $dimensions.padding.bottom
-    };
-  });
-  
-  // Store for plot elements (bars, lines, etc.)
-  const plots = writable([]);
-  
-  // Store for axes
-  const axes = writable({
-    x: null,
-    y: null
-  });
-  
-  const legend = writable({
-    enabled: false,
-    items: []
-  });
-  
-  // Helper to add a new plot
-  function addPlot(plot) {
-    plots.update(currentPlots => [...currentPlots, plot]);
-    return () => {
-      plots.update(currentPlots => currentPlots.filter(p => p !== plot));
-    };
-  }
-  
-  // Helper to update scales based on data and dimensions
-  function updateScales(xKey, yKey, colorKey = null) {
-    return derived([data, innerDimensions], ([$data, $innerDimensions]) => {
-      if (!$data || $data.length === 0) return null;
-      
-      const xScale = d3.scaleBand()
-        .domain($data.map(d => d[xKey]))
-        .range([0, $innerDimensions.width])
-        .padding(0.2);
-      
-      const yScale = d3.scaleLinear()
-        .domain([0, d3.max($data, d => d[yKey])])
-        .nice()
-        .range([$innerDimensions.height, 0]);
-      
-      let colorScale = null;
-      
-      if (colorKey) {
-        const uniqueCategories = [...new Set($data.map(d => d[colorKey]))];
-        colorScale = d3.scaleOrdinal()
-          .domain(uniqueCategories)
-          .range(d3.schemeCategory10);
-      }
-      
-      return { xScale, yScale, colorScale };
-    });
-  }
-  
-  // Create and set context
-  const chartContext = {
-    dimensions,
-    innerDimensions,
-    data,
-    scales,
-    plots,
-    axes,
-    legend,
-    addPlot,
-    updateScales
-  };
-  
-  setContext(CHART_CONTEXT, chartContext);
-  
-  return chartContext;
+	// Default config values
+	const defaultOptions = {
+		width: 600,
+		height: 400,
+		margin: { top: 20, right: 30, bottom: 40, left: 50 },
+		padding: { top: 0, right: 0, bottom: 0, left: 0 },
+		responsive: true,
+		animationDuration: 300,
+		data: []
+	}
+
+	// Merge options with defaults
+	const config = { ...defaultOptions, ...options }
+
+	// Create stores for reactive properties
+	const dimensions = writable({
+		width: config.width,
+		height: config.height,
+		margin: { ...config.margin },
+		padding: { ...config.padding }
+	})
+
+	const data = writable(config.data)
+	const scales = writable({})
+
+	// Compute inner dimensions (subtracting margins)
+	const innerDimensions = derived(dimensions, ($dimensions) => {
+		return {
+			width:
+				$dimensions.width -
+				$dimensions.margin.left -
+				$dimensions.margin.right -
+				$dimensions.padding.left -
+				$dimensions.padding.right,
+			height:
+				$dimensions.height -
+				$dimensions.margin.top -
+				$dimensions.margin.bottom -
+				$dimensions.padding.top -
+				$dimensions.padding.bottom
+		}
+	})
+
+	// Store for plot elements (bars, lines, etc.)
+	const plots = writable([])
+
+	// Store for axes
+	const axes = writable({
+		x: null,
+		y: null
+	})
+
+	const legend = writable({
+		enabled: false,
+		items: []
+	})
+
+	// Helper to add a new plot
+	function addPlot(plot) {
+		plots.update((currentPlots) => [...currentPlots, plot])
+		return () => {
+			plots.update((currentPlots) => currentPlots.filter((p) => p !== plot))
+		}
+	}
+
+	// Helper to update scales based on data and dimensions
+	function updateScales(xKey, yKey, colorKey = null) {
+		return derived([data, innerDimensions], ([$data, $innerDimensions]) => {
+			if (!$data || $data.length === 0) return null
+
+			const xScale = d3
+				.scaleBand()
+				.domain($data.map((d) => d[xKey]))
+				.range([0, $innerDimensions.width])
+				.padding(0.2)
+
+			const yScale = d3
+				.scaleLinear()
+				.domain([0, d3.max($data, (d) => d[yKey])])
+				.nice()
+				.range([$innerDimensions.height, 0])
+
+			let colorScale = null
+
+			if (colorKey) {
+				const uniqueCategories = [...new Set($data.map((d) => d[colorKey]))]
+				colorScale = d3.scaleOrdinal().domain(uniqueCategories).range(d3.schemeCategory10)
+			}
+
+			return { xScale, yScale, colorScale }
+		})
+	}
+
+	// Create and set context
+	const chartContext = {
+		dimensions,
+		innerDimensions,
+		data,
+		scales,
+		plots,
+		axes,
+		legend,
+		addPlot,
+		updateScales
+	}
+
+	setContext(CHART_CONTEXT, chartContext)
+
+	return chartContext
 }
 
 /**
  * Gets chart context provided by parent component
- * 
+ *
  * @returns {Object} Chart context
  */
 export function getChartContext() {
-  return getContext(CHART_CONTEXT);
-}
\ No newline at end of file
+	return getContext(CHART_CONTEXT)
+}
diff --git a/packages/chart/src/lib/scales.svelte.js b/packages/chart/src/lib/scales.svelte.js
index 6534c25d7..782737ef2 100644
--- a/packages/chart/src/lib/scales.svelte.js
+++ b/packages/chart/src/lib/scales.svelte.js
@@ -1,10 +1,10 @@
-import { scaleBand, scaleLinear, scaleTime, scaleOrdinal } from 'd3-scale';
-import { schemeCategory10 } from 'd3-scale-chromatic';
-import { min, max } from 'd3-array';
+import { scaleBand, scaleLinear, scaleTime, scaleOrdinal } from 'd3-scale'
+import { schemeCategory10 } from 'd3-scale-chromatic'
+import { min, max } from 'd3-array'
 
 /**
  * Creates appropriate scales based on data and dimensions
- * 
+ *
  * @param {Array} data The dataset
  * @param {string} xKey Field to use for x-axis
  * @param {string} yKey Field to use for y-axis
@@ -13,84 +13,77 @@ import { min, max } from 'd3-array';
  * @returns {Object} Object containing xScale, yScale, and colorScale
  */
 export function createScales(data, xKey, yKey, dimensions, options = {}) {
-  if (!data || data.length === 0) return {};
-  
-  const { colorKey = null, padding = 0.2 } = options;
-  
-  // Determine if x values are numeric, dates, or categorical
-  const xValues = data.map(d => d[xKey]);
-  const xIsDate = xValues.some(v => v instanceof Date);
-  const xIsNumeric = !xIsDate && xValues.every(v => !isNaN(parseFloat(v)));
-  
-  // Create x-scale based on data type
-  let xScale;
-  if (xIsDate) {
-    xScale = scaleTime()
-      .domain([min(xValues), max(xValues)])
-      .range([0, dimensions.innerWidth])
-      .nice();
-  } else if (xIsNumeric) {
-    xScale = scaleLinear()
-      .domain([min([0, ...xValues]), max(xValues)])
-      .range([0, dimensions.innerWidth])
-      .nice();
-  } else {
-    xScale = scaleBand()
-      .domain(xValues)
-      .range([0, dimensions.innerWidth])
-      .padding(padding);
-  }
-  
-  // Create y-scale
-  const yValues = data.map(d => d[yKey]);
-  const yScale = scaleLinear()
-    .domain([0, max(yValues) * 1.1]) // Add 10% padding on top
-    .nice()
-    .range([dimensions.innerHeight, 0]);
-  
-  // Create color scale if colorKey is provided
-  let colorScale = null;
-  if (colorKey) {
-    const uniqueCategories = [...new Set(data.map(d => d[colorKey]))];
-    colorScale = scaleOrdinal()
-      .domain(uniqueCategories)
-      .range(schemeCategory10);
-  }
-  
-  return { xScale, yScale, colorScale };
+	if (!data || data.length === 0) return {}
+
+	const { colorKey = null, padding = 0.2 } = options
+
+	// Determine if x values are numeric, dates, or categorical
+	const xValues = data.map((d) => d[xKey])
+	const xIsDate = xValues.some((v) => v instanceof Date)
+	const xIsNumeric = !xIsDate && xValues.every((v) => !isNaN(parseFloat(v)))
+
+	// Create x-scale based on data type
+	let xScale
+	if (xIsDate) {
+		xScale = scaleTime()
+			.domain([min(xValues), max(xValues)])
+			.range([0, dimensions.innerWidth])
+			.nice()
+	} else if (xIsNumeric) {
+		xScale = scaleLinear()
+			.domain([min([0, ...xValues]), max(xValues)])
+			.range([0, dimensions.innerWidth])
+			.nice()
+	} else {
+		xScale = scaleBand().domain(xValues).range([0, dimensions.innerWidth]).padding(padding)
+	}
+
+	// Create y-scale
+	const yValues = data.map((d) => d[yKey])
+	const yScale = scaleLinear()
+		.domain([0, max(yValues) * 1.1]) // Add 10% padding on top
+		.nice()
+		.range([dimensions.innerHeight, 0])
+
+	// Create color scale if colorKey is provided
+	let colorScale = null
+	if (colorKey) {
+		const uniqueCategories = [...new Set(data.map((d) => d[colorKey]))]
+		colorScale = scaleOrdinal().domain(uniqueCategories).range(schemeCategory10)
+	}
+
+	return { xScale, yScale, colorScale }
 }
 
 /**
  * Calculates the actual chart dimensions after applying margins
- * 
+ *
  * @param {Object} dimensions Original dimensions
  * @returns {Object} Dimensions with calculated inner width and height
  */
 export function calculateChartDimensions(width, height, margin) {
-  return {
-    width,
-    height,
-    margin,
-    innerWidth: width - margin.left - margin.right,
-    innerHeight: height - margin.top - margin.bottom
-  };
+	return {
+		width,
+		height,
+		margin,
+		innerWidth: width - margin.left - margin.right,
+		innerHeight: height - margin.top - margin.bottom
+	}
 }
 
 /**
  * Gets the axis origin value
- * 
+ *
  * @param {Object} scale D3 scale
  * @returns {number} Origin value
  */
 export function getOriginValue(scale) {
-  return scale.ticks
-    ? scale(Math.max(0, min(scale.domain())))
-    : scale.range()[0];
+	return scale.ticks ? scale(Math.max(0, min(scale.domain()))) : scale.range()[0]
 }
 
 /**
  * Creates axis ticks
- * 
+ *
  * @param {Object} scale D3 scale
  * @param {string} axis Axis type ('x' or 'y')
  * @param {number} count Number of ticks
@@ -98,32 +91,32 @@ export function getOriginValue(scale) {
  * @returns {Array} Array of tick objects
  */
 export function createTicks(scale, axis, count = null, fontSize = 12) {
-  const [minRange, maxRange] = scale.range();
-  let ticks = [];
-  let offset = 0;
+	const [minRange, maxRange] = scale.range()
+	let ticks = []
+	let offset = 0
 
-  // Calculate default count based on available space
-  if (!count) {
-    count = Math.abs((maxRange - minRange) / (fontSize * (axis === 'y' ? 3 : 6)));
-  }
+	// Calculate default count based on available space
+	if (!count) {
+		count = Math.abs((maxRange - minRange) / (fontSize * (axis === 'y' ? 3 : 6)))
+	}
 
-  // Get ticks based on scale type
-  if (scale.ticks) {
-    ticks = scale.ticks(Math.round(count));
-  } else {
-    offset = scale.bandwidth() / 2;
-    count = Math.min(Math.round(count), scale.domain().length);
+	// Get ticks based on scale type
+	if (scale.ticks) {
+		ticks = scale.ticks(Math.round(count))
+	} else {
+		offset = scale.bandwidth() / 2
+		count = Math.min(Math.round(count), scale.domain().length)
 
-    ticks = scale.domain();
-    if (count < scale.domain().length) {
-      const step = Math.ceil(scale.domain().length / count);
-      ticks = ticks.filter((_, i) => i % step === 0);
-    }
-  }
+		ticks = scale.domain()
+		if (count < scale.domain().length) {
+			const step = Math.ceil(scale.domain().length / count)
+			ticks = ticks.filter((_, i) => i % step === 0)
+		}
+	}
 
-  // Format ticks with positions
-  return ticks.map(t => ({
-    value: t,
-    position: scale(t) + (axis === 'x' ? offset : 0)
-  }));
-}
\ No newline at end of file
+	// Format ticks with positions
+	return ticks.map((t) => ({
+		value: t,
+		position: scale(t) + (axis === 'x' ? offset : 0)
+	}))
+}
diff --git a/packages/chart/src/lib/utils.js b/packages/chart/src/lib/utils.js
index deedd6ba8..e0f77d6b0 100644
--- a/packages/chart/src/lib/utils.js
+++ b/packages/chart/src/lib/utils.js
@@ -1,10 +1,10 @@
-import { scaleBand, scaleLinear, scaleOrdinal } from 'd3-scale';
-import { schemeCategory10 } from 'd3-scale-chromatic';
-import { max } from 'd3-array';
+import { scaleBand, scaleLinear, scaleOrdinal } from 'd3-scale'
+import { schemeCategory10 } from 'd3-scale-chromatic'
+import { max } from 'd3-array'
 
 /**
  * Creates appropriate scales based on data and dimensions
- * 
+ *
  * @param {Array} data The dataset
  * @param {string} xKey Field to use for x-axis
  * @param {string} yKey Field to use for y-axis
@@ -14,44 +14,42 @@ import { max } from 'd3-array';
  * @returns {Object} Object containing xScale, yScale, and colorScale
  */
 export function createScales(data, xKey, yKey, dimensions, options = {}) {
-  if (!data || data.length === 0) return {};
-  
-  const xScale = scaleBand()
-    .domain(data.map(d => d[xKey]))
-    .range([0, dimensions.width])
-    .padding(0.2);
-  
-  const yScale = scaleLinear()
-    .domain([0, max(data, d => d[yKey]) * 1.1]) // Add 10% padding on top
-    .nice()
-    .range([dimensions.height, 0]);
-  
-  let colorScale = null;
-  
-  if (options.colorKey) {
-    const uniqueCategories = [...new Set(data.map(d => d[options.colorKey]))];
-    colorScale = scaleOrdinal()
-      .domain(uniqueCategories)
-      .range(schemeCategory10);
-  }
-  
-  return { xScale, yScale, colorScale };
+	if (!data || data.length === 0) return {}
+
+	const xScale = scaleBand()
+		.domain(data.map((d) => d[xKey]))
+		.range([0, dimensions.width])
+		.padding(0.2)
+
+	const yScale = scaleLinear()
+		.domain([0, max(data, (d) => d[yKey]) * 1.1]) // Add 10% padding on top
+		.nice()
+		.range([dimensions.height, 0])
+
+	let colorScale = null
+
+	if (options.colorKey) {
+		const uniqueCategories = [...new Set(data.map((d) => d[options.colorKey]))]
+		colorScale = scaleOrdinal().domain(uniqueCategories).range(schemeCategory10)
+	}
+
+	return { xScale, yScale, colorScale }
 }
 
 /**
  * Calculates the actual chart dimensions after applying margins
- * 
+ *
  * @param {Object} dimensions Original dimensions
  * @returns {Object} Dimensions with calculated inner width and height
  */
 export function calculateChartDimensions(dimensions) {
-  const { width, height, margin } = dimensions;
-  
-  return {
-    ...dimensions,
-    innerWidth: width - margin.left - margin.right,
-    innerHeight: height - margin.top - margin.bottom
-  };
+	const { width, height, margin } = dimensions
+
+	return {
+		...dimensions,
+		innerWidth: width - margin.left - margin.right,
+		innerHeight: height - margin.top - margin.bottom
+	}
 }
 
 /**
@@ -61,75 +59,75 @@ export function calculateChartDimensions(dimensions) {
  * @returns {Array} Normalized data array
  */
 export function normalizeData(inputData) {
-  if (!inputData) return [];
-  
-  // If it's a dataset class instance, call select() to get the data
-  if (inputData.select && typeof inputData.select === 'function') {
-    return inputData.select();
-  }
-  
-  // If it's already an array, return as is
-  if (Array.isArray(inputData)) {
-    return inputData;
-  }
-  
-  return [];
+	if (!inputData) return []
+
+	// If it's a dataset class instance, call select() to get the data
+	if (inputData.select && typeof inputData.select === 'function') {
+		return inputData.select()
+	}
+
+	// If it's already an array, return as is
+	if (Array.isArray(inputData)) {
+		return inputData
+	}
+
+	return []
 }
 
 /**
  * Generates a unique ID for SVG elements
- * 
+ *
  * @param {string} prefix Prefix for the ID
  * @returns {string} A unique ID
  */
 export function uniqueId(prefix = 'chart') {
-  return `${prefix}-${Math.random().toString(36).substring(2, 10)}`;
+	return `${prefix}-${Math.random().toString(36).substring(2, 10)}`
 }
 
 /**
  * Formats tooltip content for a data point
- * 
+ *
  * @param {Object} d Data point
  * @param {Object} options Tooltip format options
  * @returns {string} Formatted tooltip HTML content
  */
 export function formatTooltipContent(d, options = {}) {
-  if (!d) return '';
-  
-  const { xKey, yKey, xFormat, yFormat } = options;
-  
-  if (xKey && yKey) {
-    const xValue = d[xKey];
-    const yValue = d[yKey];
-    
-    const xFormatted = xFormat ? xFormat(xValue) : xValue;
-    const yFormatted = yFormat ? yFormat(yValue) : yValue;
-    
-    return `${xKey}: ${xFormatted}<br>${yKey}: ${yFormatted}`;
-  }
-  
-  return Object.entries(d)
-    .map(([key, value]) => `${key}: ${value}`)
-    .join('<br>');
+	if (!d) return ''
+
+	const { xKey, yKey, xFormat, yFormat } = options
+
+	if (xKey && yKey) {
+		const xValue = d[xKey]
+		const yValue = d[yKey]
+
+		const xFormatted = xFormat ? xFormat(xValue) : xValue
+		const yFormatted = yFormat ? yFormat(yValue) : yValue
+
+		return `${xKey}: ${xFormatted}<br>${yKey}: ${yFormatted}`
+	}
+
+	return Object.entries(d)
+		.map(([key, value]) => `${key}: ${value}`)
+		.join('<br>')
 }
 
 /**
  * Generates a tooltip formatter function
- * 
+ *
  * @param {Object} options Tooltip format options
  * @returns {Function} A function that formats tooltip content
  */
 export function createTooltipFormatter(options = {}) {
-  return (d) => formatTooltipContent(d, options);
+	return (d) => formatTooltipContent(d, options)
 }
 
 /**
  * Calculates the transform attribute for SVG elements
- * 
+ *
  * @param {number} x X position
  * @param {number} y Y position
  * @returns {string} Transform attribute value
  */
 export function transform(x, y) {
-  return `translate(${x}, ${y})`;
-}
\ No newline at end of file
+	return `translate(${x}, ${y})`
+}