@loidolt/theme-charts 0.7.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Chris Loidolt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,124 @@
+# @loidolt/theme-charts
+
+Accessible, themed [ECharts](https://echarts.apache.org) charts for Svelte 5, painted from the
+Loidolt tokens.
+
+- **Themed from the tokens.** Series take the eight categorical chart colours, heatmaps the
+  sequential ramp, candlesticks the gain and loss colours, axes and tooltips the surface, border
+  and text roles — read live off the page, so light, dark and your own theme all reach the canvas.
+  A theme change recolours the chart in place.
+- **Accessible by default.** Every chart is a `<figure>` whose caption names the picture. A
+  plain-language description is generated from the data (trend, extremes, largest share), and the
+  data itself is rendered as a real table for assistive tech — or behind a "Show data table"
+  button, or always. `decal` adds patterns so series never rely on colour alone. Animation is off
+  when the user prefers reduced motion.
+- **Server-rendered.** ECharts loads only in the browser, from an effect. The server renders the
+  caption, the description and the data table, so the numbers are in the page before any script
+  runs.
+- **Pay for what you draw.** Each chart registers only the ECharts pieces it uses.
+
+## Install
+
+```sh
+npm install @loidolt/theme-charts echarts
+```
+
+`echarts` (5.5 or 6) is a peer dependency. The chart styles ship with `@loidolt/theme-styles`,
+which you already import for the rest of the system.
+
+```svelte
+<script lang="ts">
+  import { LineChart } from '@loidolt/theme-charts';
+
+  const data = {
+    categories: ['Jan', 'Feb', 'Mar', 'Apr'],
+    series: [
+      { name: 'Cut', data: [42, 48, 51, 63] },
+      { name: 'Scrap', data: [6, 5, 7, 4] },
+    ],
+  };
+</script>
+
+<LineChart title="Sheets per month" {data} dataTable="toggle" />
+```
+
+## Components
+
+| Component          | Draws                                                                   |
+| ------------------ | ----------------------------------------------------------------------- |
+| `LineChart`        | Lines over shared categories; `area` fills under them, `stacked` stacks |
+| `BarChart`         | Bars, vertical or horizontal, side by side or stacked                   |
+| `PieChart`         | Parts of a whole; `innerRadius` makes a donut with a centre label       |
+| `FunnelChart`      | Stages narrowing from first to last                                     |
+| `ScatterChart`     | `[x, y]` points, with optional least-squares trend lines                |
+| `RadarChart`       | Several series across the same measures                                 |
+| `GaugeChart`       | One reading on a scale                                                  |
+| `HeatmapChart`     | A grid of values coloured on the sequential ramp                        |
+| `TreemapChart`     | Nested sizes; click a group to zoom into it                             |
+| `CandlestickChart` | Open, high, low and close per period, with optional volume and zoom     |
+| `SankeyChart`      | Flows between named nodes                                               |
+| `Chart`            | Any ECharts option, themed — the base every chart above is built on     |
+| `ChartDataTable`   | A chart's data as a table, visible or for assistive tech only           |
+
+Every chart takes the same frame props as `Chart`: `title`, `hideTitle`, `description`,
+`height`, `loading`, `error` with `onRetry`, `empty`, `dataTable`, `renderer`, `decal`,
+`animation`, `onItemClick` and a bindable `instance`. User-facing strings (`showTableLabel`,
+`emptyTitle`, table headings…) are props with English defaults.
+
+## Any option, themed
+
+`Chart` takes a plain ECharts option, or a function of the resolved theme colours:
+
+```svelte
+<Chart
+  title="Cuts against target"
+  option={(colors) => ({
+    xAxis: { type: 'category', data: days },
+    yAxis: { type: 'value' },
+    series: [
+      { type: 'bar', data: cuts },
+      { type: 'line', data: target, lineStyle: { color: colors.accent, type: 'dashed' } },
+    ],
+  })}
+  table={{ columns: ['Day', 'Cuts', 'Target'], rows }}
+/>
+```
+
+Whatever the option leaves unset — the palette, axis and gridline colours, the tooltip, legend
+text — is filled in from the theme. Updates replace the option, so a series removed from the data
+leaves the chart; pass `merge` to keep zoom and legend state across updates instead.
+
+## Building options without a component
+
+`@loidolt/theme-charts/core` is plain TypeScript with no Svelte and no ECharts import — safe in
+a server `load`, a worker or a test:
+
+```ts
+import { buildBarOption, describeBar, categoryTable } from '@loidolt/theme-charts/core';
+import { chartColors } from '@loidolt/theme-tokens';
+
+const option = buildBarOption(data, { stacked: true }, chartColors('dark'));
+```
+
+Each chart has a builder (`buildLineOption`, `buildPieOption`, …), a describer (`describeLine`,
+…) and a table helper (`categoryTable`, `sliceTable`, …). Builders throw a `RangeError` on data
+that cannot be drawn — a series shorter than its categories, a negative slice, a candle whose
+range does not hold its body. `applyTheme(option, colors)` themes any option;
+`formatNumber`, `formatCompact`, `formatPercent`, `formatCurrency` and `formatDate` take an
+explicit `locale`, which you should pass when a chart is server-rendered.
+
+## Loading ECharts yourself
+
+Charts import `echarts/core` on first use. To use a global build from a script tag, or a stand-in
+under test, register a loader once:
+
+```ts
+import { setEChartsLoader } from '@loidolt/theme-charts';
+setEChartsLoader(() => window.echarts);
+```
+
+If ECharts cannot be loaded at all, the chart says so and shows its data table instead.
+
+## License
+
+MIT

package/dist/components/BarChart.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import {
+    buildBarOption,
+    describeBar,
+    categoryTable,
+    type BarOptions,
+  } from '../core/builders/category.js';
+  import type { CategoryData } from '../core/types.js';
+  import Chart from './Chart.svelte';
+
+  type ChartProps = Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>;
+
+  interface Props extends ChartProps, BarOptions {
+    /** Categories and a series of values for each. */
+    data: CategoryData;
+    /** Heading of the first column in the data table. */
+    categoryLabel?: string;
+  }
+
+  let {
+    data,
+    orientation,
+    stacked,
+    showValues,
+    showLegend,
+    showTooltip,
+    showGrid,
+    valueFormat,
+    categoryAxisName,
+    valueAxisName,
+    categoryLabel = 'Category',
+    description,
+    empty,
+    instance = $bindable(null),
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const options = $derived({
+    orientation,
+    stacked,
+    showValues,
+    showLegend,
+    showTooltip,
+    showGrid,
+    valueFormat,
+    categoryAxisName,
+    valueAxisName,
+  });
+  const extensions = () => import('../echarts/bar.js').then((module) => module.default);
+</script>
+
+<Chart
+  bind:instance
+  bind:ref
+  option={(colors) => buildBarOption(data, options, colors)}
+  table={categoryTable(data, categoryLabel)}
+  description={description ?? describeBar(data, valueFormat)}
+  empty={empty ?? (data.series.length === 0 || data.categories.length === 0)}
+  {extensions}
+  tableFormat={valueFormat}
+  {...rest}
+/>

package/dist/components/BarChart.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'svelte';
+import { type BarOptions } from '../core/builders/category.js';
+import type { CategoryData } from '../core/types.js';
+import Chart from './Chart.svelte';
+type ChartProps = Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>;
+interface Props extends ChartProps, BarOptions {
+    /** Categories and a series of values for each. */
+    data: CategoryData;
+    /** Heading of the first column in the data table. */
+    categoryLabel?: string;
+}
+declare const BarChart: import("svelte").Component<Props, {}, "ref" | "instance">;
+type BarChart = ReturnType<typeof BarChart>;
+export default BarChart;

package/dist/components/CandlestickChart.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import {
+    buildCandlestickOption,
+    describeCandlestick,
+    candlestickTable,
+    type CandlestickOptions,
+  } from '../core/builders/more.js';
+  import type { CandlestickDatum } from '../core/types.js';
+  import Chart from './Chart.svelte';
+
+  type ChartProps = Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>;
+
+  interface Props extends ChartProps, CandlestickOptions {
+    /** One open, high, low and close per period, optionally with volume. */
+    data: CandlestickDatum[];
+    /** Headings of the data table columns. */
+    tableLabels?: {
+      dateLabel?: string;
+      openLabel?: string;
+      highLabel?: string;
+      lowLabel?: string;
+      closeLabel?: string;
+      volumeLabel?: string;
+    };
+  }
+
+  let {
+    data,
+    showVolume,
+    zoom,
+    showTooltip,
+    upColor,
+    downColor,
+    valueFormat,
+    tableLabels = {},
+    description,
+    empty,
+    instance = $bindable(null),
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const options = $derived({ showVolume, zoom, showTooltip, upColor, downColor, valueFormat });
+  const extensions = () => import('../echarts/candlestick.js').then((module) => module.default);
+</script>
+
+<Chart
+  bind:instance
+  bind:ref
+  option={(colors) => buildCandlestickOption(data, options, colors)}
+  table={candlestickTable(data, tableLabels)}
+  description={description ?? describeCandlestick(data, valueFormat)}
+  empty={empty ?? data.length === 0}
+  {extensions}
+  tableFormat={valueFormat}
+  {...rest}
+/>

package/dist/components/CandlestickChart.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps } from 'svelte';
+import { type CandlestickOptions } from '../core/builders/more.js';
+import type { CandlestickDatum } from '../core/types.js';
+import Chart from './Chart.svelte';
+type ChartProps = Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>;
+interface Props extends ChartProps, CandlestickOptions {
+    /** One open, high, low and close per period, optionally with volume. */
+    data: CandlestickDatum[];
+    /** Headings of the data table columns. */
+    tableLabels?: {
+        dateLabel?: string;
+        openLabel?: string;
+        highLabel?: string;
+        lowLabel?: string;
+        closeLabel?: string;
+        volumeLabel?: string;
+    };
+}
+declare const CandlestickChart: import("svelte").Component<Props, {}, "ref" | "instance">;
+type CandlestickChart = ReturnType<typeof CandlestickChart>;
+export default CandlestickChart;

package/dist/components/Chart.svelte

@@ -0,0 +1,282 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { chartRoles } from '@loidolt/theme-tokens';
+  import {
+    Alert,
+    Button,
+    EmptyState,
+    Skeleton,
+    createMediaQuery,
+    createTokenColors,
+    cx,
+  } from '@loidolt/theme-svelte';
+  import type { FormatOptions } from '../core/format.js';
+  import { applyTheme } from '../core/theme.js';
+  import type { ChartItemEvent, ChartOptionSource, ChartTable } from '../core/types.js';
+  import { loadECharts, type ChartExtensions, type EChartsInstance } from '../echarts.js';
+  import ChartDataTable from './ChartDataTable.svelte';
+
+  type TableMode = 'hidden' | 'toggle' | 'visible' | 'none';
+
+  interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Names the chart — its caption, and the accessible name of the picture. */
+    title: string;
+    /** Keep the caption for assistive tech only, when a heading nearby already names the chart. */
+    hideTitle?: boolean;
+    /**
+     * What the chart shows, in a sentence or two, read after the title. The wrappers write one
+     * from the data; say what matters most if you know better.
+     */
+    description?: string;
+    /** An ECharts option, or a function of the theme colours that builds one. */
+    option: ChartOptionSource;
+    /** The data as a table: the chart's non-visual alternative. */
+    table?: ChartTable;
+    /**
+     * How the table appears: `hidden` for assistive tech only, `toggle` behind a button,
+     * `visible` always, `none` not at all.
+     */
+    dataTable?: TableMode;
+    /** How numbers in the table are written. */
+    tableFormat?: FormatOptions;
+    showTableLabel?: string;
+    hideTableLabel?: string;
+    /** Chart height: pixels, or any CSS length. */
+    height?: number | string;
+    /** Shows a placeholder while the data is on its way. */
+    loading?: boolean;
+    loadingLabel?: string;
+    /** Shows the message in place of the chart. */
+    error?: string | null;
+    errorTitle?: string;
+    /** Offers a retry button with the error. */
+    onRetry?: () => void;
+    retryLabel?: string;
+    /** Shows the empty state in place of the chart. The wrappers set it when there is no data. */
+    empty?: boolean;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    /** Shown if ECharts itself cannot be loaded. */
+    unavailableText?: string;
+    /** `svg` stays crisp in print and at any zoom; `canvas` is faster with many points. */
+    renderer?: 'canvas' | 'svg';
+    /** Transitions. Always off when the user prefers reduced motion. */
+    animation?: boolean;
+    /** Patterns on fills, so series are told apart without relying on colour. */
+    decal?: boolean;
+    /**
+     * Merge updates into the chart rather than replacing the option — keeps zoom and legend
+     * state across data updates. Series and datasets are still replaced whole.
+     */
+    merge?: boolean;
+    /**
+     * The ECharts modules this chart draws with. Defaults to every chart type; the wrappers
+     * pass only their own.
+     */
+    extensions?: ChartExtensions;
+    /** A click on a data point, slice or node. */
+    onItemClick?: (event: ChartItemEvent) => void;
+    /** Called once the ECharts instance exists, for anything the props do not cover. */
+    onReady?: (instance: EChartsInstance) => void;
+    /** The live ECharts instance. Bindable; `null` until loaded. */
+    instance?: EChartsInstance | null;
+    class?: string;
+    ref?: HTMLElement | null;
+  }
+
+  const id = $props.id();
+
+  let {
+    title,
+    hideTitle = false,
+    description,
+    option,
+    table,
+    dataTable = 'hidden',
+    tableFormat,
+    showTableLabel = 'Show data table',
+    hideTableLabel = 'Hide data table',
+    height = 320,
+    loading = false,
+    loadingLabel = 'Loading chart',
+    error = null,
+    errorTitle = 'The chart could not be shown',
+    onRetry,
+    retryLabel = 'Try again',
+    empty = false,
+    emptyTitle = 'No data to show',
+    emptyDescription,
+    unavailableText = 'Charts could not be loaded. The data is in the table below.',
+    renderer = 'canvas',
+    animation = true,
+    decal = false,
+    merge = false,
+    extensions = () => import('../echarts/all.js').then((module) => module.default),
+    onItemClick,
+    onReady,
+    instance = $bindable(null),
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  let surface = $state<HTMLDivElement | null>(null);
+  let chart = $state.raw<EChartsInstance | null>(null);
+  let unavailable = $state(false);
+  let tableOpen = $state(false);
+
+  const palette = createTokenColors(chartRoles, { element: () => ref });
+  const reducedMotion = createMediaQuery('(prefers-reduced-motion: reduce)');
+
+  const resolved = $derived(
+    applyTheme(typeof option === 'function' ? option(palette.colors) : option, palette.colors, {
+      animation: animation && !reducedMotion.matches,
+      decal,
+    })
+  );
+
+  const showChart = $derived(!loading && !error && !empty);
+  const cssHeight = $derived(typeof height === 'number' ? `${height}px` : height);
+  const [titleId, descriptionId, tableId] = [`${id}-title`, `${id}-description`, `${id}-table`];
+
+  // Read the palette off the mounted figure, so a scoped theme around it applies.
+  $effect(() => {
+    if (ref) untrack(() => palette.refresh());
+  });
+
+  // Settled through a derived, so only an actual change of renderer re-creates the instance.
+  const rendererMode = $derived(renderer);
+
+  // One ECharts instance per mounted surface; a new renderer needs a new instance.
+  $effect(() => {
+    const element = surface;
+    const mode = rendererMode;
+    if (!element) return;
+    const load = untrack(() => extensions);
+    let disposed = false;
+    let current: EChartsInstance | null = null;
+    let frame = 0;
+    const observer = new ResizeObserver(() => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        if (current && !current.isDisposed()) current.resize();
+      });
+    });
+    observer.observe(element);
+
+    void (async () => {
+      const core = await loadECharts();
+      const modules = core
+        ? await Promise.all([import('../echarts/base.js').then((module) => module.default), load()])
+        : null;
+      if (disposed) return;
+      if (!core || !modules) {
+        unavailable = true;
+        return;
+      }
+      core.use(modules.flat());
+      current = core.init(element, null, { renderer: mode });
+      // Handlers read the latest prop when they fire, so one registration serves every render.
+      current.on('click', (params) =>
+        onItemClick?.({
+          componentType: String(params.componentType ?? ''),
+          seriesName: params.seriesName as string | undefined,
+          seriesIndex: params.seriesIndex as number | undefined,
+          name: String(params.name ?? ''),
+          dataIndex: params.dataIndex as number | undefined,
+          value: params.value,
+        })
+      );
+      unavailable = false;
+      chart = current;
+      instance = current;
+      onReady?.(current);
+    })();
+
+    return () => {
+      disposed = true;
+      observer.disconnect();
+      cancelAnimationFrame(frame);
+      current?.dispose();
+      chart = null;
+      instance = null;
+    };
+  });
+
+  // Replace, not merge, by default: series removed from the data must leave the chart too.
+  $effect(() => {
+    if (!chart) return;
+    chart.setOption(
+      resolved,
+      merge
+        ? { replaceMerge: ['series', 'dataset'], lazyUpdate: true }
+        : { notMerge: true, lazyUpdate: true }
+    );
+  });
+</script>
+
+<figure
+  bind:this={ref}
+  class={cx('ldt-chart', className)}
+  style:--ldt-chart-height={cssHeight}
+  aria-busy={loading || undefined}
+  {...rest}
+>
+  <figcaption id={titleId} class={cx('ldt-chart__title', hideTitle && 'ldt-sr-only')}>
+    {title}
+  </figcaption>
+
+  {#if loading}
+    <div class="ldt-chart__state">
+      <Skeleton variant="block" height="100%" />
+      <span class="ldt-sr-only" role="status">{loadingLabel}</span>
+    </div>
+  {:else if error}
+    <Alert variant="error" title={errorTitle} class="ldt-chart__alert">
+      <p>{error}</p>
+      {#if onRetry}
+        <Button size="sm" onclick={onRetry}>{retryLabel}</Button>
+      {/if}
+    </Alert>
+  {:else if empty}
+    <EmptyState title={emptyTitle} description={emptyDescription} class="ldt-chart__state" />
+  {:else}
+    {#if unavailable}
+      <Alert variant="warning" class="ldt-chart__alert">{unavailableText}</Alert>
+    {/if}
+    <div
+      bind:this={surface}
+      class="ldt-chart__canvas"
+      role="img"
+      aria-labelledby={titleId}
+      aria-describedby={description ? descriptionId : undefined}
+      hidden={unavailable}
+    ></div>
+    {#if description}<p id={descriptionId} class="ldt-sr-only">{description}</p>{/if}
+  {/if}
+
+  {#if table && showChart && dataTable !== 'none'}
+    {#if dataTable === 'toggle'}
+      <Button
+        size="sm"
+        variant="quiet"
+        class="ldt-chart__table-toggle"
+        aria-expanded={tableOpen}
+        aria-controls={tableId}
+        onclick={() => (tableOpen = !tableOpen)}
+      >
+        {tableOpen ? hideTableLabel : showTableLabel}
+      </Button>
+    {/if}
+    <ChartDataTable
+      id={tableId}
+      {table}
+      caption={title}
+      valueFormat={tableFormat}
+      visuallyHidden={dataTable === 'hidden' && !unavailable}
+      hidden={dataTable === 'toggle' && !tableOpen && !unavailable}
+      class="ldt-chart__table"
+    />
+  {/if}
+</figure>

package/dist/components/Chart.svelte.d.ts

@@ -0,0 +1,73 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { FormatOptions } from '../core/format.js';
+import type { ChartItemEvent, ChartOptionSource, ChartTable } from '../core/types.js';
+import { type ChartExtensions, type EChartsInstance } from '../echarts.js';
+type TableMode = 'hidden' | 'toggle' | 'visible' | 'none';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Names the chart — its caption, and the accessible name of the picture. */
+    title: string;
+    /** Keep the caption for assistive tech only, when a heading nearby already names the chart. */
+    hideTitle?: boolean;
+    /**
+     * What the chart shows, in a sentence or two, read after the title. The wrappers write one
+     * from the data; say what matters most if you know better.
+     */
+    description?: string;
+    /** An ECharts option, or a function of the theme colours that builds one. */
+    option: ChartOptionSource;
+    /** The data as a table: the chart's non-visual alternative. */
+    table?: ChartTable;
+    /**
+     * How the table appears: `hidden` for assistive tech only, `toggle` behind a button,
+     * `visible` always, `none` not at all.
+     */
+    dataTable?: TableMode;
+    /** How numbers in the table are written. */
+    tableFormat?: FormatOptions;
+    showTableLabel?: string;
+    hideTableLabel?: string;
+    /** Chart height: pixels, or any CSS length. */
+    height?: number | string;
+    /** Shows a placeholder while the data is on its way. */
+    loading?: boolean;
+    loadingLabel?: string;
+    /** Shows the message in place of the chart. */
+    error?: string | null;
+    errorTitle?: string;
+    /** Offers a retry button with the error. */
+    onRetry?: () => void;
+    retryLabel?: string;
+    /** Shows the empty state in place of the chart. The wrappers set it when there is no data. */
+    empty?: boolean;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    /** Shown if ECharts itself cannot be loaded. */
+    unavailableText?: string;
+    /** `svg` stays crisp in print and at any zoom; `canvas` is faster with many points. */
+    renderer?: 'canvas' | 'svg';
+    /** Transitions. Always off when the user prefers reduced motion. */
+    animation?: boolean;
+    /** Patterns on fills, so series are told apart without relying on colour. */
+    decal?: boolean;
+    /**
+     * Merge updates into the chart rather than replacing the option — keeps zoom and legend
+     * state across data updates. Series and datasets are still replaced whole.
+     */
+    merge?: boolean;
+    /**
+     * The ECharts modules this chart draws with. Defaults to every chart type; the wrappers
+     * pass only their own.
+     */
+    extensions?: ChartExtensions;
+    /** A click on a data point, slice or node. */
+    onItemClick?: (event: ChartItemEvent) => void;
+    /** Called once the ECharts instance exists, for anything the props do not cover. */
+    onReady?: (instance: EChartsInstance) => void;
+    /** The live ECharts instance. Bindable; `null` until loaded. */
+    instance?: EChartsInstance | null;
+    class?: string;
+    ref?: HTMLElement | null;
+}
+declare const Chart: import("svelte").Component<Props, {}, "ref" | "instance">;
+type Chart = ReturnType<typeof Chart>;
+export default Chart;