### LineChart: Basic Labels Example

Source: https://next.layerchart.com/llms.txt

A fundamental example illustrating the basic usage of labels in a LineChart. This serves as a starting point for understanding label configurations.

```javascript
fetch("/docs/components/LineChart/labels/llms.txt").then(async (r) => {
  const code = await r.text();
  document.getElementById("code-example-3").innerText = code;
});
```

--------------------------------

### PieChart Component Examples

Source: https://next.layerchart.com/llms.txt

This section provides examples for the LayerChart PieChart component. It covers configurations for arc properties, basic chart setup, color schemes, donut charts with text, and various legend configurations including custom labels, placement, responsiveness, and padding. These examples illustrate how to customize and utilize the PieChart component for detailed pie and donut visualizations.

```javascript
/* Example for PieChart/arc-props */
// Code to demonstrate arc properties in PieChart

```

```javascript
/* Example for PieChart/arc */
// Code to demonstrate basic arc in PieChart

```

```javascript
/* Example for PieChart/basic */
// Code to demonstrate basic PieChart setup

```

```javascript
/* Example for PieChart/colors-data-prop */
// Code to demonstrate colors using data prop in PieChart

```

```javascript
/* Example for PieChart/colors-interpolator */
// Code to demonstrate colors using interpolator in PieChart

```

```javascript
/* Example for PieChart/colors-scheme */
// Code to demonstrate colors using scheme in PieChart

```

```javascript
/* Example for PieChart/colors-variables */
// Code to demonstrate colors using variables in PieChart

```

```javascript
/* Example for PieChart/donut-with-text */
// Code to demonstrate donut chart with text in PieChart

```

```javascript
/* Example for PieChart/donut */
// Code to demonstrate basic donut chart in PieChart

```

```javascript
/* Example for PieChart/legend-custom-label */
// Code to demonstrate legend with custom labels in PieChart

```

```javascript
/* Example for PieChart/legend-placement */
// Code to demonstrate legend placement in PieChart

```

```javascript
/* Example for PieChart/legend-responsive */
// Code to demonstrate responsive legend in PieChart

```

```javascript
/* Example for PieChart/legend-with-padding */
// Code to demonstrate legend with padding in PieChart

```

```javascript
/* Example for PieChart/legend */
// Code to demonstrate basic legend in PieChart

```

```javascript
/* Example for PieChart/motion-spring */
// Code to demonstrate motion spring animation in PieChart

```

--------------------------------

### LineChart: Basic Series Example

Source: https://next.layerchart.com/llms.txt

A fundamental example demonstrating the basic rendering of series in a LineChart. This serves as a starting point for creating multi-series charts.

```javascript
fetch("/docs/components/LineChart/series/llms.txt").then(async (r) => {
  const code = await r.text();
  document.getElementById("code-example-34").innerText = code;
});
```

--------------------------------

### BrushContext Examples

Source: https://next.layerchart.com/docs/components/BrushContext/llms.txt

A collection of examples demonstrating various use cases and configurations of the BrushContext component.

```APIDOC
## BrushContext Examples

A collection of examples demonstrating various use cases and configurations of the BrushContext component.

### Example Links

- [basic](https://next.layerchart.com/docs/components/BrushContext/basic)
- [constant-labels](https://next.layerchart.com/docs/components/BrushContext/constant-labels)
- [handle-arrows](https://next.layerchart.com/docs/components/BrushContext/handle-arrows)
- [handle-labels](https://next.layerchart.com/docs/components/BrushContext/handle-labels)
- [integrated-brush-(both-axis-area)](https://next.layerchart.com/docs/components/BrushContext/integrated-brush-(both-axis-area))
- [integrated-brush-(x-axis)](https://next.layerchart.com/docs/components/BrushContext/integrated-brush-(x-axis))
- [integrated-brush-(y-axis)](https://next.layerchart.com/docs/components/BrushContext/integrated-brush-(y-axis))
- [minimap](https://next.layerchart.com/docs/components/BrushContext/minimap)
- [selection](https://next.layerchart.com/docs/components/BrushContext/selection)
- [separate-chart-(clip-data-y-axis)](https://next.layerchart.com/docs/components/BrushContext/separate-chart-(clip-data-y-axis))
- [separate-chart-(clip-data)](https://next.layerchart.com/docs/components/BrushContext/separate-chart-(clip-data))
- [separate-chart-(filter-data)](https://next.layerchart.com/docs/components/BrushContext/separate-chart-(filter-data))
- [simple-styling](https://next.layerchart.com/docs/components/BrushContext/simple-styling)
- [striped-background](https://next.layerchart.com/docs/components/BrushContext/striped-background)
- [sync-brushes-with-bind-xdomain](https://next.layerchart.com/docs/components/BrushContext/sync-brushes-with-bind-xdomain)
- [tooltip-interop](https://next.layerchart.com/docs/components/BrushContext/tooltip-interop)
```

