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 DocumentationAtlas ContentSourcing calls 2

Entity Profile

Dependency Diagram

graph TD
  1aab1bac_b0b3_4bf7_0e8a_2e8cf9c7b068["ChartLegendContent()"]
  2491c23f_d44e_4528_8994_1ccc44078cfa["chart.tsx"]
  1aab1bac_b0b3_4bf7_0e8a_2e8cf9c7b068 -->|defined in| 2491c23f_d44e_4528_8994_1ccc44078cfa
  77910341_64d5_40e1_b225_48aa42b248e3["useChart()"]
  1aab1bac_b0b3_4bf7_0e8a_2e8cf9c7b068 -->|calls| 77910341_64d5_40e1_b225_48aa42b248e3
  da9742ea_7739_cafb_4832_87cc666385d0["getPayloadConfigFromPayload()"]
  1aab1bac_b0b3_4bf7_0e8a_2e8cf9c7b068 -->|calls| da9742ea_7739_cafb_4832_87cc666385d0
  style 1aab1bac_b0b3_4bf7_0e8a_2e8cf9c7b068 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/ui-rtl/chart.tsx lines 254–308

function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = "bottom",
  nameKey,
}: React.ComponentProps<"div"> &
  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
    hideIcon?: boolean
    nameKey?: string
  }) {
  const { config } = useChart()

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

  return (
    <div
      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(
                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
              )}
            >
              {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 apps/v4/examples/base/ui-rtl/chart.tsx.
Where is ChartLegendContent() defined?
ChartLegendContent() is defined in apps/v4/examples/base/ui-rtl/chart.tsx at line 254.
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