From eff7d65f78e1826cf5f3a470d78f0f63a5696659 Mon Sep 17 00:00:00 2001 From: zernonia Date: Tue, 5 Dec 2023 13:19:30 +0800 Subject: [PATCH] docs: add charts installations step --- apps/www/src/content/docs/charts/area.md | 31 +++++++++++++++++++++-- apps/www/src/content/docs/charts/bar.md | 30 ++++++++++++++++++++-- apps/www/src/content/docs/charts/donut.md | 31 +++++++++++++++++++++-- apps/www/src/content/docs/charts/line.md | 30 ++++++++++++++++++++-- 4 files changed, 114 insertions(+), 8 deletions(-) diff --git a/apps/www/src/content/docs/charts/area.md b/apps/www/src/content/docs/charts/area.md index a430cf9d..95d55b72 100644 --- a/apps/www/src/content/docs/charts/area.md +++ b/apps/www/src/content/docs/charts/area.md @@ -8,9 +8,36 @@ description: Displays a callout for user attention. ## Installation - + + Only works with Vue >3.3 + + + + + +### Run the following command + ```bash npx shadcn-vue@latest add chart-area ``` + +### Update `css` + +Add the following tooltip styling to your `tailwind.css` file: + +```css +@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; + } +``` - \ No newline at end of file + + + diff --git a/apps/www/src/content/docs/charts/bar.md b/apps/www/src/content/docs/charts/bar.md index dcd9c347..961883b1 100644 --- a/apps/www/src/content/docs/charts/bar.md +++ b/apps/www/src/content/docs/charts/bar.md @@ -8,9 +8,35 @@ description: Displays a callout for user attention. ## Installation - + + Only works with Vue >3.3 + + + + +### Run the following command + ```bash npx shadcn-vue@latest add chart-bar ``` + +### Update `css` + +Add the following tooltip styling to your `tailwind.css` file: + +```css +@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; + } +``` - \ No newline at end of file + + + diff --git a/apps/www/src/content/docs/charts/donut.md b/apps/www/src/content/docs/charts/donut.md index cee85641..88c52450 100644 --- a/apps/www/src/content/docs/charts/donut.md +++ b/apps/www/src/content/docs/charts/donut.md @@ -8,9 +8,36 @@ description: Displays a callout for user attention. ## Installation - + +Only works with Vue >3.3 + + + + + +### Run the following command + ```bash npx shadcn-vue@latest add chart-donut ``` + +### Update `css` + +Add the following tooltip styling to your `tailwind.css` file: + +```css +@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; + } +``` - \ No newline at end of file + + + diff --git a/apps/www/src/content/docs/charts/line.md b/apps/www/src/content/docs/charts/line.md index 6ada4d8b..081fd0cc 100644 --- a/apps/www/src/content/docs/charts/line.md +++ b/apps/www/src/content/docs/charts/line.md @@ -8,9 +8,35 @@ description: Displays a callout for user attention. ## Installation - + + Only works with Vue >3.3 + + + + +### Run the following command + ```bash npx shadcn-vue@latest add chart-line ``` + +### Update `css` + +Add the following tooltip styling to your `tailwind.css` file: + +```css +@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; + } +``` - \ No newline at end of file + + +