LineChart

Charts

An SVG line chart with multi-series support, area fill, hover tooltips, and a legend. Zero dependencies.

Props

Prop	Type	Default	Description
`labels`*	`string[]`	`–`	X-axis labels.
`datasets`*	`DsLineChartDataset[]`	`–`	Each dataset: { label, data, color? }.
`showArea`	`boolean`	`false`	Fill the area below lines.
`showDots`	`boolean`	`true`	Render dots at data points.
`showGrid`	`boolean`	`true`	Render horizontal grid lines.
`showLegend`	`boolean`	`true`	Show legend for multiple datasets.
`height`	`number`	`240`	Chart height in pixels.

Examples

Multi-series line chart

Revenue

Expenses

vue

<DsLineChart
  :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
  :datasets="[
    { label: 'Revenue', data: [4200, 5800, 4900, 7200, 6800, 9100] },
    { label: 'Expenses', data: [3100, 3600, 4100, 3800, 4500, 5200] },
  ]"
  :show-area="true"
  :show-dots="true"
  :show-grid="true"
/>

Area chart

Revenue

Expenses

vue

<DsLineChart
  :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
  :datasets="[
    { label: 'Revenue', data: [4200, 5800, 4900, 7200, 6800, 9100] },
    { label: 'Expenses', data: [3100, 3600, 4100, 3800, 4500, 5200] },
  ]"
  :show-area="true"
  :show-dots="true"
  :show-grid="true"
/>

Single series

vue

<DsLineChart
  :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
  :datasets="[
    { label: 'Revenue', data: [4200, 5800, 4900, 7200, 6800, 9100] },
    { label: 'Expenses', data: [3100, 3600, 4100, 3800, 4500, 5200] },
  ]"
  :show-area="true"
  :show-dots="true"
  :show-grid="true"
/>

Skeleton

Use DsLineChartSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsLineChartSkeleton :height="240" />

Accessibility

Pure SVG — screen-reader friendly with descriptive tooltip text.

GaugeChart

RadarChart