TrendChart

A smooth line + gradient-fill area chart, Apple/Samsung-Health-inspired, for a short time series (e.g. 14 days of steps or active calories).

Playground

Stepsmax 9.200 steps

2026-07-10: 8.600 steps

01020304050607080910

points: 10 estimated point index accentColor accentzone-undernutrient-carbsnutrient-water

Tap any point in the chart above to move the floating caption — that's the chart's own internal state, not something this page wires up. Drag points down to 0 or 1 to see the degenerate-input guard (no chart, no crash). Set estimated point index to -1 to remove the hollow/dashed point.

<script setup>
import { TrendChart } from 'yemek'
</script>

<template>
  <TrendChart
    title="Steps"
    :points="stepsTrendPoints"
    max-prefix="max"
    accent-color="var(--yemek-color-accent)"
  />
</template>

Types

interface TrendPoint {
  date: string
  value: number
  /** Short axis label, e.g. "06". */
  dayLabel: string
  /** Full label for the selected-value caption, e.g. "06.07." — falls back to dayLabel if omitted. */
  fullLabel?: string
  /** Flags a value as a fallback/estimate (e.g. an estimation used when a real reading hasn't
   * synced yet) — rendered as a hollow dot + dashed line segment. */
  estimated?: boolean
}

Props

Prop	Type	Default	Description
title	string	—	Chart heading.
points	TrendPoint[]	—	Data points, oldest first. Plain data the consumer already computed — no date math, no aggregation.
unitLabel	string	''	Unit suffix appended to the caption value.
accentColor	string	var(--yemek-color-accent)	Line/gradient color.
maxPrefix	string	'max'	Prefix for the header's max-value caption — already-localized.
estimatedLabel	string	undefined	Appended to the caption when the selected point is estimated, e.g. "estimated". Omit to render estimated points the same as real ones except for dot/line styling.

Behavior notes

• Manages its own selectedIndex state internally (defaults to the most recent point) — tap any point to move the floating caption; the consumer doesn't own this interaction.
• Estimated points (estimated: true) render as a hollow, dashed-line dot instead of the normal solid marker — a visual cue that the value is a fallback, not a real reading.
• Degenerate input (empty points, or all-zero values) is guarded against internally — no malformed SVG paths, no -Infinity from an empty min/max.