Data Visualisation

Area chart

<DomAreaChart>

Show volume over time as overlapping or stacked areas.

Overlapping and stacked areas

Stack revenue streams

Where revenue comes from

Monthly revenue by stream · GBP

View data for Where revenue comes from

Inspect data

Where revenue comes from. Missing measurements are shown as a dash.
month	Subscriptions	Services
Apr	£12,400	£5,800
May	£14,600	£7,800
Jun	£13,800	£6,000
Jul	£18,400	£8,400
Aug	£17,500	£6,800
Sep	£21,600	£9,600

RevenueComposition.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { ref } from 'vue';
import { DomAreaChart, DomToggle } from '@getdom/studio';
const rows = [
	{ month: 'Apr', revenue: 18200, target: 22000, subscriptions: 12400, services: 5800 },
	{ month: 'May', revenue: 22400, target: 22000, subscriptions: 14600, services: 7800 },
	{ month: 'Jun', revenue: 19800, target: 22000, subscriptions: 13800, services: 6000 },
	{ month: 'Jul', revenue: 26800, target: 22000, subscriptions: 18400, services: 8400 },
	{ month: 'Aug', revenue: 24300, target: 22000, subscriptions: 17500, services: 6800 },
	{ month: 'Sep', revenue: 31200, target: 22000, subscriptions: 21600, services: 9600 },
];
const stacked = ref(true);
const series = [{ key: 'subscriptions', label: 'Subscriptions', color: 'chart-1' }, { key: 'services', label: 'Services', color: 'chart-2' }];
</script>
<template>
	<div class="w-full space-y-5">
		<DomToggle v-model="stacked" label="Stack revenue streams" />
		<DomAreaChart title="Where revenue comes from" description="Monthly revenue by stream · GBP" :rows="rows" x-key="month" :series="series" format="currency" :stacked="stacked" />
	</div>
</template>

Working with your data

Records stay in your application. Select events return the original row and index. Use stable series keys and explicit colours when coordinating several charts.

Explore Data Visualisation

Reference

Props

Control props

Name	Type	TS	Default	Description
`rows`	array	Array<unknown>	[]	Application-owned records. Missing measurements remain gaps; zero is valid.
`series`	array	Array<unknown>	[]	Field keys or { key, label, color, dashed } definitions. Keep keys stable when filtering.
`xKey`	string	string	'date'	Record field used for category or horizontal axis values.
`xType`	'category' \| 'time' \| 'number'	string	'category'	Category preserves row order; time and number use proportional, sorted coordinates.
`title`	string	string	'Chart'	Visible title and accessible chart name.
`description`	string	string	''	Supporting context, units, or reporting period.
`height`	number	number	280	Plot height in pixels; width responds to its container.
`format`	'number' \| 'compact' \| 'currency' \| 'percent'	string	'number'	Value format. Percent expects fractions, such as 0.25 for 25%.
`currency`	string	string	'GBP'	ISO currency code for currency formatting.
`locale`	string	string	'en-GB'	Locale used for number and date labels.
`valueFormatter`	function	Function	—	Optional (value) => string override shared by axes, tooltips, and tables.
`xFormatter`	function	Function	—	Optional (value) => string override for category/date labels.
`yFormatter`	function	Function	—	Optional (value) => string for value-axis ticks only. Tooltips and tables keep the full valueFormatter output.
`loading`	boolean	boolean	false	Show a loading state in the reserved plot space.
`error`	string	string	''	Show an application-owned error with a retry action.
`emptyLabel`	string	string	'No data for this period'	Message when no finite measurements are available.
`legend`	boolean	boolean	true	Show buttons to toggle series without changing their colours.
`showTable`	boolean	boolean	true	Offer an accessible, server-rendered table of the chart data.
`grid`	boolean	boolean	true	Show subtle value-axis grid lines.
`curve`	'linear' \| 'monotoneX' \| 'step'	string	'linear'	Line interpolation. Linear avoids implying unobserved smooth changes.
`stacked`	boolean	boolean	false	Stack visible series on a shared baseline.

Auto-generated from Area chart.props and inline _edit hints.

Events

Name	Payload	Description
@select	{ row, index }	Original application record selected by click or Enter.
@retry	—	Requests another attempt to load application data.

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.

Keyboard

Arrow keys / Home / EndInspect data points.
EnterSelect the inspected record.