### Install solid-charts using npm

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/usage.mdx

This snippet shows how to install the solid-charts library using npm. It's a prerequisite for using the library in your project.

```bash
npm install solid-charts
```

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

### Bar Series Example

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/components/series.mdx

Demonstrates the Bar series component for creating bar charts. Includes a Tailwind CSS variant for styling.

```tsx
import BarExample from '@examples/docs/series/bar'
import BarExampleTsx from '@examples/docs/series/bar?raw'

// ... inside an Astro component or similar context
<ExampleWrapper codeSnippets={[{ name: 'Tailwind', files: [{ fileName: 'index.tsx', slotName: 'tailwindTsx' }] }]} height={302} client:idle>
  <BarExample client:only />
  <RawCode slot="tailwindTsx" code={BarExampleTsx} lang="tsx" />
</ExampleWrapper>
```

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

### Line Series Example

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/components/series.mdx

Demonstrates the usage of the Line series component for rendering line charts. Includes a Tailwind CSS variant for styling.

```tsx
import LineExample from '@examples/docs/series/line'
import LineExampleTsx from '@examples/docs/series/line?raw'

// ... inside an Astro component or similar context
<ExampleWrapper codeSnippets={[{ name: 'Tailwind', files: [{ fileName: 'index.tsx', slotName: 'tailwindTsx' }] }]} height={302} client:idle>
  <LineExample client:only />
  <RawCode slot="tailwindTsx" code={LineExampleTsx} lang="tsx" />
</ExampleWrapper>
```

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

### Area Series Example

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/components/series.mdx

Illustrates how to use the Area series component to create area charts. Provides a Tailwind CSS compatible example.

```tsx
import AreaExample from '@examples/docs/series/area'
import AreaExampleTsx from '@examples/docs/series/area?raw'

// ... inside an Astro component or similar context
<ExampleWrapper codeSnippets={[{ name: 'Tailwind', files: [{ fileName: 'index.tsx', slotName: 'tailwindTsx' }] }]} height={302} client:idle>
  <AreaExample client:only />
  <RawCode slot="tailwindTsx" code={AreaExampleTsx} lang="tsx" />
</ExampleWrapper>
```

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

### Simple Data Structure

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/components/chart.mdx

A very basic chart can be created with an array of numbers. This example demonstrates how to use the `<Chart>` component with a simple array of numbers for data.

```tsx
import { Chart } from 'solid-charts';

const data = [
  10,
  20,
  30,
  40,
  50,
];

<Chart data={data}>
  {/* Chart children like Axes, Lines, etc. */}
</Chart>
```

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

### SolidJS Chart Components

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/index.mdx

Demonstrates the composable nature of solid-charts by showing example component usage. These components like <Line>, <Axis>, and <Tooltip> can be combined to build custom charts. The library is designed to be unstyled, allowing integration with any design system.

```jsx
import { Chart, Line, Axis, Tooltip } from 'solid-charts';

function MyChart() {
  const data = [
    { x: 1, y: 10 },
    { x: 2, y: 15 },
    { x: 3, y: 12 },
  ];

  return (
    <Chart data={data}>
      <Axis orientation="bottom" />
      <Axis orientation="left" />
      <Line />
      <Tooltip />
    </Chart>
  );
}
```

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

### Create a Line Chart with solid-charts

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/usage.mdx

This example demonstrates creating a basic line chart using solid-charts. It includes an x-axis, y-axis, tooltip, and cursor line for enhanced data visualization and interaction. The code is written in TypeScript/React (TSX).

```tsx
import { Chart, Line, Tooltip, Cursor, XAxis, YAxis } from 'solid-charts';

const data = [
  { date: '2023-01-01', value: 10 },
  { date: '2023-01-02', value: 15 },
  { date: '2023-01-03', value: 12 },
  { date: '2023-01-04', value: 18 },
  { date: '2023-01-05', value: 20 },
];

function FirstExample() {
  return (
    <Chart
      data={data}
      xAccessor="date"
      yAccessor="value"
      height={302}
      padding={{ left: 20, right: 20, top: 20, bottom: 20 }}
    >
      <XAxis />
      <YAxis />
      <Tooltip />
      <Cursor />
      <Line />
    </Chart>
  );
}

export default FirstExample;
```

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

