Website: Client-side error when opening Drawer in Chart -> Tooltip section on mobile

trueberryless commented 1 month ago

Describe the bug

On mobile devices when clicking on "View code" on the page "Charts" in the "Tooltip" section, the application gives a client side error.

I can only guess why this behaviour is that way: Maybe the downwards scrolling of the Drawer doesn't work because there is no page left downwards... Just a guess...

Affected component/components

Drawer

How to reproduce

Take your phone
Go to https://ui.shadcn.com/charts#tooltip
Click "View code"

Codesandbox/StackBlitz link

Literally this repo

Logs

No response

System Info

Brave Browser, Android 14

Before submitting

[ ] I've made research efforts and searched the documentation
[ ] I've searched for existing issues

nullnullsieben commented 1 month ago

"use client"

import { TrendingUp } from "lucide-react" import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card" import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, } from "@/components/ui/chart" const chartData = [ { month: "January", desktop: 186 }, { month: "February", desktop: 305 }, { month: "March", desktop: 237 }, { month: "April", desktop: 73 }, { month: "May", desktop: 209 }, { month: "June", desktop: 214 }, ]

const chartConfig = { desktop: { label: "Desktop", color: "hsl(var(--chart-1))", }, } satisfies ChartConfig

export function Component() { return (

Bar Chart January - June 2024 value.slice(0, 3)} /> } />

Trending up by 5.2% this month

Showing total visitors for the last 6 months

) } trueberryless ***@***.***> schrieb am Mo., 5. Aug. 2024, 12:02: > Describe the bug > > On mobile devices when clicking on "View code" on the page "Charts" in the > "Tooltip" section, the application gives a client side error. > > I can only guess why this behaviour is that way: Maybe the downwards > scrolling of the Drawer doesn't work because there is no page left > downwards... Just a guess... > Affected component/components > > Drawer > How to reproduce > > 1. Take your phone > 2. Go to https://ui.shadcn.com/charts#tooltip > 3. Click "View code" > > Codesandbox/StackBlitz link > > Literally this repo > Logs > > *No response* > System Info > > Brave Browser, Android 14 > > Before submitting > > - I've made research efforts and searched the documentation > - I've searched for existing issues > > — > Reply to this email directly, view it on GitHub > , or unsubscribe > > . > You are receiving this because you are subscribed to this thread.Message > ID: ***@***.***> >

nullnullsieben commented 1 month ago

"use client"

import { TrendingUp } from "lucide-react" import { Pie, PieChart } from "recharts"

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card" import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, } from "@/components/ui/chart" const chartData = [ { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, { browser: "other", visitors: 90, fill: "var(--color-other)" }, ]

const chartConfig = { visitors: { label: "Visitors", }, chrome: { label: "Chrome", color: "hsl(var(--chart-1))", }, safari: { label: "Safari", color: "hsl(var(--chart-2))", }, firefox: { label: "Firefox", color: "hsl(var(--chart-3))", }, edge: { label: "Edge", color: "hsl(var(--chart-4))", }, other: { label: "Other", color: "hsl(var(--chart-5))", }, } satisfies ChartConfig

export function Component() { return (

Pie Chart - Custom Label January - June 2024 } /> { return ( {`${ chartConfig[payload.browser as keyof typeof chartConfig] ?.label } (${payload.visitors})`} ) }} nameKey="browser" />

Trending up by 5.2% this month

