UI Thing
Charts
Line

Line

A line chart visually displays data points connected by straight lines, illustrating trends or relationships over a continuous axis.

Source code

Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

npx ui-thing@latest add chart

Usage

Basic

Sparkline

We can turn the chart into sparkline chart by hiding axis, gridline and legends.

Custom Tooltip

If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition here.

Custom Tooltip Component

This is what the CustomChartTooltip component looks like:

<template>
  <UiCard class="text-sm">
    <UiCardContent class="flex min-w-[180px] flex-col gap-2 p-3">
      <div v-for="(item, key) in data" :key="key" class="flex items-center justify-between">
        <div class="flex items-center">
          <span class="mr-4 h-7 w-1 rounded-full" :style="{ background: item.color }" />
          <span>{{ item.name }}</span>
        </div>
        <span class="ml-4 font-semibold">{{ item.value }}</span>
      </div>
    </UiCardContent>
  </UiCard>
</template>

<script setup lang="ts">
  defineProps<{
    title?: string;
    data: {
      name: string;
      color: string;
      value: any;
    }[];
  }>();
</script>

Donut

A donut chart visually represents data in a circular form, similar to a pie chart but with a central void, emphasizing proportions within categories.

Introduction

This section consists of some stuff that are nice to have in your app. Not needed for all projects but can be useful in some cases.