Start free

Guides

Mounting and styling charts

Render charts into your elements, theme them with CSS variables, and draw your own empty states.

Mount a chart

TypeScript
import '@kymoscope/sdk/styles/charts.css'   // once; script-tag hosts use a <link>

const view = engine.charts.mount(chartId, element, {
  theme: 'light',                            // default: inherited data-color-scheme, else dark
  style: { background: '#fff', grid: '#e5e7eb' },
  className: 'my-chart',
})

// Later:
view.destroy()
  • The chart fills element; give the element a height.
  • A view re-renders on its own when its model, the plotted data or the zoom change.
  • view.setOptions(options) replaces the mount options without remounting.
  • engine.dispose() destroys every view of that engine.

Colours

Chart colours are CSS custom properties, read from the chart element and its ancestors. Override them anywhere, or per chart through style.

VariableUsed for
--chart-bgPlot background. A background set on the model with charts.setBackground wins over the theme.
--chart-mutedAxis labels, ticks and legend text.
--chart-gridGrid and frame lines.
--accentCursor and highlights.
HTML
<style>
  .analysis { --chart-bg: #0b1020; --chart-grid: #1f2a44; --accent: #f5a524; }
</style>
<div class="analysis" data-color-scheme="dark">
  <div id="chart" style="height: 320px"></div>
</div>

Series and dataset colours are data, not theme: they come from the chart settings and datasets.setColor.

Light and dark

charts.css defines both palettes. A chart is dark unless an ancestor has data-color-scheme="light" or it was mounted with theme: 'light'. When the attribute changes on <html>, every mounted chart repaints on its own. If you theme a smaller container instead, call view.setOptions({ theme }) on its charts.

Fonts

Canvas text cannot inherit CSS fonts. Tell the engine which families to draw with:

TypeScript
await document.fonts.load('12px "Inter"')
engine.charts.setFonts({ sans: '"Inter", system-ui, sans-serif', mono: '"JetBrains Mono", monospace' })

Load the font before calling it. The setting applies to every chart on the page and redraws the mounted ones.

Empty states

Charts draw no placeholder text. A view reports a status, and your UI shows what it wants on top:

StatusMeaning
'no-data'Nothing is plotted: no dataset, lap or live stream is selected.
'empty'Data is plotted, but this chart has nothing to draw with its settings (no series, no column picked, column missing).
'ready'The chart is drawing.
TypeScript
const view = engine.charts.mount(chartId, plotEl)
const render = (status) => {
  hint.hidden = status === 'ready'
  hint.textContent = status === 'no-data' ? 'Import a file to start.' : 'Pick a column in the chart settings.'
}
view.on('status', render)
render(view.status())

status() returns null until the first render; the status event fires once it is known. The chart element also carries data-status for CSS.