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
  788ab7ae_6bd8_0ce0_7ad1_c6339f51358e["ChartLegendContent()"]
  b01a5853_7a04_0011_7a8b_ab9fc567a8f0["chart.tsx"]
  788ab7ae_6bd8_0ce0_7ad1_c6339f51358e -->|defined in| b01a5853_7a04_0011_7a8b_ab9fc567a8f0
  832e772e_5f34_5349_a5a3_7671de16664d["useChart()"]
  788ab7ae_6bd8_0ce0_7ad1_c6339f51358e -->|calls| 832e772e_5f34_5349_a5a3_7671de16664d
  280bcfd2_d405_61e0_7b3c_d67bf295a156["getPayloadConfigFromPayload()"]
  788ab7ae_6bd8_0ce0_7ad1_c6339f51358e -->|calls| 280bcfd2_d405_61e0_7b3c_d67bf295a156
  style 788ab7ae_6bd8_0ce0_7ad1_c6339f51358e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/registry/default/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/default/ui/chart.tsx.
Where is ChartLegendContent() defined?
ChartLegendContent() is defined in deprecated/www/registry/default/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