--------------------------------

### Implementing a Rule Component in LayerChart

Source: https://next.layerchart.com/docs/components/Rule/annotation-x/llms.txt

This example demonstrates how to integrate a Rule component into a LayerChart visualization. It shows the setup of a Chart with defined domains and the usage of the Rule component to highlight a specific x-axis position with custom styling.

```svelte
<script>
	import { Axis, Chart, Layer, Rule } from 'layerchart';
</script>

<Chart xDomain={[0, 100]} yDomain={[0, 100]} padding={20} height={300}>
	<Layer>
		<Axis placement="bottom" rule />
		<Axis placement="left" rule />
		<Rule x={70} class="stroke-2 stroke-danger [stroke-dasharray:4] [stroke-linecap:round] " />
	</Layer>
</Chart>
```

--------------------------------

### Basic Vertical Bar Chart Example

Source: https://next.layerchart.com/llms.txt

Demonstrates the fundamental setup for creating a simple vertical bar chart using LayerChart. It requires data and basic configuration for rendering bars.

```javascript
fetch("/llmstxt/next_layerchart_llms_txt/Bars/vertical-basic/llms.txt").then(response => response.text()).then(data => {
  // Code to render a basic vertical bar chart using LayerChart
  console.log("Basic bar chart code loaded");
});
```

--------------------------------

### AreaChart Basic and Scale Examples

Source: https://next.layerchart.com/llms.txt

Provides examples for basic AreaChart usage and demonstrates different scaling techniques, including band scales and point scales. These examples are foundational for understanding AreaChart data representation.

```javascript
fetch("/llmstxt/next_layerchart_llms_txt/AreaChart/band-scale/llms.txt").then(response => response.text()).then(data => console.log(data));
```

```javascript
fetch("/llmstxt/next_layerchart_llms_txt/AreaChart/basic/llms.txt").then(response => response.text()).then(data => console.log(data));
```

```javascript
fetch("/llmstxt/next_layerchart_llms_txt/AreaChart/point-scale/llms.txt").then(response => response.text()).then(data => console.log(data));
```

--------------------------------

### Polygon Examples

Source: https://next.layerchart.com/llms.txt

Code examples demonstrating the usage of Polygon components like square, trapezoid, and triangle. These snippets show how to define and render different polygon shapes.

```javascript
/* Example for Polygon/square */
// Code for square polygon
```

```javascript
/* Example for Polygon/trapezoid */
// Code for trapezoid polygon
```

```javascript
/* Example for Polygon/triangle */
// Code for triangle polygon
```

--------------------------------

### Connector: Playground Example

Source: https://next.layerchart.com/llms.txt

An interactive playground example for the Connector component. This snippet allows users to experiment with different connector configurations and see the results in real-time.

```javascript
fetch("/llmstxt/next_layerchart_llms_txt/Connector/playground/llms.txt").then(response => response.text()).then(data => {
  // Code for the connector playground
  console.log(data);
});
```

--------------------------------

### Basic Frame Usage in LayerChart

Source: https://next.layerchart.com/docs/components/Frame/llms.txt

Demonstrates the fundamental usage of the Frame component within a LayerChart setup. It shows how to import necessary components and integrate Frame with Chart, Layer, and Axis for basic chart visualization. The example configures chart dimensions and padding.

```svelte
<script>
	import { Axis, Chart, Frame, Layer } from 'layerchart';
</script>

<Chart
	xDomain={[0, 100]}
	yDomain={[0, 100]},
	padding={{ top: 20, bottom: 20, left: 20, right: 20 }},
	height={300}
>
	<Layer>
		<Frame class="fill-danger/5" />
		<Axis placement="bottom" rule />
		<Axis placement="left" rule />
	</Layer>
</Chart>
```

--------------------------------

### BarChart Sparkbar and Vertical Examples

Source: https://next.layerchart.com/llms.txt

Includes examples for the compact 'sparkbar' visualization, showcasing fixed-position tooltips, negative data handling, and embedding sparkbars within text with tooltips and highlights. Also covers a basic vertical BarChart example.

```javascript
/* Code for BarChart/vertical-default */
// Example code for a default vertical BarChart
```

```javascript
/* Code for BarChart/sparkbar-fixed-position-tooltip */
// Example code for a sparkbar with a fixed-position tooltip
```