### Step Curve Example

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/curves.mdx

Demonstrates how to use the `curveStep` function with a Line component in SolidJS. This customizes the line path to use a stepped appearance, connecting points with horizontal and vertical segments.

```tsx
import { curveStep } from 'solid-charts/curves'

<Line curve={curveStep} />
```

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

### SolidJS Multiple Axes Chart Example

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/axis.mdx

Illustrates a SolidJS chart configured with multiple axes to handle series with significantly different value ranges. This improves readability by scaling each series independently on its own axis.

```tsx
import { createSignal } from 'solid-js';
import { Chart, LineSeries, Axis } from '@solid-charts/core';

export default function MultipleAxisExample() {
  const [data1, setData1] = createSignal([
    { x: 1, y: 10 },
    { x: 2, y: 15 },
    { x: 3, y: 12 },
  ]);
  const [data2, setData2] = createSignal([
    { x: 1, y: 1000 },
    { x: 2, y: 1500 },
    { x: 3, y: 1200 },
  ]);
  const [data3, setData3] = createSignal([
    { x: 1, y: 12 },
    { x: 2, y: 18 },
    { x: 3, y: 14 },
  ]);

  return (
    <Chart width={500} height={300}>
      <Axis id="0" />
      <Axis id="1" position="right" />
      <LineSeries data={data1()} axisId="0" />
      <LineSeries data={data2()} axisId="1" />
      <LineSeries data={data3()} axisId="0" />
    </Chart>
  );
}
```

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

### Point Series Example

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/components/series.mdx

Shows the Point series component, used for rendering individual data points (e.g., circles) on a chart. It's often combined with Line or Area series.

```tsx
import PointExample from '@examples/docs/series/point'
import PointExampleTsx from '@examples/docs/series/point?raw'

// ... inside an Astro component or similar context
<ExampleWrapper codeSnippets={[{ name: 'Tailwind', files: [{ fileName: 'index.tsx', slotName: 'tailwindTsx' }] }]} height={302} client:idle>
  <PointExample client:only />
  <RawCode slot="tailwindTsx" code={PointExampleTsx} lang="tsx" />
</ExampleWrapper>
```

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

### Cardinal Curve Example

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/curves.mdx

Demonstrates how to use the `curveCardinal` function with a Line component in SolidJS. This customizes the line path to use a cardinal spline appearance, creating smooth curves between data points.

```tsx
import { curveCardinal } from 'solid-charts/curves'

<Line curve={curveCardinal} />
```

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

### SolidJS Single Axis Chart Example

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/axis.mdx

Demonstrates a SolidJS chart with multiple series sharing a single axis scale. This is useful when all data points fall within a similar range, ensuring consistent visualization.

```tsx
import { createSignal } from 'solid-js';
import { Chart, LineSeries, Axis } from '@solid-charts/core';

export default function SingleAxisExample() {
  const [data1, setData1] = createSignal([
    { x: 1, y: 10 },
    { x: 2, y: 15 },
    { x: 3, y: 12 },
  ]);
  const [data2, setData2] = createSignal([
    { x: 1, y: 12 },
    { x: 2, y: 18 },
    { x: 3, y: 14 },
  ]);
  const [data3, setData3] = createSignal([
    { x: 1, y: 8 },
    { x: 2, y: 13 },
    { x: 3, y: 11 },
  ]);

  return (
    <Chart width={500} height={300}>
      <Axis id="0" />
      <LineSeries data={data1()} axisId="0" />
      <LineSeries data={data2()} axisId="0" />
      <LineSeries data={data3()} axisId="0" />
    </Chart>
  );
}
```

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

