ui Architecture Docs
Home / Function/ ChartLegendContent() — ui Function Reference

ChartLegendContent() — ui Function Reference

Architecture documentation for the ChartLegendContent() function in chart.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry calls 2

Entity Profile

Dependency Diagram

graph TD
  bd7a68ab_d496_ca7e_bbd7_286c3a0e8552["ChartLegendContent()"]
  5b4f7e92_a51f_42d2_1777_632c60498bcd["chart.tsx"]
  bd7a68ab_d496_ca7e_bbd7_286c3a0e8552 -->|defined in| 5b4f7e92_a51f_42d2_1777_632c60498bcd
  ce3c841d_d6af_e883_8f54_5c12eb3b04d1["useChart()"]
  bd7a68ab_d496_ca7e_bbd7_286c3a0e8552 -->|calls| ce3c841d_d6af_e883_8f54_5c12eb3b04d1
  2d8c84a0_0cd6_a8c5_57d8_fd0701e251a0["getPayloadConfigFromPayload()"]
  bd7a68ab_d496_ca7e_bbd7_286c3a0e8552 -->|calls| 2d8c84a0_0cd6_a8c5_57d8_fd0701e251a0
  style bd7a68ab_d496_ca7e_bbd7_286c3a0e8552 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/registry/new-york/ui/chart.tsx lines 271–319

  (
    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
    ref
  ) => {
    const { config } = useChart()

    if (!payload?.length) {
      return null
    }

    return (
      <div
        ref={ref}
        className={cn(
          "flex items-center justify-center gap-4",
          verticalAlign === "top" ? "pb-3" : "pt-3",
          className
        )}
      >
        {payload
          .filter((item) => item.type !== "none")
          .map((item) => {
            const key = `${nameKey || item.dataKey || "value"}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)

            return (
              <div
                key={item.value}
                className={cn(
                  "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
                )}
              >
                {itemConfig?.icon && !hideIcon ? (
                  <itemConfig.icon />
                ) : (
                  <div
                    className="h-2 w-2 shrink-0 rounded-[2px]"
                    style={{
                      backgroundColor: item.color,
                    }}
                  />
                )}
                {itemConfig?.label}
              </div>
            )
          })}
      </div>
    )
  }

Domain

Subdomains

Defined In

Calls

Source

Frequently Asked Questions

What does ChartLegendContent() do?
ChartLegendContent() is a function in the ui codebase, defined in deprecated/www/registry/new-york/ui/chart.tsx.
Where is ChartLegendContent() defined?
ChartLegendContent() is defined in deprecated/www/registry/new-york/ui/chart.tsx at line 271.
What does ChartLegendContent() call?
ChartLegendContent() calls 2 function(s): getPayloadConfigFromPayload, useChart.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free