ChartLineExample() — ui Function Reference

Architecture documentation for the ChartLineExample() function in chart-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ChartLineExample() — ui Function Reference

Dependency Diagram

graph TD
  c6444d7c_83a9_7f6a_8944_ae48d2f8ba93["ChartLineExample()"]
  8468fea9_9e33_fada_d1d2_6f2ff6de5fa4["chart-example.tsx"]
  c6444d7c_83a9_7f6a_8944_ae48d2f8ba93 -->|defined in| 8468fea9_9e33_fada_d1d2_6f2ff6de5fa4
  style c6444d7c_83a9_7f6a_8944_ae48d2f8ba93 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/chart-example.tsx lines 229–296

function ChartLineExample() {
  return (
    <Example title="Line Chart">
      <Card className="w-full">
        <CardHeader>
          <CardTitle>Line Chart - Multiple</CardTitle>
          <CardDescription>January - June 2024</CardDescription>
        </CardHeader>
        <CardContent>
          <ChartContainer config={lineChartConfig}>
            <LineChart
              accessibilityLayer
              data={lineChartData}
              margin={{
                left: 12,
                right: 12,
              }}
            >
              <CartesianGrid vertical={false} />
              <XAxis
                dataKey="month"
                tickLine={false}
                axisLine={false}
                tickMargin={8}
                tickFormatter={(value) => value.slice(0, 3)}
              />
              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
              <Line
                dataKey="desktop"
                type="monotone"
                stroke="var(--color-desktop)"
                strokeWidth={2}
                dot={false}
              />
              <Line
                dataKey="mobile"
                type="monotone"
                stroke="var(--color-mobile)"
                strokeWidth={2}
                dot={false}
              />
            </LineChart>
          </ChartContainer>
        </CardContent>
        <CardFooter>
          <div className="flex w-full items-start gap-2">
            <div className="grid gap-2">
              <div className="flex items-center gap-2 leading-none font-medium">
                Trending up by 5.2% this month{" "}
                <IconPlaceholder
                  lucide="TrendingUpIcon"
                  tabler="IconTrendingUp"
                  hugeicons="ChartUpIcon"
                  phosphor="TrendUpIcon"
                  remixicon="RiLineChartLine"
                  className="size-4"
                />
              </div>
              <div className="text-muted-foreground flex items-center gap-2 leading-none">
                Showing total visitors for the last 6 months
              </div>
            </div>
          </div>
        </CardFooter>
      </Card>
    </Example>
  )
}