Maestro Market Price API & TradingView Lightweight-Charts Tutorial

this tutorial walks you through building a small web app in typescript that will fetch doggotothemoon ("btc 840000 3") candlestick data from maestro’s market price api https //docs gomaestro org/market price feeds render it as an interactive candlestick chart using the tradingview https //www tradingview\ com/ lightweight charts https //github com/tradingview/lightweight charts library overview tradingview lightweight charts™ tradingview https //www tradingview\ com/ is a popular web based platform renowned for its comprehensive and user friendly charting tools users can access a variety of charts for different financial instruments, like stocks, cryptocurrencies, forex, and futures these charts can be customized with numerous technical indicators and drawing tools to analyze market trends and patterns tradingview's lightweight charts https //tradingview\ github io/lightweight charts/ is a compact, interactive library designed to create financial charts that are both fast and easy to integrate here's a basic guide on how to use it with the maestro market price api https //docs gomaestro org/market price feeds prerequisites node js ≥14 and npm (or yarn) installed a maestro api key https //dashboard gomaestro org/login basic familiarity with typescript, fetch , and bundling (e g with esbuild, webpack, or vite) step by step instructions 1\ bootstrap a new project \# create & enter project folder mkdir maestro chart tutorial && cd maestro chart tutorial \# initialize npm npm init y \# install runtime and dev dependencies npm install save lightweight charts npm install save dev typescript esbuild live server here's what your initial package json should look like { "dependencies" { "lightweight charts" "^5 0 6" }, "name" "maestro chart tutorial", "version" "1 0 0", "description" "", "main" "index js", "scripts" { "test" "echo \\"error no test specified\\" && exit 1", }, "keywords" \[], "author" "", "license" "isc", "type" "commonjs", "devdependencies" { "esbuild" "^0 25 3", "live server" "^1 2 2", "typescript" "^5 8 3", } } next, create a minimal tsconfig json { "compileroptions" { "target" "es2017", "module" "esnext", "moduleresolution" "node", "strict" true, "outdir" "dist" }, "include" \["src/ / "] } 2\ project structure maestro chart tutorial/ ├── package json ├── src/ │ ├── main ts ← chart logic │ └── index html ← html container for the chart └── tsconfig json 3\ write the html shell create src/index html doggotothemoon candlestick chart 4\ fetch & transform candle data create src/main ts import { createchart, candlestickseries, } from 'lightweight charts'; // ─── configuration ───────────────────────────────────────────────────────────── const api base = 'https //xbt mainnet gomaestro api org/v0/markets'; const dex = 'magiceden'; const symbol = 'btc 840000 3'; // doggotothemoon const resolution = '1d'; // 1‑day candles const api key = 'your api key here'; // ← replace with your api key interface candle { bucket string; open number; high number; low number; close number; volume number; symbol string; } async function fetchcandles(mempool? boolean) { const url = new url(`${api base}/dexs/ohlc/${dex}/${symbol}`); url searchparams set('resolution', resolution); // for mempool market price data if (mempool) { url searchparams set('mempool', 'included'); } const resp = await fetch(url tostring(), { headers { 'api key' api key, }, }); if (!resp ok) { throw new error(`api error ${resp status} ${resp statustext}`); } const json = await resp json(); const candles = json data as candle\[]; return candles map(c => ({ time math floor(new date(c bucket) gettime() / 1000) as utctimestamp, open c open, high c high, low c low, close c close, })); } 5\ initialize & draw the chart append to src/main ts async function drawchart() { // create chart const chartoptions = { layout { textcolor 'black', background { type 'solid', color '#ffffff' }, }, grid { vertlines { color '#eee' }, horzlines { color '#eee' }, }, rightpricescale { bordervisible false }, timescale { bordervisible false, timevisible true }, } const chart = createchart(document getelementbyid('chart'), chartoptions); const series = chart addseries(candlestickseries, { upcolor '#26a69a', downcolor '#ef5350', bordervisible false, wickupcolor '#26a69a', wickdowncolor '#ef5350', }); // load data & render try { // fetch candlestick data const candles = await fetchcandles(); // set candlestick data series setdata(candles); // format for better readability chart timescale() fitcontent(); } catch (err) { console error(err); alert('failed to load candle data; see console '); } } // run drawchart(); 6\ bundle & serve add these scripts to package json { "scripts" { "build" "esbuild src/main ts bundle outfile=src/main js platform=browser", "start" "npm run build && live server src" } } then npm run start esbuild bundles your code into main js live server serves src/index html at http //127 0 0 1 8080 http //127 0 0 1 8080 interactive tradingview chart if you're able to see a chart like this displayed in your browser, then you have successfully fetched data through the api and rendered the chart 7\ next steps & customization the following considerations can help you to extend this tutorial to fit more of your application's needs you can make the chart data mempool aware meaning it returns data about trades that have not yet been confirmed by passing in an optional boolean value to fetchcandles() , such as const candles = await fetchcandles(true); time range add from / to (unix seconds) to fetchcandles() carry url searchparams set('carry','true') fills gaps with synthetic candles styling tweak createchart options https //github com/tradingview/lightweight charts#configuration interactivity add crosshair, tooltips, mouse events 🎉 you’re done! you now have a live candlestick chart of doggotothemoon using maestro’s market price api https //www postman com/go maestro/maestro api/documentation/f0umfm5/bitcoin market price api with the tradingview https //www tradingview\ com/ lightweight charts https //github com/tradingview/lightweight charts library customize it further with indicators, multi‑symbol support, or integrate it into your defi dashboard be sure to review maestro's rate limits and pricing tiers https //www gomaestro org/pricing to select the plan that best fits your application's needs support if you are experiencing any trouble with the above, reach out on discord https //discord gg/es2rdhbjt3