Chart type

Area

Line

Bar

Donut

Dependencies

Charts components is built on top of Unovis (a modular data visualization framework).

Installation

Only works with Vue >= 3.3

Update css

Add the following tooltip styling to your tailwind.css file:

@layer base {
  :root {
    /* ... */
    --vis-tooltip-background-color: none !important;
    --vis-tooltip-border-color: none !important;
    --vis-tooltip-text-color: none !important;
    --vis-tooltip-shadow-color: none !important;
    --vis-tooltip-backdrop-filter: none !important;
    --vis-tooltip-padding: none !important;

    --vis-primary-color: var(--primary);
    /* change to any hsl value you want */
    --vis-secondary-color: 160 81% 40%;
    --vis-text-color: var(--muted-foreground);
  }

If you are not using css-variables for your component, you need to update the --vis-primary-color and --vis-text-color to your desired hsl values (use any "rgb to hsl" converter).

Be sure to provide dark mode styling as well.

Colors

By default, we construct the primary theme color, and secondary (--vis-secondary-color) color with different opacity for the graph.

However, you can always pass in the desired color into each chart.

<template>
  <AreaChart
    :data="data"
    :colors="['blue', 'pink', 'orange', 'red']"
  />
</template>

Custom tooltip

If you want to customize the Tooltip for the chart, you can pass customTooltip prop with a custom Vue component. The custom component would receive title and data props, check out ChartTooltip.vue component for example.

The expected prop definition would be:

defineProps<{
  title?: string
  data: {
    name: string
    color: string
    value: any
  }[]
}>()