Showing total visitors for the last 6 months

) } Steven ***@***.***> schrieb am Mo., 5. Aug. 2024, 12:04: > "use client" > > import { TrendingUp } from "lucide-react" > import { Bar, BarChart, CartesianGrid, XAxis } from "recharts" > > import { > Card, > CardContent, > CardDescription, > CardFooter, > CardHeader, > CardTitle, > } from "@/components/ui/card" > import { > ChartConfig, > ChartContainer, > ChartTooltip, > ChartTooltipContent, > } from "@/components/ui/chart" > const chartData = [ > { month: "January", desktop: 186 }, > { month: "February", desktop: 305 }, > { month: "March", desktop: 237 }, > { month: "April", desktop: 73 }, > { month: "May", desktop: 209 }, > { month: "June", desktop: 214 }, > ] > > const chartConfig = { > desktop: { > label: "Desktop", > color: "hsl(var(--chart-1))", > }, > } satisfies ChartConfig > > export function Component() { > return ( > > > Bar Chart > January - June 2024 > > > > > > dataKey="month" > tickLine={false} > tickMargin={10} > axisLine={false} > tickFormatter={(value) => value.slice(0, 3)} > /> > cursor={false} > content={} > /> > /> > > > > >

> Trending up by 5.2% this month >

>

> Showing total visitors for the last 6 months >

> > > ) > } > > trueberryless ***@***.***> schrieb am Mo., 5. Aug. 2024, > 12:02: > >> Describe the bug >> >> On mobile devices when clicking on "View code" on the page "Charts" in >> the "Tooltip" section, the application gives a client side error. >> >> I can only guess why this behaviour is that way: Maybe the downwards >> scrolling of the Drawer doesn't work because there is no page left >> downwards... Just a guess... >> Affected component/components >> >> Drawer >> How to reproduce >> >> 1. Take your phone >> 2. Go to https://ui.shadcn.com/charts#tooltip >> 3. Click "View code" >> >> Codesandbox/StackBlitz link >> >> Literally this repo >> Logs >> >> *No response* >> System Info >> >> Brave Browser, Android 14 >> >> Before submitting >> >> - I've made research efforts and searched the documentation >> - I've searched for existing issues >> >> — >> Reply to this email directly, view it on GitHub >> , or unsubscribe >> >> . >> You are receiving this because you are subscribed to this thread.Message >> ID: ***@***.***> >> >

nullnullsieben commented 1 month ago

"use client"

import { TrendingDown, TrendingUp } from "lucide-react" import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card" import { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from "@/components/ui/chart" const chartData = [ { month: "January", desktop: 186, mobile: 80 }, { month: "February", desktop: 305, mobile: 200 }, { month: "March", desktop: 237, mobile: 120 }, { month: "April", desktop: 73, mobile: 190 }, { month: "May", desktop: 209, mobile: 130 }, { month: "June", desktop: 214, mobile: 140 }, ]

const chartConfig = { desktop: { label: "Desktop", color: "hsl(var(--chart-1))", icon: TrendingDown, }, mobile: { label: "Mobile", color: "hsl(var(--chart-2))", icon: TrendingUp, }, } satisfies ChartConfig

export function Component() { return (

Area Chart - Icons Showing total visitors for the last 6 months value.slice(0, 3)} /> } /> } />

Trending up by 5.2% this month

