> ## Documentation Index
> Fetch the complete documentation index at: https://docs.etherscan.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Charts and Stats

> The endpoints behind the charts and stats pages on etherscan.io.

export const EndpointShowcase = ({image, alt, items}) => {
  const [active, setActive] = useState(null);
  const [selected, setSelected] = useState(null);
  const current = active != null ? active : selected;
  const accent = "#0784C3";
  const PAD = 7;
  const epHref = ep => ep.href || (ep.slug ? "/api-reference/endpoint/" + ep.slug : null);
  const tierBadge = tier => <span style={{
    display: "inline-block",
    verticalAlign: "middle",
    fontSize: "9px",
    fontWeight: 700,
    lineHeight: 1.35,
    letterSpacing: "0.04em",
    textTransform: "uppercase",
    padding: "0.15em 0.45em",
    borderRadius: "0.35em",
    background: "#0784C3",
    color: "#ffffff",
    whiteSpace: "nowrap"
  }}>
      {tier}
    </span>;
  const scrollToItem = i => {
    setSelected(i);
    if (typeof document !== "undefined") {
      const el = document.getElementById("eps-" + i);
      if (el && el.scrollIntoView) el.scrollIntoView({
        behavior: "smooth",
        block: "center"
      });
    }
  };
  return <div>
      {}
      <div className="not-prose">
        <div className="relative w-full overflow-hidden rounded-xl border border-zinc-950/10 dark:border-white/10">
          <img src={image} alt={alt} className="block w-full select-none" />
          {items.map((it, i) => it.region ? <button key={i} type="button" onMouseEnter={() => setActive(i)} onMouseLeave={() => setActive(null)} onClick={() => scrollToItem(i)} aria-label={it.label} className="absolute rounded-md transition-all duration-150 cursor-pointer" style={{
    left: "calc(" + it.region.x + "% - " + PAD + "px)",
    top: "calc(" + it.region.y + "% - " + PAD + "px)",
    width: "calc(" + it.region.w + "% + " + PAD * 2 + "px)",
    height: "calc(" + it.region.h + "% + " + PAD * 2 + "px)",
    border: "2px solid " + (current === i ? accent : "rgba(7,132,195,0.35)"),
    background: current === i ? "rgba(7,132,195,0.16)" : "transparent",
    boxShadow: current === i ? "0 0 0 3px rgba(7,132,195,0.25)" : "none"
  }}>
                <span className="absolute -top-2.5 -left-2.5 w-5 h-5 rounded-full text-white text-[11px] font-semibold flex items-center justify-center shadow" style={{
    background: accent,
    opacity: current === i ? 1 : 0.75
  }}>
                  {i + 1}
                </span>
              </button> : null)}
        </div>

        <p className="mt-2 text-[11px] text-zinc-400 dark:text-zinc-500">
          Hover an area to find it on the page. Select it to jump to the endpoints below.
        </p>
      </div>

      {}
      <ol>
        {items.map((it, i) => {
    const isOn = current === i;
    return <li key={i} id={"eps-" + i} onMouseEnter={() => setActive(i)} onMouseLeave={() => setActive(null)} className="scroll-mt-24">
              <strong className={isOn ? "text-[#0784C3]" : undefined}>{it.label}</strong>
              {it.note ? " (" + it.note + ")" : null}
              <ul>
                {(it.endpoints || []).map((ep, j) => <li key={j}>
                    <a href={epHref(ep)}>{ep.path}</a>
                    {ep.tier ? <> {tierBadge(ep.tier)}</> : null}
                    {ep.desc ? ": " + ep.desc : null}
                  </li>)}
                {it.explore ? <li>
                    {it.explore.pre}
                    <a href={it.explore.href}>{it.explore.linkText}</a>
                    {it.explore.post}
                  </li> : null}
              </ul>
            </li>;
  })}
      </ol>
    </div>;
};

The [charts and stats pages](https://etherscan.io/charts) on etherscan.io are built from the Stats endpoints. The list below maps each section to the endpoints behind it. One API key works across all 60+ [supported chains](/supported-chains); set `chainid` to choose one.

export const items = [{
  label: "Overview Stats",
  region: {
    x: 18,
    y: 38,
    w: 80,
    h: 53
  },
  endpoints: [{
    path: "/stats/dailynewaddress",
    slug: "dailynewaddress",
    tier: "PRO",
    desc: "Daily new addresses."
  }, {
    path: "/stats/dailytx",
    slug: "dailytx",
    tier: "PRO",
    desc: "Daily transaction count."
  }, {
    path: "/stats/dailygasused",
    slug: "dailygasused",
    tier: "PRO",
    desc: "Daily gas used."
  }]
}, {
  label: "Market Data",
  region: {
    x: 1.5,
    y: 39.5,
    w: 13,
    h: 4
  },
  endpoints: [{
    path: "/stats/ethprice",
    slug: "ethprice",
    desc: "Latest ETH price."
  }, {
    path: "/stats/ethsupply",
    slug: "ethsupply",
    desc: "Total ETH supply."
  }, {
    path: "/stats/ethdailyprice",
    slug: "ethdailyprice",
    tier: "PRO",
    desc: "Historical daily ETH price."
  }]
}, {
  label: "Blockchain Data",
  region: {
    x: 1.5,
    y: 46,
    w: 13,
    h: 4
  },
  endpoints: [{
    path: "/stats/dailyblkcount",
    slug: "dailyblkcount",
    tier: "PRO",
    desc: "Daily block count."
  }, {
    path: "/stats/dailyblockrewards",
    slug: "dailyblockrewards",
    tier: "PRO",
    desc: "Daily block rewards."
  }, {
    path: "/stats/dailyavgblocktime",
    slug: "dailyavgblocktime",
    tier: "PRO",
    desc: "Average block time."
  }, {
    path: "/stats/dailyavgblocksize",
    slug: "dailyavgblocksize",
    tier: "PRO",
    desc: "Average block size."
  }, {
    path: "/stats/dailyavggaslimit",
    slug: "dailyavggaslimit",
    tier: "PRO",
    desc: "Average gas limit."
  }, {
    path: "/stats/dailyavggasprice",
    slug: "dailyavggasprice",
    tier: "PRO",
    desc: "Average gas price."
  }]
}, {
  label: "Network Data",
  region: {
    x: 1.5,
    y: 52.5,
    w: 13,
    h: 4
  },
  endpoints: [{
    path: "/stats/dailytxnfee",
    slug: "dailytxnfee",
    tier: "PRO",
    desc: "Daily network transaction fees."
  }, {
    path: "/stats/dailynetutilization",
    slug: "dailynetutilization",
    tier: "PRO",
    desc: "Daily network utilization."
  }, {
    path: "/stats/nodecount",
    slug: "nodecount",
    desc: "Current total node count."
  }, {
    path: "/stats/nodecounthistory",
    slug: "nodecounthistory",
    tier: "PRO",
    desc: "Historical total node count."
  }]
}];

<EndpointShowcase image="https://mintcdn.com/etherscan/PrmCI8xWhLgr8YZ-/images/charts-page.png?fit=max&auto=format&n=PrmCI8xWhLgr8YZ-&q=85&s=cae0d259f4b67275024f751df8130d76" alt="Etherscan charts and stats" items={items} width="2816" height="1228" data-path="images/charts-page.png" />