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

ChartTooltipContent() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry calls 2

Entity Profile

Dependency Diagram

graph TD
  2968b072_5f76_e340_3121_c2f81f65ce7d["ChartTooltipContent()"]
  b01a5853_7a04_0011_7a8b_ab9fc567a8f0["chart.tsx"]
  2968b072_5f76_e340_3121_c2f81f65ce7d -->|defined in| b01a5853_7a04_0011_7a8b_ab9fc567a8f0
  832e772e_5f34_5349_a5a3_7671de16664d["useChart()"]
  2968b072_5f76_e340_3121_c2f81f65ce7d -->|calls| 832e772e_5f34_5349_a5a3_7671de16664d
  280bcfd2_d405_61e0_7b3c_d67bf295a156["getPayloadConfigFromPayload()"]
  2968b072_5f76_e340_3121_c2f81f65ce7d -->|calls| 280bcfd2_d405_61e0_7b3c_d67bf295a156
  style 2968b072_5f76_e340_3121_c2f81f65ce7d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/registry/default/ui/chart.tsx lines 116–257

  (
    {
      active,
      payload,
      className,
      indicator = "dot",
      hideLabel = false,
      hideIndicator = false,
      label,
      labelFormatter,
      labelClassName,
      formatter,
      color,
      nameKey,
      labelKey,
    },
    ref
  ) => {
    const { config } = useChart()

    const tooltipLabel = React.useMemo(() => {
      if (hideLabel || !payload?.length) {
        return null
      }

      const [item] = payload
      const key = `${labelKey || item?.dataKey || item?.name || "value"}`
      const itemConfig = getPayloadConfigFromPayload(config, item, key)
      const value =
        !labelKey && typeof label === "string"
          ? config[label as keyof typeof config]?.label || label
          : itemConfig?.label

      if (labelFormatter) {
        return (
          <div className={cn("font-medium", labelClassName)}>
            {labelFormatter(value, payload)}
          </div>
        )
      }

      if (!value) {
        return null
      }

      return <div className={cn("font-medium", labelClassName)}>{value}</div>
    }, [
      label,
      labelFormatter,
      payload,
      hideLabel,
      labelClassName,
      config,
      labelKey,
    ])

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

    const nestLabel = payload.length === 1 && indicator !== "dot"

    return (
      <div
        ref={ref}
        className={cn(
          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
          className
        )}
      >
        {!nestLabel ? tooltipLabel : null}
        <div className="grid gap-1.5">
          {payload
            .filter((item) => item.type !== "none")
            .map((item, index) => {
              const key = `${nameKey || item.name || item.dataKey || "value"}`
              const itemConfig = getPayloadConfigFromPayload(config, item, key)
              const indicatorColor = color || item.payload.fill || item.color

              return (
                <div

Domain

Subdomains

Defined In

Calls

Source

Frequently Asked Questions

What does ChartTooltipContent() do?
ChartTooltipContent() is a function in the ui codebase, defined in deprecated/www/registry/default/ui/chart.tsx.
Where is ChartTooltipContent() defined?
ChartTooltipContent() is defined in deprecated/www/registry/default/ui/chart.tsx at line 116.
What does ChartTooltipContent() call?
ChartTooltipContent() 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