January - June 2024

) } Steven ***@***.***> schrieb am Mo., 5. Aug. 2024, 12:04: > "use client" > > import { TrendingUp } from "lucide-react" > import { Pie, PieChart } from "recharts" > > import { > Card, > CardContent, > CardDescription, > CardFooter, > CardHeader, > CardTitle, > } from "@/components/ui/card" > import { > ChartConfig, > ChartContainer, > ChartTooltip, > ChartTooltipContent, > } from "@/components/ui/chart" > const chartData = [ > { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, > { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, > { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, > { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, > { browser: "other", visitors: 90, fill: "var(--color-other)" }, > ] > > const chartConfig = { > visitors: { > label: "Visitors", > }, > chrome: { > label: "Chrome", > color: "hsl(var(--chart-1))", > }, > safari: { > label: "Safari", > color: "hsl(var(--chart-2))", > }, > firefox: { > label: "Firefox", > color: "hsl(var(--chart-3))", > }, > edge: { > label: "Edge", > color: "hsl(var(--chart-4))", > }, > other: { > label: "Other", > color: "hsl(var(--chart-5))", > }, > } satisfies ChartConfig > > export function Component() { > return ( > > > Pie Chart - Custom Label > January - June 2024 > > > config={chartConfig} > className="mx-auto aspect-square max-h-[250px]" > > > > content={ />} > /> > data={chartData} > dataKey="visitors" > labelLine={false} > label={({ payload, ...props }) => { > return ( > cx={props.cx} > cy={props.cy} > x={props.x} > y={props.y} > textAnchor={props.textAnchor} > dominantBaseline={props.dominantBaseline} > fill="hsla(var(--foreground))" > > > {`${ > chartConfig[payload.browser as keyof typeof > chartConfig] > ?.label > } (${payload.visitors})`} > > ) > }} > nameKey="browser" > /> > > > > >

> Trending up by 5.2% this month >

>

> Showing total visitors for the last 6 months >

> > > ) > } > > Steven ***@***.***> schrieb am Mo., 5. Aug. 2024, > 12:04: > >> "use client" >> >> import { TrendingUp } from "lucide-react" >> import { Bar, BarChart, CartesianGrid, XAxis } from "recharts" >> >> import { >> Card, >> CardContent, >> CardDescription, >> CardFooter, >> CardHeader, >> CardTitle, >> } from "@/components/ui/card" >> import { >> ChartConfig, >> ChartContainer, >> ChartTooltip, >> ChartTooltipContent, >> } from "@/components/ui/chart" >> const chartData = [ >> { month: "January", desktop: 186 }, >> { month: "February", desktop: 305 }, >> { month: "March", desktop: 237 }, >> { month: "April", desktop: 73 }, >> { month: "May", desktop: 209 }, >> { month: "June", desktop: 214 }, >> ] >> >> const chartConfig = { >> desktop: { >> label: "Desktop", >> color: "hsl(var(--chart-1))", >> }, >> } satisfies ChartConfig >> >> export function Component() { >> return ( >> >> >> Bar Chart >> January - June 2024 >> >> >> >> >> >> > dataKey="month" >> tickLine={false} >> tickMargin={10} >> axisLine={false} >> tickFormatter={(value) => value.slice(0, 3)} >> /> >> > cursor={false} >> content={} >> /> >> > /> >> >> >> >> >>

>> Trending up by 5.2% this month > /> >>

>>

>> Showing total visitors for the last 6 months >>

>> >> >> ) >> } >> >> trueberryless ***@***.***> schrieb am Mo., 5. Aug. 2024, >> 12:02: >> >>> Describe the bug >>> >>> On mobile devices when clicking on "View code" on the page "Charts" in >>> the "Tooltip" section, the application gives a client side error. >>> >>> I can only guess why this behaviour is that way: Maybe the downwards >>> scrolling of the Drawer doesn't work because there is no page left >>> downwards... Just a guess... >>> Affected component/components >>> >>> Drawer >>> How to reproduce >>> >>> 1. Take your phone >>> 2. Go to https://ui.shadcn.com/charts#tooltip >>> 3. Click "View code" >>> >>> Codesandbox/StackBlitz link >>> >>> Literally this repo >>> Logs >>> >>> *No response* >>> System Info >>> >>> Brave Browser, Android 14 >>> >>> Before submitting >>> >>> - I've made research efforts and searched the documentation >>> - I've searched for existing issues >>> >>> — >>> Reply to this email directly, view it on GitHub >>> , or unsubscribe >>> >>> . >>> You are receiving this because you are subscribed to this thread.Message >>> ID: ***@***.***> >>> >>

nullnullsieben commented 1 month ago

"use client"

import { TrendingUp } from "lucide-react" import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card" import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, } from "@/components/ui/chart" const chartData = [ { month: "January", desktop: 186, mobile: 80 }, { month: "February", desktop: 305, mobile: 200 }, { month: "March", desktop: 237, mobile: 120 }, { month: "April", desktop: 73, mobile: 190 }, { month: "May", desktop: 209, mobile: 130 }, { month: "June", desktop: 214, mobile: 140 }, ]

const chartConfig = { desktop: { label: "Desktop", color: "hsl(var(--chart-1))", }, mobile: { label: "Mobile", color: "hsl(var(--chart-2))", }, } satisfies ChartConfig

export function Component() { return (

Area Chart - Stacked Showing total visitors for the last 6 months value.slice(0, 3)} /> } />

Trending up by 5.2% this month

January - June 2024

) } Steven ***@***.***> schrieb am Mo., 5. Aug. 2024, 12:05: > "use client" > > import { TrendingDown, TrendingUp } from "lucide-react" > import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" > > import { > Card, > CardContent, > CardDescription, > CardFooter, > CardHeader, > CardTitle, > } from "@/components/ui/card" > import { > ChartConfig, > ChartContainer, > ChartLegend, > ChartLegendContent, > ChartTooltip, > ChartTooltipContent, > } from "@/components/ui/chart" > const chartData = [ > { month: "January", desktop: 186, mobile: 80 }, > { month: "February", desktop: 305, mobile: 200 }, > { month: "March", desktop: 237, mobile: 120 }, > { month: "April", desktop: 73, mobile: 190 }, > { month: "May", desktop: 209, mobile: 130 }, > { month: "June", desktop: 214, mobile: 140 }, > ] > > const chartConfig = { > desktop: { > label: "Desktop", > color: "hsl(var(--chart-1))", > icon: TrendingDown, > }, > mobile: { > label: "Mobile", > color: "hsl(var(--chart-2))", > icon: TrendingUp, > }, > } satisfies ChartConfig > > export function Component() { > return ( > > > Area Chart - Icons > > Showing total visitors for the last 6 months > > > > > accessibilityLayer > data={chartData} > margin={{ > left: 12, > right: 12, > }} > > > > dataKey="month" > tickLine={false} > axisLine={false} > tickMargin={8} > tickFormatter={(value) => value.slice(0, 3)} > /> > cursor={false} > content={} > /> > dataKey="mobile" > type="natural" > fill="var(--color-mobile)" > fillOpacity={0.4} > stroke="var(--color-mobile)" > stackId="a" > /> > dataKey="desktop" > type="natural" > fill="var(--color-desktop)" > fillOpacity={0.4} > stroke="var(--color-desktop)" > stackId="a" > /> > } /> > > > > >

>

> Trending up by 5.2% this month >

>

> January - June 2024 >

>

> > > ) > } > > Steven ***@***.***> schrieb am Mo., 5. Aug. 2024, > 12:04: > >> "use client" >> >> import { TrendingUp } from "lucide-react" >> import { Pie, PieChart } from "recharts" >> >> import { >> Card, >> CardContent, >> CardDescription, >> CardFooter, >> CardHeader, >> CardTitle, >> } from "@/components/ui/card" >> import { >> ChartConfig, >> ChartContainer, >> ChartTooltip, >> ChartTooltipContent, >> } from "@/components/ui/chart" >> const chartData = [ >> { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, >> { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, >> { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, >> { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, >> { browser: "other", visitors: 90, fill: "var(--color-other)" }, >> ] >> >> const chartConfig = { >> visitors: { >> label: "Visitors", >> }, >> chrome: { >> label: "Chrome", >> color: "hsl(var(--chart-1))", >> }, >> safari: { >> label: "Safari", >> color: "hsl(var(--chart-2))", >> }, >> firefox: { >> label: "Firefox", >> color: "hsl(var(--chart-3))", >> }, >> edge: { >> label: "Edge", >> color: "hsl(var(--chart-4))", >> }, >> other: { >> label: "Other", >> color: "hsl(var(--chart-5))", >> }, >> } satisfies ChartConfig >> >> export function Component() { >> return ( >> >> >> Pie Chart - Custom Label >> January - June 2024 >> >> >> > config={chartConfig} >> className="mx-auto aspect-square max-h-[250px]" >> > >> >> > content={> />} >> /> >> > data={chartData} >> dataKey="visitors" >> labelLine={false} >> label={({ payload, ...props }) => { >> return ( >> > cx={props.cx} >> cy={props.cy} >> x={props.x} >> y={props.y} >> textAnchor={props.textAnchor} >> dominantBaseline={props.dominantBaseline} >> fill="hsla(var(--foreground))" >> > >> {`${ >> chartConfig[payload.browser as keyof typeof >> chartConfig] >> ?.label >> } (${payload.visitors})`} >> >> ) >> }} >> nameKey="browser" >> /> >> >> >> >> >>

>> Trending up by 5.2% this month > /> >>

>>

>> Showing total visitors for the last 6 months >>

>> >> >> ) >> } >> >> Steven ***@***.***> schrieb am Mo., 5. Aug. 2024, >> 12:04: >> >>> "use client" >>> >>> import { TrendingUp } from "lucide-react" >>> import { Bar, BarChart, CartesianGrid, XAxis } from "recharts" >>> >>> import { >>> Card, >>> CardContent, >>> CardDescription, >>> CardFooter, >>> CardHeader, >>> CardTitle, >>> } from "@/components/ui/card" >>> import { >>> ChartConfig, >>> ChartContainer, >>> ChartTooltip, >>> ChartTooltipContent, >>> } from "@/components/ui/chart" >>> const chartData = [ >>> { month: "January", desktop: 186 }, >>> { month: "February", desktop: 305 }, >>> { month: "March", desktop: 237 }, >>> { month: "April", desktop: 73 }, >>> { month: "May", desktop: 209 }, >>> { month: "June", desktop: 214 }, >>> ] >>> >>> const chartConfig = { >>> desktop: { >>> label: "Desktop", >>> color: "hsl(var(--chart-1))", >>> }, >>> } satisfies ChartConfig >>> >>> export function Component() { >>> return ( >>> >>> >>> Bar Chart >>> January - June 2024 >>> >>> >>> >>> >>> >>> >> dataKey="month" >>> tickLine={false} >>> tickMargin={10} >>> axisLine={false} >>> tickFormatter={(value) => value.slice(0, 3)} >>> /> >>> >> cursor={false} >>> content={} >>> /> >>> >> radius={8} /> >>> >>> >>> >>> >>>

>>> Trending up by 5.2% this month >> /> >>>

>>>

>>> Showing total visitors for the last 6 months >>>

>>> >>> >>> ) >>> } >>> >>> trueberryless ***@***.***> schrieb am Mo., 5. Aug. 2024, >>> 12:02: >>> >>>> Describe the bug >>>> >>>> On mobile devices when clicking on "View code" on the page "Charts" in >>>> the "Tooltip" section, the application gives a client side error. >>>> >>>> I can only guess why this behaviour is that way: Maybe the downwards >>>> scrolling of the Drawer doesn't work because there is no page left >>>> downwards... Just a guess... >>>> Affected component/components >>>> >>>> Drawer >>>> How to reproduce >>>> >>>> 1. Take your phone >>>> 2. Go to https://ui.shadcn.com/charts#tooltip >>>> 3. Click "View code" >>>> >>>> Codesandbox/StackBlitz link >>>> >>>> Literally this repo >>>> Logs >>>> >>>> *No response* >>>> System Info >>>> >>>> Brave Browser, Android 14 >>>> >>>> Before submitting >>>> >>>> - I've made research efforts and searched the documentation >>>> - I've searched for existing issues >>>> >>>> — >>>> Reply to this email directly, view it on GitHub >>>> , or unsubscribe >>>> >>>> . >>>> You are receiving this because you are subscribed to this thread.Message >>>> ID: ***@***.***> >>>> >>>

nullnullsieben commented 1 month ago

https://www.instagram.com/1900_officelle?igsh=MW5ueDI0b21qbW44Zg==

Steven @.***> schrieb am Mo., 5. Aug. 2024, 12:05:

"use client"

import { TrendingUp } from "lucide-react" import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card" import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, } from "@/components/ui/chart" const chartData = [ { month: "January", desktop: 186, mobile: 80 }, { month: "February", desktop: 305, mobile: 200 }, { month: "March", desktop: 237, mobile: 120 }, { month: "April", desktop: 73, mobile: 190 }, { month: "May", desktop: 209, mobile: 130 }, { month: "June", desktop: 214, mobile: 140 }, ]

const chartConfig = { desktop: { label: "Desktop", color: "hsl(var(--chart-1))", }, mobile: { label: "Mobile", color: "hsl(var(--chart-2))", }, } satisfies ChartConfig

export function Component() { return (
Area Chart - Stacked Showing total visitors for the last 6 months value.slice(0, 3)} /> } />

Trending up by 5.2% this month

January - June 2024

) } Steven ***@***.***> schrieb am Mo., 5. Aug. 2024, 12:05: > "use client" > > import { TrendingDown, TrendingUp } from "lucide-react" > import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" > > import { > Card, > CardContent, > CardDescription, > CardFooter, > CardHeader, > CardTitle, > } from "@/components/ui/card" > import { > ChartConfig, > ChartContainer, > ChartLegend, > ChartLegendContent, > ChartTooltip, > ChartTooltipContent, > } from "@/components/ui/chart" > const chartData = [ > { month: "January", desktop: 186, mobile: 80 }, > { month: "February", desktop: 305, mobile: 200 }, > { month: "March", desktop: 237, mobile: 120 }, > { month: "April", desktop: 73, mobile: 190 }, > { month: "May", desktop: 209, mobile: 130 }, > { month: "June", desktop: 214, mobile: 140 }, > ] > > const chartConfig = { > desktop: { > label: "Desktop", > color: "hsl(var(--chart-1))", > icon: TrendingDown, > }, > mobile: { > label: "Mobile", > color: "hsl(var(--chart-2))", > icon: TrendingUp, > }, > } satisfies ChartConfig > > export function Component() { > return ( > > > Area Chart - Icons > > Showing total visitors for the last 6 months > > > > > accessibilityLayer > data={chartData} > margin={{ > left: 12, > right: 12, > }} > > > > dataKey="month" > tickLine={false} > axisLine={false} > tickMargin={8} > tickFormatter={(value) => value.slice(0, 3)} > /> > cursor={false} > content={} > /> > dataKey="mobile" > type="natural" > fill="var(--color-mobile)" > fillOpacity={0.4} > stroke="var(--color-mobile)" > stackId="a" > /> > dataKey="desktop" > type="natural" > fill="var(--color-desktop)" > fillOpacity={0.4} > stroke="var(--color-desktop)" > stackId="a" > /> > } /> > > > > >
>
>
> Trending up by 5.2% this month >
>
> January - June 2024 >
>
>
> > > ) > } > > Steven ***@***.***> schrieb am Mo., 5. Aug. 2024, > 12:04: > >> "use client" >> >> import { TrendingUp } from "lucide-react" >> import { Pie, PieChart } from "recharts" >> >> import { >> Card, >> CardContent, >> CardDescription, >> CardFooter, >> CardHeader, >> CardTitle, >> } from "@/components/ui/card" >> import { >> ChartConfig, >> ChartContainer, >> ChartTooltip, >> ChartTooltipContent, >> } from "@/components/ui/chart" >> const chartData = [ >> { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, >> { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, >> { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, >> { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, >> { browser: "other", visitors: 90, fill: "var(--color-other)" }, >> ] >> >> const chartConfig = { >> visitors: { >> label: "Visitors", >> }, >> chrome: { >> label: "Chrome", >> color: "hsl(var(--chart-1))", >> }, >> safari: { >> label: "Safari", >> color: "hsl(var(--chart-2))", >> }, >> firefox: { >> label: "Firefox", >> color: "hsl(var(--chart-3))", >> }, >> edge: { >> label: "Edge", >> color: "hsl(var(--chart-4))", >> }, >> other: { >> label: "Other", >> color: "hsl(var(--chart-5))", >> }, >> } satisfies ChartConfig >> >> export function Component() { >> return ( >> >> >> Pie Chart - Custom Label >> January - June 2024 >> >> >> > config={chartConfig} >> className="mx-auto aspect-square max-h-[250px]" >> > >> >> > content={> />} >> /> >> > data={chartData} >> dataKey="visitors" >> labelLine={false} >> label={({ payload, ...props }) => { >> return ( >> > cx={props.cx} >> cy={props.cy} >> x={props.x} >> y={props.y} >> textAnchor={props.textAnchor} >> dominantBaseline={props.dominantBaseline} >> fill="hsla(var(--foreground))" >> > >> {`${ >> chartConfig[payload.browser as keyof typeof >> chartConfig] >> ?.label >> } (${payload.visitors})`} >> >> ) >> }} >> nameKey="browser" >> /> >> >> >> >> >>
>> Trending up by 5.2% this month > /> >>
>>
>> Showing total visitors for the last 6 months >>
>> >> >> ) >> } >> >> Steven ***@***.***> schrieb am Mo., 5. Aug. 2024, >> 12:04: >> >>> "use client" >>> >>> import { TrendingUp } from "lucide-react" >>> import { Bar, BarChart, CartesianGrid, XAxis } from "recharts" >>> >>> import { >>> Card, >>> CardContent, >>> CardDescription, >>> CardFooter, >>> CardHeader, >>> CardTitle, >>> } from "@/components/ui/card" >>> import { >>> ChartConfig, >>> ChartContainer, >>> ChartTooltip, >>> ChartTooltipContent, >>> } from "@/components/ui/chart" >>> const chartData = [ >>> { month: "January", desktop: 186 }, >>> { month: "February", desktop: 305 }, >>> { month: "March", desktop: 237 }, >>> { month: "April", desktop: 73 }, >>> { month: "May", desktop: 209 }, >>> { month: "June", desktop: 214 }, >>> ] >>> >>> const chartConfig = { >>> desktop: { >>> label: "Desktop", >>> color: "hsl(var(--chart-1))", >>> }, >>> } satisfies ChartConfig >>> >>> export function Component() { >>> return ( >>> >>> >>> Bar Chart >>> January - June 2024 >>> >>> >>> >>> >>> >>> >> dataKey="month" >>> tickLine={false} >>> tickMargin={10} >>> axisLine={false} >>> tickFormatter={(value) => value.slice(0, 3)} >>> /> >>> >> cursor={false} >>> content={} >>> /> >>> >> radius={8} /> >>> >>> >>> >>> >>>
>>> Trending up by 5.2% this month >>>
>>>
>>> Showing total visitors for the last 6 months >>>
>>> >>> >>> ) >>> } >>> >>> trueberryless ***@***.***> schrieb am Mo., 5. Aug. 2024, >>> 12:02: >>> >>>> Describe the bug >>>> >>>> On mobile devices when clicking on "View code" on the page "Charts" in >>>> the "Tooltip" section, the application gives a client side error. >>>> >>>> I can only guess why this behaviour is that way: Maybe the downwards >>>> scrolling of the Drawer doesn't work because there is no page left >>>> downwards... Just a guess... >>>> Affected component/components >>>> >>>> Drawer >>>> How to reproduce >>>> >>>> 1. Take your phone >>>> 2. Go to https://ui.shadcn.com/charts#tooltip >>>> 3. Click "View code" >>>> >>>> Codesandbox/StackBlitz link >>>> >>>> Literally this repo >>>> Logs >>>> >>>> *No response* >>>> System Info >>>> >>>> Brave Browser, Android 14 >>>> >>>> Before submitting >>>> >>>> - I've made research efforts and searched the documentation >>>> - I've searched for existing issues >>>> >>>> — >>>> Reply to this email directly, view it on GitHub >>>> , or unsubscribe >>>> >>>> . >>>> You are receiving this because you are subscribed to this thread.Message >>>> ID: ***@***.***> >>>> >>>

shadcn-ui / ui