Charts

Versatile visualization tool, allowing users to represent data using various types of charts for effective analysis.

Charts components were built on top of Unovis (a modular data visualization framework), and inspired by tremor.

Credits

Thanks to the shadcn-vue team for doing all the work lol. I just ported it to Nuxt.

Installation

Update your tailwind.css file

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 value.

You may use this tool to help you find the hsl value for your primary color and text color. 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;
  }[];
}>();