### Chart Sizing - Aspect Ratio

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/components/chart.mdx

The SVG element scales to fit its parent. By setting the parent's dimensions and aspect ratio, the chart will adopt these properties. This example uses CSS to enforce a 4:3 aspect ratio.

```tsx
<div
  style={{
    height: "400px",
    "aspect-ratio": "4 / 3"
  }}
>
  <Chart>
    {/* Chart children */}
  </Chart>
</div>
```

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

### Object Data Structure

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/components/chart.mdx

For charts requiring more than a single series or needing axis labels, provide an array of objects. Each object should contain all properties accessed by chart elements. This example shows a chart with two series and an x-axis label.

```tsx
import { Chart } from 'solid-charts';

const data = [
  { x: 'Jan', series1: 10, series2: 20 },
  { x: 'Feb', series1: 15, series2: 25 },
  { x: 'Mar', series1: 20, series2: 30 },
];

<Chart data={data}>
  {/* Chart children like Axes, Lines, etc. */}
</Chart>
```

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

### SolidJS Chart Library Overview

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/index.mdx

Highlights the core technologies and design principles of solid-charts. It is built for SolidJS, uses SVG elements, and leverages D3 for data processing. The unstyled nature means developers must apply their own CSS for styling.

```plaintext
Library: solid-charts
Framework: SolidJS
Rendering: SVG
Data Visualization: D3.js
Styling: Unstyled (developer-controlled)
```

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

### Series API Reference

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/components/series.mdx

Provides an API reference for the various series components available in Solid Charts. This section details available props and configurations for Line, Area, Point, and Bar series.

```APIDOC
Series Components API:

<Line />
  - Description: Renders a line chart.
  - Props: (Details not provided in source text, refer to full documentation)

<Area />
  - Description: Renders an area chart.
  - Props: (Details not provided in source text, refer to full documentation)

<Point />
  - Description: Renders individual data points (e.g., circles).
  - Props:
    - activeProps: object (optional) - Styles or attributes for the currently active point.
      - Example: `activeProps={{ class: 'active-point-style', r: 5 }}`

<Bar />
  - Description: Renders a bar chart.
  - Props: (Details not provided in source text, refer to full documentation)

Global Chart Configuration:

barConfig: object (on <Chart> component)
  - Description: Configures rendering of multiple bar series.
  - Properties:
    - barWidth: number (optional) - Width of individual bars.
    - barSpacing: number (optional) - Space between bars.
  - Related: See `BarConfig` type in Chart API reference.
```

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

### Bar Series Global Configuration (barConfig)

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/components/series.mdx

Details the `barConfig` object available on the `<Chart>` component, which globally configures how multiple bar series are rendered. It controls spacing and bar width.

```APIDOC
Chart Component API:

barConfig: object
  - Description: Global configuration for rendering multiple bar series.
  - Properties:
    - barWidth: number (optional) - The width of each bar.
    - barSpacing: number (optional) - The space between bars within a group.
  - Related: Refer to the `BarConfig` type in the Chart API reference for detailed options.

Example Usage:
<Chart barConfig={{ barWidth: 10, barSpacing: 5 }}>
  {/* ... Bar series components ... */}
</Chart>
```

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

### Stack Area Chart with SolidJS

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/stacks.mdx

Demonstrates how to stack Area, Line, and Point series in SolidJS to visualize a total value. Series components accept the `stackId` property to group them for stacking.

```tsx
import { createSignal } from 'solid-js';
import { Stack, Area, Line, Point } from '@solid-charts/core';

const data = [
  { x: '2023-01-01', y: 10, z: 5 },
  { x: '2023-01-02', y: 15, z: 8 },
  { x: '2023-01-03', y: 12, z: 6 },
  { x: '2023-01-04', y: 18, z: 10 },
  { x: '2023-01-05', y: 20, z: 12 },
];

export default function AreaChart() {
  const [signal, setSignal] = createSignal(data);

  return (
    <Stack
      signal={signal()}
      xAccessor="x"
      yAccessor="y"
      height={302}
      width={500}
    >
      <Area stackId="stack1" dataKey="y" />
      <Line stackId="stack1" dataKey="z" />
      <Point stackId="stack1" dataKey="z" />
    </Stack>
  );
}
```

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

