Skip to main content

​
Overview

Want to display real-time price charts for Pump.fun tokens on your website or app? With Moralis’ Price Chart Widget, you can easily embed TradingView-style candlestick charts in just a few steps.

​
What You Can Do

  • Embed real-time price charts for any Pump.fun token
  • Customize colors, layout, and time intervals
  • Works for pre-bonded Pump.fun tokens too
  • Supports HTML & React implementations

​
Step 1: Configure Your Chart

  1. Go to Moralis Price Chart Widget.
  2. Enter your token address or pair address.
  3. Customize your theme, background, candle colors, text colors, etc..
  4. Choose a default time interval (e.g., 1D, 1H, 5M).
  5. Copy the embed code for HTML or React.

​
Step 2: Embed the Chart in Your Project

If you’re using a basic website, you can copy and paste the HTML embed code. You can also use the React embed code if you’re using a React project.

​
HTML Embed Code

<div id="price-chart-widget-container" style="width: 100%; height:100%">
  <script type="text/javascript">
    (function () {
      function loadWidget() {
        if (typeof window.createMyWidget === "function") {
          window.createMyWidget("price-chart-widget-container", {
            width: "980px",
            height: "620px",
            chainId: "solana",
            tokenAddress: "9BB6NFEcjBCtnNLFko2FqVQBq8HHM13kCyYcdQbgpump",
            defaultInterval: "1D",
            timeZone:
              Intl.DateTimeFormat().resolvedOptions().timeZone ?? "Etc/UTC",
            theme: "moralis",
            locale: "en",
            backgroundColor: "#071321",
            gridColor: "#0d2035",
            textColor: "#68738D",
            candleUpColor: "#4CE666",
            candleDownColor: "#E64C4C",
            hideLeftToolbar: false,
            hideTopToolbar: false,
            hideBottomToolbar: false,
          });
        } else {
          console.error("createMyWidget function is not defined.");
        }
      }

      if (!document.getElementById("moralis-chart-widget")) {
        var script = document.createElement("script");
        script.id = "moralis-chart-widget";
        script.src = "https://moralis.com/static/embed/chart.js";
        script.type = "text/javascript";
        script.async = true;
        script.onload = loadWidget;
        document.body.appendChild(script);
      } else {
        loadWidget();
      }
    })();
  </script>
</div>

​
Step 3: Customize Your Chart

You can customize the chart’s appearance by tweaking these options:
OptionDescription
backgroundColorBackground color of the chart
candleUpColorColor for bullish candles
candleDownColorColor for bearish candles
textColorText color for labels
gridColorGridline color
defaultIntervalDefault time interval (1D, 1H, 5M, etc.)
hideLeftToolbarHide/show the left toolbar
hideTopToolbarHide/show the top toolbar
hideBottomToolbarHide/show the bottom toolbar
You can embed charts for pre-bonded Pump.fun tokens the same way. Just enter the pre-bonded token address when configuring the widget.
Charts are powered by TradingView, the leading provider of financial charting tools and trading platform.