chart-tooltip-demo.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart-tooltip-demo",
  "type": "registry:example",
  "author": "shadcn (https://ui.shadcn.com)",
  "files": [
    {
      "path": "examples/chart-tooltip-demo.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport default function Component() {\n  return (\n    <div className=\"grid aspect-video w-full max-w-md justify-center text-foreground md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4\">\n      <div>\n        <div className=\"absolute left-[-35px] top-[45px] z-10 text-sm font-medium\">\n          Label\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 193 40\"\n          width=\"50\"\n          height=\"12\"\n          fill=\"none\"\n          className=\"absolute left-[5px] top-[50px] z-10\"\n        >\n          <g clip-path=\"url(#a)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M173.928 21.13C115.811 44.938 58.751 45.773 0 26.141c4.227-4.386 7.82-2.715 10.567-1.88 21.133 5.64 42.9 6.266 64.457 7.101 31.066 1.253 60.441-5.848 89.183-17.335 1.268-.418 2.325-1.253 4.861-2.924-14.582-2.924-29.165 2.089-41.845-3.76.212-.835.212-1.879.423-2.714 9.51-.627 19.231-1.253 28.742-2.089 9.51-.835 18.808-1.88 28.318-2.506 6.974-.418 9.933 2.924 7.397 9.19-3.17 8.145-7.608 15.664-11.623 23.391-.423.836-1.057 1.88-1.902 2.298-2.325.835-4.65 1.044-7.186 1.67-.422-2.088-1.479-4.386-1.268-6.265.423-2.506 1.902-4.595 3.804-9.19Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"a\">\n              <path fill=\"currentColor\" d=\"M0 0h193v40H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 186, fill: \"hsl(var(--chart-1))\" },\n            { name: \"Mobile\", value: 80, fill: \"hsl(var(--chart-2))\" },\n          ]}\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"items-end\">\n        <div className=\"absolute left-[122px] top-[0px] z-10 text-sm font-medium\">\n          Name\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"35\"\n          height=\"42\"\n          fill=\"none\"\n          viewBox=\"0 0 122 148\"\n          className=\"absolute left-[85px] top-[10px] z-10 -scale-x-100\"\n        >\n          <g clip-path=\"url(#ab)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M0 2.65c6.15-4.024 12.299-2.753 17.812-.847a115.56 115.56 0 0 1 21.84 10.59C70.4 32.727 88.849 61.744 96.483 97.54c1.908 9.108 2.544 18.639 3.817 29.017 8.481-4.871 12.934-14.402 21.416-19.909 1.061 4.236-1.06 6.989-2.756 9.319-6.998 9.531-14.207 19.062-21.63 28.382-3.604 4.448-6.36 4.871-10.177 1.059-8.058-7.837-12.935-17.368-14.42-28.382 0-.424.636-1.059 1.485-2.118 9.118 2.33 6.997 13.979 14.843 18.215 3.393-14.614.848-28.593-2.969-42.149-4.029-14.19-9.33-27.746-17.812-39.82-8.27-11.86-18.66-21.392-30.11-30.287C26.93 11.758 14.207 6.039 0 2.65Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"ab\">\n              <path fill=\"currentColor\" d=\"M0 0h122v148H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-3))\" },\n            { name: \"Firefox\", value: 1000, fill: \"hsl(var(--chart-4))\" },\n          ]}\n          indicator=\"dashed\"\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"!hidden md:!flex\">\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 12486, fill: \"hsl(var(--chart-3))\" },\n          ]}\n          className=\"w-[9rem]\"\n          indicator=\"line\"\n        />\n      </div>\n      <div className=\"!items-start !justify-start\">\n        <div className=\"absolute left-[50px] top-[60px] z-10 text-sm font-medium\">\n          Indicator\n        </div>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-1))\" },\n          ]}\n          indicator=\"dot\"\n          className=\"w-[8rem]\"\n        />\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"15\"\n          height=\"34\"\n          fill=\"none\"\n          viewBox=\"0 0 75 175\"\n          className=\"absolute left-[30px] top-[38px] z-10 rotate-[-40deg]\"\n        >\n          <g clip-path=\"url(#abc)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M20.187 175c-4.439-2.109-7.186-2.531-8.032-4.008-3.17-5.484-6.763-10.968-8.454-17.084-5.073-16.242-4.439-32.694-1.057-49.146 5.707-28.053 18.388-52.942 34.24-76.565 1.692-2.531 3.171-5.063 4.862-7.805 0-.21-.211-.632-.634-1.265-4.65 1.265-9.511 2.53-14.161 3.585-2.537.422-5.496.422-8.032-.421-1.48-.422-3.593-2.742-3.593-4.219 0-1.898 1.48-4.218 2.747-5.906 1.057-1.054 2.96-1.265 4.65-1.687C35.406 7.315 48.088 3.729 60.98.776c10.99-2.53 14.584 1.055 13.95 11.812-.634 11.18-.846 22.358-1.268 33.326-.212 3.375-.846 6.96-1.268 10.757-8.878-4.007-8.878-4.007-12.048-38.177C47.03 33.259 38.153 49.289 29.91 65.741 21.667 82.193 16.17 99.49 13.212 117.84c-2.959 18.984.634 36.912 6.975 57.161Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"abc\">\n              <path fill=\"currentColor\" d=\"M0 0h75v175H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n      </div>\n    </div>\n  )\n}\n\nfunction TooltipDemo({\n  indicator = \"dot\",\n  label,\n  payload,\n  hideLabel,\n  hideIndicator,\n  className,\n}: {\n  label: string\n  hideLabel?: boolean\n  hideIndicator?: boolean\n  indicator?: \"line\" | \"dot\" | \"dashed\"\n  payload: {\n    name: string\n    value: number\n    fill: string\n  }[]\n  nameKey?: string\n  labelKey?: string\n} & React.ComponentProps<\"div\">) {\n  const tooltipLabel = hideLabel ? null : (\n    <div className=\"font-medium\">{label}</div>\n  )\n\n  if (!payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"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 transition-all ease-in-out hover:-translate-y-0.5\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const indicatorColor = item.fill\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                \"flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                indicator === \"dot\" && \"items-center\"\n              )}\n            >\n              <>\n                {!hideIndicator && (\n                  <div\n                    className={cn(\n                      \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\n                      {\n                        \"h-2.5 w-2.5\": indicator === \"dot\",\n                        \"w-1\": indicator === \"line\",\n                        \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                          indicator === \"dashed\",\n                        \"my-0.5\": nestLabel && indicator === \"dashed\",\n                      }\n                    )}\n                    style={\n                      {\n                        \"--color-bg\": indicatorColor,\n                        \"--color-border\": indicatorColor,\n                      } as React.CSSProperties\n                    }\n                  />\n                )}\n                <div\n                  className={cn(\n                    \"flex flex-1 justify-between leading-none\",\n                    nestLabel ? \"items-end\" : \"items-center\"\n                  )}\n                >\n                  <div className=\"grid gap-1.5\">\n                    {nestLabel ? tooltipLabel : null}\n                    <span className=\"text-muted-foreground\">{item.name}</span>\n                  </div>\n                  <span className=\"font-mono font-medium tabular-nums text-foreground\">\n                    {item.value.toLocaleString()}\n                  </span>\n                </div>\n              </>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:example",
      "target": ""
    }
  ]
}