[Bug]: charts has bugs and needs improvements in vue

[kaizenics]

Reproduction

Charts

Describe the bug

shadcn ui charts needs to be improved especially in vue. after i apply the charts there is no design displayed as output

[sadeghbarati]

Can you send the reproduction?

I see you open exact same issue in main shadcn-ui without repro

[kaizenics]

the bug here is if i apply that chart is colors, numbers, grids are missing, the whole thing is just empty. even though i've already applied and turn on that features. ik it is still a beta version but still needs improvements

[Samus555]

First time using the Carts they looked like this for me.

This happens if the CSS was not added to the tailwind.css File. If that is your Issue you might want to look at the Installation Instructions (https://www.shadcn-vue.com/docs/charts.html#installation) for the Charts. There you can find the CSS.

If this is not your the same Issue please Provide an example of the Data and the Template Code you used. Maybe i can recreate it.

[sadeghbarati]

Closing for now after repro will reopen

[sadeghbarati]

@kaizenics I think you don't follow the Chart installation that's why Chart looks empty for you

https://stackblitz.com/edit/eqxb5b?file=src%2Fassets%2Findex.css

Stackblitz demo was without color after I followed the Chart installation, it got fixed You need to add these --vis- CSS variables to the root of your tailwindcss files

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;

    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;

    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;

    --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);
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;

    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;

    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;

    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;

    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;

    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;

    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}