# ChartInput — SvelteKit UI

Package: sveltekit-ui 1.1.87

Page: https://www.sveltekit-ui.com/components/chart_input

Category: Input controls

Edits chart frames, shared y axes, dataset mappings, and colors in a Chart Builder popover, returning a configuration for Chart.

Public component import: `ChartInput`

Public manager import: `create_chart_input_manager`

## Component notes

- notes:
  - The editor returns nested descriptor data, not a Chart manager. Create a chart manager from { chart: returned_config, datasets } to render it.
  - The editor rebuilds its supported fields. Initial shown_start_x/shown_end_x, manual y bounds, and affects_y_scale are not retained; apply any explicit bounds when creating the Chart manager.
  - The editor exposes number as an x-axis choice, but Chart's current tick formatting uses time coordinates. Use Unix seconds and x_axis_type: 'time' for the documented rendering path.

## Usage

```svelte
<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { ChartInput, create_chart_input_manager } from "sveltekit-ui"

  // Chart x values are Unix timestamps in seconds.
  const datasets = {
    visitors: {
      data: [
        { timestamp: 1791417600, count: 24 },
        { timestamp: 1791504000, count: 38 },
        { timestamp: 1791590400, count: 31 },
        { timestamp: 1791676800, count: 52 },
      ],
    },
  }
  const chart = {
    id: "visitors-chart",
    x_axis_type: "time",
    x_axis_title: "Day",
    // The end boundary is exclusive; include the final point in the range.
    shown_start_x: 1791417600,
    shown_end_x: 1791763200,
    frames: [{
      aspect_ratio: 2,
      shown_y_axis_index: 0,
      shared_y_axiss: [{
        y_axis_type: "number",
        y_axis_title: "Visitors",
        top_padding_pd: 0.2,
        bottom_padding_pd: 0.2,
        datasets: [{
          type: "path",
          name: "Daily visitors",
          dataset_id: "visitors",
          keys: ["timestamp", "count"],
          period_x: 86400,
          colors: [{ l: 10, c: 12, h: 16, o: 24, is_theme_based: true }],
        }],
      }],
    }],
  }

  let edited_chart = $state(null)

  const manager = create_chart_input_manager({
    chart,
    datasets,
    on_finish: (value) => { edited_chart = value },
  })
</script>

<ChartInput {manager} />
{#if edited_chart}<pre>{JSON.stringify(edited_chart, null, 2)}</pre>{/if}
```

## Configuration

### `chart`

- type: object
- required: true
- description: Initial Chart configuration. See Chart's chart/frame/shared_y_axis/dataset_descriptor shapes. The editor generates a fresh id when preparing the configuration.

### `datasets`

- type: object
- required: true
- description: Dataset records keyed by id, with data: object[]. Their ids and first-row field names provide selector options. These raw datasets are not edited or returned.

### `on_finish`

- type: function
- description: Called as on_finish(chart_config) when Finish is selected; the popover then closes.

## Methods

No methods documented.

## Returned state

### `val`

- type: object
- description: Current plain chart configuration assembled from editor controls, including frames and nested dataset descriptors.

### `chart_prepped`

- type: object
- description: Editor tree with per-frame, per-axis, and per-dataset child input/action managers.

### `chart_builder_popover_manager`

- type: object
- description: Chart Builder popover manager.

### `chart_builder_popover_button_manager`

- type: object
- description: Open Chart Builder action manager.

### `path_breadcrumbs_manager`

- type: object
- description: Current frame/axis/dataset path as numeric indexes.

### `finish_button_manager`

- type: object
- description: Finish action that emits val and closes the editor.