### Point Series Active Props Customization

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/components/series.mdx

Explains how to customize the appearance of the currently active point in the Point series using the `activeProps` object. This enables dynamic styling or animations.

```tsx
import ActivePointExample from '@examples/docs/series/active-point'
import ActivePointExampleTsx from '@examples/docs/series/active-point?raw'

// ... inside an Astro component or similar context
// The 'activeProps' object is passed to the Point series component.
// Example usage:
// <Point activeProps={{ class: 'active-point-style' }} />

// Displaying the example:
<div class="mb-4 bg-sc-bg p-5 rounded-md border-2 border-sc-200 flex justify-center">
  <ActivePointExample client:load />
</div>

// Raw code for activeProps customization:
<Code code={ActivePointExampleTsx} lang="tsx" />
```

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

### Chart Sizing - Fixed ViewBox

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/components/chart.mdx

Set the `width` and `height` props on the `<Chart>` component to define a fixed `viewBox`. This allows the chart to scale within its parent container while maintaining its internal size ratios.

```tsx
<div style={{ width: '100%', height: '300px' }}>
  <Chart width={400} height={200}>
    {/* Chart children */}
  </Chart>
</div>
```

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

### Stack Bar Chart with SolidJS

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/stacks.mdx

Illustrates how to stack Bar series in SolidJS to visualize cumulative values. Similar to Area charts, the `stackId` property is used to group bars that should be stacked together.

```tsx
import { createSignal } from 'solid-js';
import { Stack, Bar } from '@solid-charts/core';

const data = [
  { x: 'A', y: 10, z: 5 },
  { x: 'B', y: 15, z: 8 },
  { x: 'C', y: 12, z: 6 },
  { x: 'D', y: 18, z: 10 },
  { x: 'E', y: 20, z: 12 },
];

export default function BarChart() {
  const [signal, setSignal] = createSignal(data);

  return (
    <Stack
      signal={signal()}
      xAccessor="x"
      yAccessor="y"
      height={302}
      width={500}
    >
      <Bar stackId="stack1" dataKey="y" />
      <Bar stackId="stack1" dataKey="z" />
    </Stack>
  );
}
```

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

### Import Solid Charts Curves

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/curves.mdx

Imports various curve functions from 'solid-charts/curves'. These functions are re-exported from D3 and can be used to customize line chart appearances. The default curve is `curveLinear`.

```tsx
import {
    curveBasis,
    curveBasisClosed,
    curveBasisOpen,
    curveBumpX,
    curveBumpY,
    curveCardinal,
    curveCardinalClosed,
    curveCardinalOpen,
    curveCatmullRom,
    curveCatmullRomClosed,
    curveCatmullRomOpen,
    curveLinear,
    curveLinearClosed,
    curveMonotoneX,
    curveMonotoneY,
    curveNatural,
    curveStep,
    curveStepAfter,
    curveStepBefore,
  } from 'solid-charts/curves'
```

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

### Chart Inset Padding

Source: https://github.com/corvudev/solid-charts/blob/main/docs/src/pages/docs/components/chart.mdx

The `<Chart>` component applies an `inset` padding by default (8px) to prevent elements like curved lines from overflowing. This can be customized or removed using the `inset` prop.

```tsx
<Chart
  inset={{
    top: 16,
    right: 0,
    bottom: 0,
    left: 0
  }}
>
  {/* Chart children */}
</Chart>
```

```tsx
<Chart inset={0}>
  {/* Chart children */}
</Chart>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.