Chart
Sectile Chart draws line, scatter, bar, heatmap, pie, and donut charts. Use the Vue components for a Vue application, connect it to existing HTML with the DOM API, or use the renderer-independent package when you need to draw the result yourself.
Your records stay in ordinary arrays. You choose which fields supply the ID and plotted values, and Sectile handles scales, selection, panning, zooming, hit testing, and Canvas rendering.
Try every built-in chart
Switch between the six chart types below. Hover or select a mark, then use the visible controls on Cartesian charts to move or resize the horizontal range. Open Code for a complete Vue or DOM example you can adapt.
Weekly revenue trend
Show change across ordered values as a continuous line.
- Hovered datum
- None
- Selected datum
- None
<script setup lang="ts">
import {
ChartLine, ChartAxisView, ChartCartesian, ChartNavigation,
ChartPanControl, ChartPlot, ChartRenderer, ChartResetView, ChartRoot,
ChartViewControls, ChartXAxis, ChartYAxis, ChartZoomControl,
} from '@sectile/vue/chart'
const revenue = [
{ id: 'week-27', date: new Date('2026-07-06'), revenue: 128 },
{ id: 'week-28', date: new Date('2026-07-13'), revenue: 142 },
{ id: 'week-29', date: new Date('2026-07-20'), revenue: 137 },
{ id: 'week-30', date: new Date('2026-07-27'), revenue: 163 },
]
const datumLabels = new Map(revenue.map(point => [point.id, point.date.toLocaleDateString()]))
const dom = {
renderer: 'auto',
accessibilityLabel: 'Weekly revenue trend',
getAccessibleDatumLabel: (id: string | number) => datumLabels.get(String(id)) ?? String(id),
} as const
</script>
<template>
<ChartRoot :dom="dom" class="chart">
<ChartCartesian>
<ChartXAxis id="x" scale="temporal" field="date" label="Week">
<ChartAxisView :minimum-span="1" />
</ChartXAxis>
<ChartYAxis id="y" scale="linear" field="revenue" label="Revenue" unit="USD thousands" />
<ChartLine id="revenue-series" :data="revenue" x-axis="x" y-axis="y" label="Revenue" />
<ChartNavigation keyboard />
<ChartViewControls axis="x">
<ChartPanControl direction="backward">Previous</ChartPanControl>
<ChartZoomControl direction="in">Zoom in</ChartZoomControl>
<ChartZoomControl direction="out">Zoom out</ChartZoomControl>
<ChartResetView>Reset</ChartResetView>
</ChartViewControls>
</ChartCartesian>
<ChartPlot><ChartRenderer /></ChartPlot>
</ChartRoot>
</template>
<style scoped>
.chart {
position: relative;
height: 24rem;
}
.chart :deep([data-part='plot']),
.chart :deep(canvas) {
width: 100%;
height: 100%;
}
</style>Choose a chart
| What you want to show | Chart |
|---|---|
| Change over time or another ordered value | Line |
| Relationship between two numeric values | Scatter |
| Comparison between categories | Bar |
| Concentration across two dimensions | Heatmap |
| A few parts of one total | Pie |
| Parts of a total with room for a center label | Donut |
Line, scatter, bar, and heatmap charts use an x-axis and y-axis. Pie and donut charts use a radial coordinate and do not have pan or zoom controls.
Sectile does not currently provide first-class histogram, stacked-bar, area, candlestick, box-plot, gauge, map, network, contour, or 3D chart components. A custom renderer can cover some of these cases, but it requires more work than the built-in chart types.
Choose an integration
| Your application | Install | Start with |
|---|---|---|
| Vue | vue @sectile/chart @sectile/dom @sectile/vue | ChartRoot |
| Existing HTML and TypeScript | @sectile/chart @sectile/dom | createDOMChart |
| Custom renderer or non-browser host | @sectile/chart | createChartController |
@sectile/chart is needed only when you import the chart entry points from @sectile/dom or @sectile/vue. Other DOM and Vue features do not pull it into your application.
Continue by task
| Task | Guide |
|---|---|
| Map records to axes and update data | Data and scales |
| Build a custom renderer, tooltip, or hit test | Drawing and hit testing |
| Add selection, keyboard access, pan, and zoom | Interaction and state |
| Connect existing browser elements | DOM rendering |
| Compose a chart in a Vue template | Vue composition |
| Choose how much detail to keep with large data | Large datasets |
What your application still provides
Sectile reads and validates data you provide, but it does not fetch that data or decide how values should be formatted. Your application still supplies loading and error states, colors and layout, number and date formatting, annotations, and any saved selection or visible range.
The DOM and Vue integrations measure the chart, render it with Canvas, expose accessible labels, and remove their browser resources when disconnected or unmounted.