```javascript
/* Code for BarChart/sparkbar-negative-data */
// Example code for a sparkbar handling negative data
```

```javascript
/* Code for BarChart/sparkbar-within-a-paragraph-with-tooltip-and-highlight */
// Example code for a sparkbar embedded in text with tooltip and highlight
```

```javascript
/* Code for BarChart/sparkbar-within-a-paragraph */
// Example code for a sparkbar embedded in text
```

```javascript
/* Code for BarChart/sparkbar */
// Example code for a basic sparkbar
```

--------------------------------

### BarChart Grid and Alignment Examples

Source: https://next.layerchart.com/llms.txt

Demonstrates configurations for grid lines on both axes of a LayerChart BarChart. Includes examples for aligning grids between bars.

```javascript
/* Example for BarChart/both-axis-grid-align-between */
// Code for aligning grids between bars on both axes
```

```javascript
/* Example for BarChart/both-axis-grid */
// Code for displaying grids on both axes
```

--------------------------------

### Usage Example

Source: https://next.layerchart.com/docs/components/AnnotationLine/llms.txt

Example of how to use the AnnotationLine component within a LayerChart LineChart.

```APIDOC
## Usage Example

```svelte
<script lang="ts">
	import { AnnotationLine, LineChart } from 'layerchart';
	import { getAppleStock } from '$lib/data.remote';

	const data = $derived(await getAppleStock());
</script>

