<sv-chart> reference

Every property, attribute and event of the chart custom element.

This page is generated from SvChart's own props type by packages/grid-wc/scripts/generate-surface.mjs, the same way the <sv-grid> reference is, and CI fails if it drifts.

Loading it

<script type="module" src="https://cdn.jsdelivr.net/npm/@svgrid/grid-wc/dist/chart/sv-chart-element.js"></script>

<sv-chart id="chart" legend="right" zoomable range-presets></sv-chart>
<script type="module">
  const chart = document.getElementById('chart')
  chart.spec = {                                  // property: an object
    type: 'line',
    categories: ['2026-01-01', '2026-01-02', '2026-01-03'],
    series: [{ label: 'Close', values: [10, 12, 11] }],
    xType: 'ordinal-time',
  }
  chart.addEventListener('select', (e) => console.log(e.detail))   // { category, series, value }
  chart.addEventListener('zoom', (e) => console.log(e.detail))     // { i0, i1 } or null
</script>

From npm, import '@svgrid/grid-wc/chart' registers the element; the React and Vue wrappers are @svgrid/grid-wc/react/chart and @svgrid/grid-wc/vue/chart, and the Angular package exports SvChartComponent next to SvGridComponent.

Attributes vs properties

The same rule as the grid element: primitives are attributes, arrays / objects / functions are properties. spec is always a property. A prop that takes a boolean OR a string, like legend (true, or a side), keeps a string attribute: legend alone means true, legend="right" puts the legend on the right, legend="false" hides it.

The bindable props (zoom, selected, drill-path, and the drawings) are written back onto the element after their event, so chart.zoom reads the current window inside or after a zoom listener.

Attributes (26)

Primitives, so they work in plain HTML as well as through a property.

Properties only (7)

Arrays, objects and functions. An HTML attribute is a string, so these can only be assigned in script: el.columns = [...].

Events (8)

detail is the callback's argument. The one callback that takes two carries an object keyed by its parameter names.

Not exposed (4)

What it renders

The element is the Svelte chart component with a DOM surface, so everything the component draws, the element draws from the same spec: every chart type, synchronized charts with the zoom gestures and the context menu, and the financial toolkit with its indicator panes and drawing tools. These three demos are that component; give <sv-chart> their specs and the picture is the same.

Where the spec comes from

The element takes the same ChartSpec the Svelte component does. Build it by hand, or with the helpers exported from @svgrid/grid: rowsToChartSpec for a grouped chart from rows, rowsToOhlcSpec for candlesticks, indicatorPane for an RSI / MACD / volume pane. The charts guide covers every field.