Spark line

A sparkline is a tiny chart that provides a visual representation of data. Use sparklines to show trends in a series of values, such as seasonal increases or decreases, economic cycles, or to highlight maximum and minimum values. Position a sparkline near its data for greatest impact.

Basic

The sparkline component is fully responsive and recalculates (with a debounce) to any dimension you set with css. Color can be set to the usual primary, secondary, tertiary

<script setup lang="ts">
import { ref } from 'vue'

const mockValues = [5, 0, 1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 2, 2, 2, 0, 0, 0, 4, 1, 1, 2, 1, 1, 2, 1, 2, 1, 3, 3, 3]
let index = 0

const stream1 = ref({ value: 1 })
const stream2 = ref({ value: 1 })
setInterval(() => {
  stream1.value = { value: mockValues[index % mockValues.length] * 100000 }
  stream2.value = { value: mockValues[(index + mockValues.length / 2) % mockValues.length] * 2 }
  index++
}, 1000)
</script>

<template>
  <div class="flex flex-col gap-4">
    <BSparkLine
      :stream="stream1"
      class="h-3 w-1/8"
    />
    <BSparkLine
      color="secondary"
      :stream="stream1"
      class="h-5 w-1/3"
    />
    <BSparkLine
      color="primary"
      :stream="stream2"
      class="h-10 w-1/2"
    />
    <BSparkLine
      color="tertiary"
      :stream="stream1"
      class="h-15 w-full"
    />
    <BSparkLineNext
      color="primary"
      :stream="stream1"
      class="h-20 w-full"
    />
  </div>
</template>

With min max set

By default the sparkline auto scales to the peak values in its buffer. By setting a static max & min value this behavior can be overridden

<script setup lang="ts">
import { ref } from 'vue'

const mockValues = [0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 2, 2, 2, 0, 0, 0, 4, 1, 1, 2, 1, 1, 2, 1, 2, 1, 3, 3, 3]
let index = 0

const stream1 = ref({ value: 1 })
setInterval(() => {
  stream1.value = { value: mockValues[index % mockValues.length] }
  index++
}, 1000)
</script>

<template>
  <div class="flex flex-col gap-4">
    <BSparkLine
      max="100"
      :stream="stream1"
      class="h-12"
    />
    <BSparkLine
      max="50"
      color="secondary"
      :stream="stream1"
      class="h-12"
    />
    <BSparkLine
      max="25"
      color="tertiary"
      :stream="stream1"
      class="h-12"
    />
  </div>
</template>

Hover to show value

Setting the hoverable prop makes the sparkline display a thin line at the current pointer position and a tooltip showing the indexed value

<script setup lang="ts">
import { ref } from 'vue'

const mockValues = [0.1, 0.2, 0.5, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 2, 2, 2, 0, 0, 0, 4, 1, 1, 2, 1, 1, 2, 1, 2, 1, 3, 3, 3]
let index = 0

const stream1 = ref({ value: 1 })
setInterval(() => {
  stream1.value = { value: mockValues[index % mockValues.length] }
  index++
}, 1000)
</script>

<template>
  <div class="flex flex-col gap-4">
    <BSparkLine
      hoverable
      :stream="stream1"
      class="h-16"
    />
  </div>
</template>

Slot(s) and slot props

The sparkline component exposes the peak (min & max) values in the default slot. It also has a slot named tooltip which exposes an index and the raw data buffer. With these its fairly trivial to add some extra details and a custom tooltip

0 ℃

0 ℃

<script setup lang="ts">
import { ref } from 'vue'

const mockValues = [0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 2, 2, 2, 0, 0, 0, 4, 1, 1, 2, 1, 1, -2, 1, 2, 1, 3, 3, 3]
let i = 0
const limit = 30

const stream1 = ref({ value: 1 })
setInterval(() => {
  stream1.value = { value: mockValues[i % mockValues.length] * 2.433 }
  i++
}, 1000)
</script>

<template>
  <div class="flex flex-col gap-4">
    <BSparkLine
      :stream="stream1"
      class="h-16"
      :limit="limit"
      hoverable
    >
      <template
        #default="{ peakMax, peakMin }"
      >
        <div class="absolute top-0 flex font-semibold">
          <div class="w-5 border-t-1 border-t-dashed border-outline-variant" />
          <div class="border-t-1 border-t-solid border-outline-variant bg-primary text-primary-on rounded-md rounded-tl-none text-xs px-1">
            {{ Math.round(peakMax * 10) / 10 }} ℃
          </div>
        </div>

        <div class="absolute bottom-0 flex font-semibold">
          <div class="w-5 border-b-1 border-b-dashed border-outline-variant" />
          <div class="border-b-1 border-b-solid border-outline-variant bg-secondary text-secondary-on rounded-md rounded-bl-none text-xs px-1">
            {{ Math.round(peakMin * 10) / 10 }} ℃
          </div>
        </div>
      </template>
      <template #tooltip="{ buffer, index }">
        <p class="font-bold">
          {{ `${Math.round(buffer[index] * 10) / 10} ℃` }}
        </p>
        <p class="text-xs">
          {{ (limit - 1) - index ? `${(limit - 1) - index} seconds ago` : 'Just now' }}
        </p>
      </template>
    </BSparkLine>
  </div>
</template>