<LineChart {data} x="date" y="value" height={300} padding={{ top: 10, bottom: 20, left: 25 }}>
	{#snippet aboveMarks({ context })}
		<AnnotationLine
			y={500}
			label="Max"
			props={{
				line: { class: '[stroke-dasharray:2,2] stroke-danger' },
				label: { class: 'fill-danger' }
			}}
		/>
	{/snippet}
</LineChart>
```
```

--------------------------------

### LineChart: Points Example

Source: https://next.layerchart.com/llms.txt

A basic example demonstrating how to display distinct points for each data entry in a LineChart. This is useful for emphasizing individual data values.

```javascript
fetch("/docs/components/LineChart/points/llms.txt").then(async (r) => {
  const code = await r.text();
  document.getElementById("code-example-19").innerText = code;
});
```

--------------------------------

### Axis Examples

Source: https://next.layerchart.com/llms.txt

This section contains example code snippets for the Axis component, demonstrating various axis configurations and functionalities.

```APIDOC
## Axis/arrow-markers

### Description
Example code for Axis with arrow markers.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/axis-label-placement-left-right

### Description
Example code for Axis with labels placed on the left and right.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/axis-label-placement-top-bottom

### Description
Example code for Axis with labels placed on the top and bottom.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/barchart-xinterval-xinset

### Description
Example code for Axis in a bar chart with x-interval and x-inset.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/explicit-ticks

### Description
Example code for Axis with explicitly defined ticks.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/extent-ticks-only

### Description
Example code for Axis showing only ticks at the extent.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/grid-dashed

### Description
Example code for Axis with dashed grid lines.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/grid

### Description
Example code for Axis with grid lines.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/hide-zero-filter

### Description
Example code for Axis with zero values filtered out.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/hide-zero-format

### Description
Example code for Axis where zero values are formatted to be hidden.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/inject-ticks

### Description
Example code for Axis with injected ticks.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/integer-only-filter

### Description
Example code for Axis filtering to show only integer values.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/integer-only-format

### Description
Example code for Axis formatting to display only integer values.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/labels-next-hash

### Description
Example code for Axis labels positioned next to hash marks.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/linechart-tickspacing

### Description
Example code for Axis tick spacing in a line chart.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/log-scale

### Description
Example code for Axis using a logarithmic scale.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/multiline-tick-labels

### Description
Example code for Axis with multiline tick labels.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/multiple-axis-grid-and-rules-separate-grid

### Description
Example code for multiple axes with separate grid and rules.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/multiple-axis-grid-and-rules

### Description
Example code for multiple axes with combined grid and rules.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/multiple-axis-grid-with-single-rule

### Description
Example code for multiple axes with a single rule and grid.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/multiple-axis-same-placement-bottom

### Description
Example code for multiple axes placed at the bottom.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/multiple-axis-same-placement-right

### Description
Example code for multiple axes placed on the right.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/override-axis-ticks-scale

### Description
Example code for overriding axis ticks and scale.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Axis/placement-bottom-left-rule

### Description
Example code for Axis placement with bottom and left rules.

### Method
N/A (Example)

### Endpoint
N/A (Example)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Tooltip Component: Basic Usage

Source: https://next.layerchart.com/llms.txt

A fundamental example of the Tooltip component in LayerChart, showing its basic setup and functionality. This is a starting point for implementing tooltips.

```javascript
fetch("/llmstxt/next_layerchart_llms_txt/Tooltip/basic/llms.txt").then(r => r.text()).then(code => {
  document.getElementById('code-tooltip-basic').textContent = code;
});
```

--------------------------------

### Start Development Server

Source: https://next.layerchart.com/docs/getting-started/llms.txt

Commands to launch the local development server for your project.

```bash
pnpm dev
npm run dev
bun run dev
deno task dev
yarn dev
```

--------------------------------

### Initialize SvelteKit Project with LayerChart

Source: https://next.layerchart.com/docs/getting-started/llms.txt

Commands to scaffold a new SvelteKit project with Tailwind CSS support using various package managers.

```bash
pnpm sv create my-app add --tailwindcss && cd my-app
npx sv create my-app add --tailwindcss && cd my-app
bunx sv create my-app add --tailwindcss && cd my-app
deno run -A npm:sv create my-app add --tailwindcss && cd my-app
yarn sv create my-app add --tailwindcss && cd my-app
```

--------------------------------

### Usage Example

Source: https://next.layerchart.com/docs/components/GeoSpline/llms.txt

Example of how to use the GeoSpline component within a LayerChart setup to draw world links.

```APIDOC
## Usage Example

This example demonstrates how to use the GeoSpline component to draw curved lines representing world links between countries.

### Code

```svelte
<script lang="ts">
	import { geoNaturalEarth1 } from 'd3-geo';
	import { flatRollup } from 'd3-array';
	import { feature } from 'topojson-client';

	import { Chart, GeoPath, GeoPoint, GeoSpline, Graticule, Layer } from 'layerchart';

	import { getWorldLinks, getCountriesTopology } from '$lib/geo.remote.js';

	const topology = await getCountriesTopology();
	const worldLinks = await getWorldLinks();

	const countries = feature(topology, topology.objects.countries);

	// Use a single link per source
	const singleLinks = flatRollup(
		worldLinks,
		(values) => {
			return values[1];
		},
		(d) => d.sourceId
	).map((d) => d[1]);

	const data = { countries, singleLinks };
</script>

<Chart
	geo={{
		projection: geoNaturalEarth1,
		fitGeojson: countries
	}}
	padding={{ top: 16, bottom: 16, left: 16, right: 16 }}
	height={600}
>
	<Layer>
		<GeoPath geojson={{ type: 'Sphere' }} class="fill-blue-400/50" />
		<Graticule class="stroke-surface-content/20" />
		{#each countries.features as country}
			<GeoPath geojson={country} class="stroke-surface-content/50 fill-white" />
		{/each}
		{#each singleLinks as link}
			<GeoSpline {link} class="stroke-gray-500/30 stroke-2" />
			<GeoSpline {link} class="stroke-danger stroke-2" loft={1.3} />
			<GeoPoint lat={link.source[1]} long={link.source[0]} r={2} class="fill-black" />
			<GeoPoint lat={link.target[1]} long={link.target[0]} r={2} class="fill-black" />
		{/each}
	</Layer>
</Chart>
```
```

--------------------------------

### Load Async Example Component in Svelte

Source: https://next.layerchart.com/docs/components/async/llms.txt

This Svelte component demonstrates how to asynchronously load an 'AreaChart' example with the name 'basic' using the AsyncExample component. It relies on the '$lib/components/AsyncExample.svelte' component and assumes 'experimental.async' is configured for loading.

```svelte
<script lang="ts">
	import AsyncExample from '$lib/components/AsyncExample.svelte';
</script>

<AsyncExample component="AreaChart" name="basic" />
```

--------------------------------

### Playground Example

Source: https://next.layerchart.com/docs/components/TransformContext/llms.txt

A Svelte component demonstrating the usage of TransformContext with various configurations for interactive charts.

```APIDOC
## Playground Example

### Description
This playground demonstrates how to use the TransformContext component within a Svelte application to create interactive charts. It allows for dynamic configuration of point count, angle, and visual elements like splines and points, with options for tweened animations.

### Code
```svelte
<script lang="ts">
	import type { ComponentProps } from 'svelte';
	import { cubicOut } from 'svelte/easing';

	import { Chart, Circle, Layer, Points, Spline } from 'layerchart';
	import TransformContextPlaygroundControls from '$lib/components/controls/TransformContextPlaygroundControls.svelte';
	import TransformContextControls from '$lib/components/controls/TransformContextControls.svelte';
	import CurveMenuField from '$lib/components/controls/fields/CurveMenuField.svelte';

	import { getSpiral } from '$lib/utils/data';

	let config = $state({
		pointCount: 500,
		angle: 137.5,
		showPoints: true,
		showPath: false,
		tweened: true,
		curve: undefined as ComponentProps<typeof CurveMenuField>['value']
	});

	const data = $derived(
		getSpiral({
			angle: config.angle,
			radius: 10,
			count: config.pointCount,
			width: 500,
			height: 500
		})
	);
</script>

<TransformContextPlaygroundControls bind:config />

<div class="grid place-items-center">
	<Chart
		{data}
		x="x"
		y="y"
		transform={{
			mode: 'canvas',
			motion: config.tweened ? { type: 'tween', duration: 800, easing: cubicOut } : undefined,
			initialScrollMode: 'scale'
		}}
		clip
		padding={50}
		width={500}
		height={500}
	>
		<TransformContextControls />
		<Layer>
			{#if config.showPath}
				<Spline curve={config.curve} motion="tween" />
			{/if}
			{#if config.showPoints}
				<Points>
					{#snippet children({ points })}
						{#each points as point, index}
							<Circle
								cx={point.x}
								cy={point.y}
								r={2}
								class={index % 2 ? 'fill-primary' : 'fill-secondary'}
								motion={config.tweened ? 'tween' : undefined}
							/>
						{/each}
					{/snippet}
				</Points>
			{/if}
		</Layer>
	</Chart>
</div>
```
```

--------------------------------

### Spline Chart Examples

Source: https://next.layerchart.com/llms.txt

This section provides various examples for the LayerChart Spline component. It covers basic spline drawing, including configurations for start and end points, drawing with values, and using slots. Examples also demonstrate gradient encoding with thresholds, label customization using start and end snippets, adding markers and arrows, handling multiple series with highlighting on hover or using overrides, and radial spline configurations like radar charts and multi-year lines. It also includes examples for tweened animations and vertical spline layouts.

```javascript
/* Placeholder for Spline/basic-start-and-end-snippets code */
console.log('Spline basic-start-and-end-snippets example');
```

```javascript
/* Placeholder for Spline/basic code */
console.log('Spline basic example');
```

```javascript
/* Placeholder for Spline/draw code */
console.log('Spline draw example');
```

```javascript
/* Placeholder for Spline/end-slot-with-draw-with-value code */
console.log('Spline end-slot-with-draw-with-value example');
```

```javascript
/* Placeholder for Spline/end-snippet-with-draw code */
console.log('Spline end-snippet-with-draw example');
```

```javascript
/* Placeholder for Spline/gradient-encoding code */
console.log('Spline gradient-encoding example');
```

```javascript
/* Placeholder for Spline/gradient-threshold code */
console.log('Spline gradient-threshold example');
```

```javascript
/* Placeholder for Spline/label-using-start-end-snippets code */
console.log('Spline label-using-start-end-snippets example');
```

```javascript
/* Placeholder for Spline/markers-arrows code */
console.log('Spline markers-arrows example');
```

```javascript
/* Placeholder for Spline/multiple-series-highlight-on-hover code */
console.log('Spline multiple-series-highlight-on-hover example');
```

```javascript
/* Placeholder for Spline/multiple-series-using-overrides code */
console.log('Spline multiple-series-using-overrides example');
```

```javascript
/* Placeholder for Spline/multiple-series-with-labels code */
console.log('Spline multiple-series-with-labels example');
```

```javascript
/* Placeholder for Spline/multiple-series code */
console.log('Spline multiple-series example');
```

```javascript
/* Placeholder for Spline/playground code */
console.log('Spline playground example');
```

```javascript
/* Placeholder for Spline/radial-line-with-areas code */
console.log('Spline radial-line-with-areas example');
```

```javascript
/* Placeholder for Spline/radial-multi-year-lines code */
console.log('Spline radial-multi-year-lines example');
```

```javascript
/* Placeholder for Spline/radial-radar code */
console.log('Spline radial-radar example');
```

```javascript
/* Placeholder for Spline/tweened code */
console.log('Spline tweened example');
```

```javascript
/* Placeholder for Spline/vertical code */
console.log('Spline vertical example');
```

--------------------------------

### Pie Component Usage

Source: https://next.layerchart.com/docs/components/Pie/partial-range-range-prop/llms.txt

Example of how to use the Pie component within a LayerChart setup to create a pie chart.

```APIDOC
## Pie Component Usage

### Description
This code snippet demonstrates how to implement a pie chart using the `Chart`, `Layer`, and `Pie` components from the `layerchart` library. It configures the chart with sample data and specifies the range for the pie slices.

### Method
N/A (This is a client-side component usage example)

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
N/A

## Components Used

- **Chart**: The main container for the chart.
- **Layer**: A layer within the chart, used here to center the pie.
- **Pie**: The component that renders the pie chart slices. It accepts a `range` prop to define the start and end angles of the pie.

### Request Body
```svelte
<script lang="ts">
	import { Chart, Layer, Pie } from 'layerchart';
	import { createDateSeries } from '$lib/utils/data.js';

	const data = createDateSeries({ min: 20, max: 100, value: 'integer', count: 4 });

	const keyColors = [
		'var(--color-info)',
		'var(--color-success)',
		'var(--color-warning)',
		'var(--color-danger)'
	];
</script>

<Chart data={data} x="value" c="date" cRange={keyColors} height={300}>
	<Layer center>
		<Pie range={[-90, 90]} />
	</Layer>
</Chart>
```

### Response Example
N/A
```

--------------------------------

### Circle Pattern Examples

Source: https://next.layerchart.com/docs/components/Pattern/circles/llms.txt

Demonstrates various configurations of the Pattern component to create different circle fill effects.

```APIDOC
## Pattern - circles

Fill component which provides a line or circle-based fill pattern for chart elements.

### Components Used
- `Chart`
- `Layer`
- `Pattern`
- `Rect`

### Usage
The `Pattern` component can be configured with the `circles` prop to create circle fill patterns. The `circles` prop can be a boolean or an object with additional configuration options.

#### Basic Circle Pattern
```svelte
<script lang="ts">
	import { Chart, Layer, Pattern, Rect } from 'layerchart';
</script>

<Chart height={300}>
	<Layer>
		<Pattern size={4} circles>
			{#snippet children({ pattern })}
				<Rect
					x={0}
					y={0}
					width={100}
					height={300}
					rx={8}
					fill={pattern}
					class="stroke-surface-content"
				/>
			{/snippet}
		</Pattern>
	</Layer>
</Chart>
```

#### Circle Pattern with Stagger
```svelte
<script lang="ts">
	import { Chart, Layer, Pattern, Rect } from 'layerchart';
</script>

<Chart height={300}>
	<Layer>
		<Pattern size={8} circles={{ stagger: true }}>
			{#snippet children({ pattern })}
				<Rect
					x={0}
					y={0}
					width={100}
					height={300}
					rx={8}
					fill={pattern}
					class="stroke-surface-content"
				/>
			{/snippet}
		</Pattern>
	</Layer>
</Chart>
```

#### Circle Pattern with Custom Radius
```svelte
<script lang="ts">
	import { Chart, Layer, Pattern, Rect } from 'layerchart';
</script>

<Chart height={300}>
	<Layer>
		<Pattern size={8} circles={{ radius: 2 }}>
			{#snippet children({ pattern })}
				<Rect
					x={0}
					y={0}
					width={100}
					height={300}
					rx={8}
					fill={pattern}
					class="stroke-surface-content"
				/>
			{/snippet}
		</Pattern>
	</Layer>
</Chart>
```

#### Circle Pattern with Custom Radius and Stagger
```svelte
<script lang="ts">
	import { Chart, Layer, Pattern, Rect } from 'layerchart';
</script>

<Chart height={300}>
	<Layer>
		<Pattern size={8} circles={{ radius: 2, stagger: true }}>
			{#snippet children({ pattern })}
				<Rect
					x={0}
					y={0}
					width={100}
					height={300}
					rx={8}
					fill={pattern}
					class="stroke-surface-content"
				/>
			{/snippet}
		</Pattern>
	</Layer>
</Chart>
```

#### Circle Pattern with Custom Radius and Opacity
```svelte
<script lang="ts">
	import { Chart, Layer, Pattern, Rect } from 'layerchart';
</script>

<Chart height={300}>
	<Layer>
		<Pattern size={8} circles={{ radius: 2, opacity: 0.3 }}>
			{#snippet children({ pattern })}
				<Rect
					x={0}
					y={0}
					width={100}
					height={300}
					rx={8}
					fill={pattern}
					class="stroke-surface-content"
				/>
			{/snippet}
		</Pattern>
	</Layer>
</Chart>
```

### Props for `circles` option

- `size` (number): Controls the density of the circles. Higher values mean more circles.
- `stagger` (boolean): If true, staggers the circles for a more randomized appearance.
- `radius` (number): Sets the radius of each individual circle.
- `opacity` (number): Sets the opacity of the circles (0 to 1).
```

--------------------------------

### Grid Component Usage

Source: https://next.layerchart.com/docs/components/Grid/padding/llms.txt

Example of how to use the Grid component within a LayerChart setup to display horizontal and vertical grid lines.

```APIDOC
## Grid Component Usage

### Description
This code snippet demonstrates the integration of the `Grid` component within a `Chart` and `Layer` structure to render grid lines. The `Grid` component, when used with `x` and `y` props, draws both horizontal and vertical lines.

### Method
N/A (Svelte Component)

### Endpoint
N/A (Svelte Component)

### Parameters
N/A (Component Props)

### Request Example
```svelte
<script>
	import { Chart, Grid, Layer } from 'layerchart';
</script>

<Chart
	xDomain={[0, 100]}
	yDomain={[0, 100]}
	padding={{ top: 20, bottom: 20, left: 50, right: 50 }}
	height={300}
>
	<Layer>
		<Grid x y />
	</Layer>
</Chart>
```

### Response
N/A (Component Rendering)

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### LineChart: Performance Streaming Example

Source: https://next.layerchart.com/llms.txt

Illustrates performance optimizations for LineCharts in a streaming data context. This is ideal for real-time data updates.

```javascript
fetch("/docs/components/LineChart/perf-streaming/llms.txt").then(async (r) => {
  const code = await r.text();
  document.getElementById("code-example-15").innerText = code;
});
```

--------------------------------

### Implementing a Basic LineChart in Svelte

Source: https://next.layerchart.com/docs/components/LineChart/labels/llms.txt

Demonstrates how to initialize a LineChart component using Svelte. It utilizes the createDateSeries utility to generate mock data and configures chart padding and labels for optimal display.

```svelte
<script lang="ts">
	import { LineChart, defaultChartPadding } from 'layerchart';
	import { createDateSeries } from '$lib/utils/data.js';

	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
</script>

<LineChart
	{data}
	x="date"
	y="value"
	padding={defaultChartPadding({ right: 10, top: 25 })}
	height={300}
	labels={{ offset: 10 }}
/>
```

--------------------------------

### TransformContext Component Playground

Source: https://next.layerchart.com/llms.txt

A playground example for the TransformContext component in LayerChart, showcasing its various transformation features like pan and zoom. This serves as a starting point for custom transformations.

```javascript
fetch("/llmstxt/next_layerchart_llms_txt/TransformContext/playground/llms.txt").then(r => r.text()).then(code => {
  document.getElementById('code-transform-playground').textContent = code;
});
```

--------------------------------

### Frame: Full Frame Example

Source: https://next.layerchart.com/llms.txt

An example showcasing a 'full frame' configuration for the Frame component. This might be used to create a complete bounding box or background for a chart or diagram.

```javascript
fetch("/llmstxt/next_layerchart_llms_txt/Frame/full/llms.txt").then(response => response.text()).then(data => {
  // Code for the full frame
  console.log(data);
});
```

--------------------------------

### Vertical Grouped Bars Implementation

Source: https://next.layerchart.com/docs/components/Bars/vertical-grouped/llms.txt

Example Svelte component demonstrating the setup for a vertical grouped bar chart with LayerChart, including data processing, scales, and chart components.

```APIDOC
## Vertical Grouped Bars Chart Example

### Description
This example shows how to create a vertical grouped bar chart using LayerChart. It includes data preparation, scale configuration, and the use of various chart components like `Chart`, `Layer`, `Axis`, `Bars`, `Highlight`, and `Tooltip`.

### Method
N/A (This is a frontend component example)

### Endpoint
N/A

### Parameters
N/A (Component props are detailed in the LayerChart documentation)

### Request Example
```svelte
<script lang="ts">
	import { scaleBand } from 'd3-scale';
	import { sum } from 'd3-array';
	import { Axis, Bars, Chart, Highlight, Layer, Tooltip, groupStackData } from 'layerchart';
	import { longData } from '$lib/utils/data.js';

	const colorKeys = [...new Set(longData.map((x) => x.fruit))];
	const keyColors = [
		'var(--color-info)',
		'var(--color-success)',
		'var(--color-warning)',
		'var(--color-danger)'
	];

	const data = groupStackData(longData, { xKey: 'year', groupBy: 'fruit' });
</script>

<Chart
	{data}
	x="year"
	xScale={scaleBand().paddingInner(0.4).paddingOuter(0.2)}
	y="value"
	yNice
	c="fruit"
	cDomain={colorKeys}
	cRange={keyColors}
	x1="fruit"
	x1Domain={colorKeys}
	x1Range={({ xScale }) => [0, xScale.bandwidth()]}
	padding={{ left: 32, bottom: 20, top: 8 }}
	tooltip={{ mode: 'band' }}
	height={300}
>
	{#snippet children({ context })}
		<Layer>
			<Axis placement="left" grid rule />
			<Axis placement="bottom" rule />
			<Bars strokeWidth={1} />
			<Highlight area />
		</Layer>

		<Tooltip.Root>
			{#snippet children({ data })}
				<Tooltip.Header>{data.year}</Tooltip.Header>
				<Tooltip.List>
					{#each data.data as d}
						<Tooltip.Item
							label={d.fruit}
							value={d.value}
							color={context.cScale?.(d.fruit)}
							format="integer"
							valueAlign="right"
						/>
					{/each}

					<Tooltip.Separator />

					<Tooltip.Item
						label="total"
						value={sum([...data.data], (d) => d.value)}
						format="integer"
						valueAlign="right"
					/>
				</Tooltip.List>
			{/snippet}
		</Tooltip.Root>
	{/snippet}
</Chart>
```

### Response
N/A (This is a frontend component example)

### Response Example
N/A
```

--------------------------------

### ColorRamp: Basic Usage

Source: https://next.layerchart.com/llms.txt

A basic example of the ColorRamp component in LayerChart. This snippet shows the fundamental setup for creating a color ramp, which is often used for mapping data values to colors.

```javascript
fetch("/llmstxt/next_layerchart_llms_txt/ColorRamp/basic/llms.txt").then(response => response.text()).then(data => {
  // Code to display the basic color ramp
  console.log(data);
});
```

--------------------------------

### Pie Chart Example

Source: https://next.layerchart.com/docs/components/Pie/labels/llms.txt

This example demonstrates how to create a pie chart using the Pie, Arc, and Text components. It visualizes data as proportional slices of a circle, with each slice representing a category's contribution to the total.

```APIDOC
## Pie Chart Example

### Description
This code snippet shows how to implement a pie chart using LayerChart components. It visualizes data where each slice's size is proportional to its value, demonstrating the relative contribution of each category to the whole.

### Method
N/A (This is a component usage example)

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
N/A

## Components Used

- **Chart**: The main container for the chart.
- **Layer**: Used to group and position chart elements.
- **Pie**: Renders the pie chart.
- **Arc**: Represents individual slices of the pie.
- **Text**: Displays labels or values on the slices.

## Code

```svelte
<script lang="ts">
	import { cls } from '@layerstack/tailwind';
	import { Arc, Chart, Layer, Pie, Text } from 'layerchart';
	import { createDateSeries } from '$lib/utils/data.js';

	const data = createDateSeries({ min: 20, max: 100, value: 'integer', count: 4 });

	const keyClasses = [
		{ shape: 'fill-info', content: 'fill-info-content' },
		{ shape: 'fill-success', content: 'fill-success-content' },
		{ shape: 'fill-warning', content: 'fill-warning-content' },
		{ shape: 'fill-danger', content: 'fill-danger-content' }
	];
</script>

<Chart {data} x="value" c="date" height={300}>
	<Layer center>
		<Pie>
			{#snippet children({ arcs })}
				{#each arcs as arc, index}
					{@const colors = keyClasses[index]}
					<Arc
						startAngle={arc.startAngle}
						endAngle={arc.endAngle}
						padAngle={arc.padAngle}
						class={colors.shape}
					>
						{#snippet children({ getArcTextProps })}
							<Text
								value={arc.data.value}
								{...getArcTextProps('centroid')}
								class={cls('text-sm ', colors.content)}
							/>
						{/snippet}
					</Arc>
				{/each}
			{/snippet}
		</Pie>
	</Layer>
</Chart>
```
```

--------------------------------

### BarChart Duration Visualization Examples

Source: https://next.layerchart.com/llms.txt

Demonstrates how to visualize duration data using LayerChart's BarChart. Includes examples for coloring duration bars, dense lane configurations, and timeline visualizations.

```javascript
/* Example for BarChart/duration-bars-color */
// Code for duration bars with color
```

```javascript
/* Example for BarChart/duration-bars-dense-lanes */
// Code for dense lanes in duration bars
```

```javascript
/* Example for BarChart/duration-bars-dense */
// Code for dense duration bars
```

```javascript
/* Example for BarChart/duration-bars-lanes */
// Code for duration bars with lanes
```

```javascript
/* Example for BarChart/duration-bars */
// Code for basic duration bars
```

```javascript
/* Example for BarChart/duration-civilization-timeline-dense */
// Code for dense civilization timeline using duration
```

```javascript
/* Example for BarChart/duration-civilization-timeline */
// Code for civilization timeline using duration
```

```javascript
/* Example for BarChart/duration-points-color */
// Code for duration points with color
```