[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fgoogle-charts-react-data-visualization":671,"blog-author-\u002Fblog\u002Fgoogle-charts-react-data-visualization":1128,"i-material-symbols:arrow-back-rounded":1140},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Manage account","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","XlSALC7vYCXHcmcXnjJViwIZKsqnQWF4bn4o9RrcSBE",{"id":87,"extension":5,"links":88,"meta":668,"stem":669,"__hash__":670},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,303,307,311,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,461,465,469,473,477,481,485,488,491,494,497,501,505,508,512,516,520,524,528,532,536,540,544,548,552,556,559,563,567,571,575,579,582,585,588,592,595,599,603,607,611,614,618,622,625,628,631,635,639,643,646,649,652,656,660,664],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.linuxFlatpak","Linux Flatpak installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fflatpak",{"key":209,"label":210,"href":211},"downloads.guides.linuxSnap","Linux Snap installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fsnap",{"key":213,"label":214,"href":215},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":217,"label":218,"href":219},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":221,"label":222,"href":223},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":225,"label":226,"href":227},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":229,"label":230,"href":231},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":233,"label":234,"href":235},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":237,"label":238,"href":239},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":241,"label":242,"href":243},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":245,"label":246,"href":247},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":249,"label":250,"href":251},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":253,"label":254,"href":255},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":257,"label":258,"href":259},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":261,"label":262,"href":263},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":265,"label":266,"href":267},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":269,"label":270,"href":271},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":273,"label":274,"href":275},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":277,"label":278,"href":279},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":281,"label":282,"href":283},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":285,"label":286,"href":287},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":289,"label":290,"href":291},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":293,"label":294,"href":295},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":297,"label":298,"href":299},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":301,"label":302,"href":92},"docs.desktop.download","Desktop download docs",{"key":304,"label":305,"href":306},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":308,"label":309,"href":310},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":312,"label":313,"href":215},"docs.piecesOS.install","PiecesOS install docs",{"key":315,"label":316,"href":317},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":319,"label":320,"href":321},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":323,"label":324,"href":325},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":327,"label":328,"href":329},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":331,"label":332,"href":333},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":335,"label":336,"href":337},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":343,"label":344,"href":345},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":347,"label":348,"href":349},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":351,"label":352,"href":353},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":355,"label":356,"href":357},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":359,"label":360,"href":361},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":363,"label":364,"href":365},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":367,"label":368,"href":369},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":371,"label":372,"href":373},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":375,"label":376,"href":377},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":379,"label":380,"href":381},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":383,"label":384,"href":385},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":387,"label":388,"href":389},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":391,"label":392,"href":393},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":395,"label":396,"href":397},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":399,"label":400,"href":401},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":403,"label":404,"href":405},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":407,"label":408,"href":409},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":411,"label":412,"href":413},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":415,"label":416,"href":417},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":419,"label":420,"href":421},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":423,"label":424,"href":425},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":427,"label":428,"href":429},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":431,"label":432,"href":433},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":435,"label":436,"href":437},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":439,"label":440,"href":441},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":443,"label":444,"href":445},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":447,"label":448,"href":449},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":451,"label":452,"href":453},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":455,"label":456,"href":457},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":459,"label":58,"href":460},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":462,"label":463,"href":464},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":466,"label":467,"href":468},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":470,"label":471,"href":472},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":474,"label":475,"href":476},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":478,"label":479,"href":480},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":482,"label":483,"href":484},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":486,"label":34,"href":487},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":489,"label":43,"href":490},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":492,"label":46,"href":493},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":495,"label":496,"href":493},"social.twitter","Twitter",{"key":498,"label":499,"href":500},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":502,"label":503,"href":504},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":506,"label":49,"href":507},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":509,"label":510,"href":511},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":513,"label":514,"href":515},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":517,"label":518,"href":519},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":521,"label":522,"href":523},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":525,"label":526,"href":527},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":529,"label":530,"href":531},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":533,"label":534,"href":535},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":537,"label":538,"href":539},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":541,"label":542,"href":543},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":545,"label":546,"href":547},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":549,"label":550,"href":551},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":553,"label":554,"href":555},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":557,"label":558,"href":255},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":560,"label":561,"href":562},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":564,"label":565,"href":566},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":568,"label":569,"href":570},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":572,"label":573,"href":574},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":576,"label":577,"href":578},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":580,"label":581,"href":66},"legal.privacyPolicy","Privacy policy",{"key":583,"label":584,"href":69},"legal.refundPolicy","Refund policy",{"key":586,"label":587,"href":72},"legal.terms","Terms",{"key":589,"label":590,"href":591},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":593,"label":594,"href":511},"videos.youtubeChannel","YouTube channel",{"key":596,"label":597,"href":598},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":600,"label":601,"href":602},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":604,"label":605,"href":606},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":608,"label":609,"href":610},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":612,"label":613,"href":527},"sales.feedback","Feedback discussions",{"key":615,"label":616,"href":617},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":619,"label":620,"href":621},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":623,"label":624,"href":19},"routes.home","Home route",{"key":626,"label":627,"href":56},"routes.about","About route",{"key":629,"label":630,"href":12},"routes.downloads","Downloads route",{"key":632,"label":633,"href":634},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":636,"label":637,"href":638},"routes.pricing","Pricing route","\u002Fpricing",{"key":640,"label":641,"href":642},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":644,"label":645,"href":22},"routes.enterprise","Enterprise route",{"key":647,"label":648,"href":62},"routes.contact","Contact route",{"key":650,"label":651,"href":59},"routes.updates","Updates route",{"key":653,"label":654,"href":655},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":657,"label":658,"href":659},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":661,"label":662,"href":663},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":665,"label":666,"href":667},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","2AvfSWI6bZACH5Kr1ZS3txMLjteRjCjbDR_ul1uRZ9Q",{"id":672,"title":673,"author":674,"authorPhoto":675,"authorPhotoAlt":676,"authorSlug":677,"body":678,"buttonText":1115,"buttonUrl":1115,"category":1116,"date":1117,"description":1118,"draft":1119,"editorsPick":1119,"extension":1120,"featured":1119,"image":1121,"imageAlt":1122,"meta":1123,"navigation":32,"ogImage":1115,"ogImageAlt":1115,"path":1124,"seo":1125,"stem":1126,"tags":1115,"__hash__":1127},"blog\u002Fblog\u002Fgoogle-charts-react-data-visualization.md","Using Google Charts for React Data Visualization","Sam Victor","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fgoogle-charts-react-data-visualization\u002Fauthor.png","Sam Victor.","sam-victor",{"type":679,"value":680,"toc":1094},"minimark",[681,685,688,693,696,700,703,714,717,723,735,742,748,752,763,770,773,779,816,823,829,835,842,845,851,857,860,864,867,880,883,887,894,900,903,909,912,916,922,928,942,946,953,959,965,969,972,978,983,988,991,997,1006,1010,1017,1023,1037,1040,1046,1050,1053,1056,1069,1073,1079],[682,683,684],"p",{},"To truly understand data, try using charts and other types of data visualization instead of raw numbers. In web apps, charts are particularly useful for creating dashboards that visualize site activities. In this tutorial, we'll learn how to use Google Charts to visualize React data. React Google Charts is a thin, typed React wrapper with a free charting service and one of Google’s JavaScript libraries.",[682,686,687],{},"Google Charts is a free, easy-to-use interactive web service that developers use to visualize data. Google Charts has a ton of customization options, ranging from simple line graphs to more complex map trees. To create a chart, the user inputs data and the service returns the requested chart images.",[689,690,692],"h2",{"id":691},"why-google-charts","Why Google Charts?",[682,694,695],{},"The Google Charts library is highly customizable and easy to use, making it an excellent choice for React developers. Unlike other libraries, it’s also compatible with all platforms, ranging from mobile to desktop. It uses HTML and SVG at its core, and therefore doesn’t depend on any additional library or plugin.",[689,697,699],{"id":698},"setting-up-a-project","Setting Up a Project",[682,701,702],{},"We’ll start by setting up our React project. First, run the command below in your terminal:",[704,705,710],"pre",{"className":706,"code":708,"language":709},[707],"language-text","npx create-react-app react-chart-app\n","text",[711,712,708],"code",{"__ignoreMap":713},"",[682,715,716],{},"Once the command above finishes downloading the required libraries for the React app, navigate to the project directory using the command below:",[704,718,721],{"className":719,"code":720,"language":709},[707],"cd react-chart-app\n",[711,722,720],{"__ignoreMap":713},[724,725,727,728],"h3",{"id":726},"installing-react-google-charts","Installing ",[729,730,734],"a",{"href":731,"rel":732},"https:\u002F\u002Fwww.react-google-charts.com\u002F",[733],"nofollow","React Google Charts",[682,736,737,738,741],{},"Install the ",[711,739,740],{},"react-google-chart"," plugin using the command below:",[704,743,746],{"className":744,"code":745,"language":709},[707],"npm install --save react-google-charts\n",[711,747,745],{"__ignoreMap":713},[724,749,751],{"id":750},"building-components","Building Components",[682,753,754,755,758,759,762],{},"To begin, let’s build our first components. First, create a file called ",[711,756,757],{},"Chart.jsx"," in the ",[711,760,761],{},"src\u002F"," folder:",[682,764,765],{},[766,767],"img",{"alt":768,"src":769},"The newly created file in the file tree.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fgoogle-charts-react-data-visualization\u002Fimg-001.png",[682,771,772],{},"Paste the code below:",[704,774,777],{"className":775,"code":776,"language":709},[707],"import { Chart } from \"react-google-charts\";\nexport const data = [\n        [\n \"Courses\",\n \"Mathematics\",\n \"English\",\n \"Chemistry\",\n \"Physics\",\n \"Biology\",\n \"Average\"\n        ],\n        [\"Sam\", 18, 10, 12, 16, 5, 12.2],\n        [\"Jessica\", 13, 11, 5, 18, 2, 9.8],\n        [\"Suka\", 15, 11, 7, 18, 9, 10],\n        [\"Isaac\", 19, 11, 6, 8, 5, 9.8],\n        [\"Dee\", 12, 11, 9, 16, 6, 10.8]\n];\nexport const options =  {\n \"title\": \"Test score in a classroom between 5 students\",\n \"vAxis\": { \"title\": \"Grade\" },\n \"hAxis\": { \"title\": \"Students\" },\n \"seriesType\": \"bars\",\n \"series\": { \"5\": { \"type\": \"line\" } }\n      };\nfunction Charts() {\n  return (\n      \n chartType=\"ComboChart\"\n        data={data}\n        options={options}\n        width={\"100%\"}\n        height={\"400px\"}\n      \u002F>\n  );\n}\nexport default Charts;\n",[711,778,776],{"__ignoreMap":713},[682,780,781,782,785,786,789,790,792,793,796,797,800,801,804,805,808,809,808,812,815],{},"With the code block above, we imported the ",[711,783,784],{},"Chart"," components from the ",[711,787,788],{},"react-google-charts"," previously installed plugin. The ",[711,791,784],{}," component contains props that enable graphical representation. For example, the ",[711,794,795],{},"chartType"," prop gives us the ability to change the chart display type, the ",[711,798,799],{},"data"," prop accepts our input data, and the ",[711,802,803],{},"options"," prop accepts a map of options that contains the ",[711,806,807],{},"title",", ",[711,810,811],{},"color",[711,813,814],{},"backgroundcolor",", etc.",[724,817,819,820],{"id":818},"updating-appjs","Updating ",[711,821,822],{},"App.js",[682,824,825,826,828],{},"Let’s clean up our ",[711,827,822],{}," by replacing it with the code block below:",[704,830,833],{"className":831,"code":832,"language":709},[707],"import '.\u002FApp.css';\nimport Charts from \".\u002FCharts\";\nfunction App() {\n return (\n               \n  );\n}\nexport default App;\n",[711,834,832],{"__ignoreMap":713},[682,836,837,838,841],{},"The code block above simply imports and renders our ",[711,839,840],{},"Charts"," components.",[682,843,844],{},"To see what we’ve built so far, run the code on your browser using the command below:",[704,846,849],{"className":847,"code":848,"language":709},[707],"npm start\n",[711,850,848],{"__ignoreMap":713},[682,852,853],{},[766,854],{"alt":855,"src":856},"A Google Chart comparing 5 students' test scores.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fgoogle-charts-react-data-visualization\u002Fimg-002.png",[682,858,859],{},"Here, we have a Google chart showing the various test scores of five students.",[689,861,863],{"id":862},"populating-google-charts-with-react-hooks","Populating Google Charts with React Hooks",[682,865,866],{},"Before diving into working with React Hooks, let’s first get a grip on what hooks are.",[682,868,869,873,874,873,877],{},[870,871,872],"em",{},"React Hooks are state managers introduced in React 16.8. They allow us to use features like"," ",[711,875,876],{},"useState()",[870,878,879],{},"and more without having to write a class.",[682,881,882],{},"We’ll be simulating responses from an external source or API, and then using React Hooks to manage the states and keep track of the data.",[724,884,886],{"id":885},"working-with-json","Working with JSON",[682,888,889,890,893],{},"First, create a ",[711,891,892],{},"data.json"," file in the src\u002F folder:",[682,895,896],{},[766,897],{"alt":898,"src":899},"The newly created file in the file structure.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fgoogle-charts-react-data-visualization\u002Fimg-003.png",[682,901,902],{},"Next, paste the JSON code below into the newly created file:",[704,904,907],{"className":905,"code":906,"language":709},[707],"{\n  \"charts\": [\n    {\n      \"name\": \"Combo Chart\",\n      \"chartType\": \"ComboChart\",\n      \"data\": [\n        [\n \"Courses\",\n \"Mathematics\",\n \"English\",\n \"Chemistry\",\n \"Physics\",\n \"Biology\",\n \"Average\"\n        ],\n        [\"Sam\", 18, 10, 12, 16, 5, 12.2],\n        [\"Jessica\", 13, 11, 5, 18, 2, 9.8],\n        [\"Suka\", 15, 11, 7, 18, 9, 10],\n        [\"Isaac\", 19, 11, 6, 8, 5, 9.8],\n        [\"Dee\", 12, 11, 9, 16, 6, 10.8]\n      ],\n      \"options\": {\n        \"title\": \"Test score in a classroom between 5 students\",\n        \"vAxis\": { \"title\": \"Grade\" },\n        \"hAxis\": { \"title\": \"Students\" },\n        \"seriesType\": \"bars\",\n        \"series\": { \"5\": { \"type\": \"line\" } }\n      }\n    },\n    {\n      \"name\": \"Pie\",\n      \"chartType\": \"PieChart\",\n      \"data\": [\n        [\"Task\", \"Hours per Day\"],\n        [\"Code\", 11],\n        [\"Eat\", 5],\n        [\"Tweet\", 2],\n        [\"Watch TV\", 3],\n        [\"Sleep\", 4]\n      ],\n      \"options\": {\n        \"title\": \"Pie Chart displaying daily activities\",\n        \"is3D\": true\n      }\n    },\n    {\n      \"name\": \"Scatter Chart\",\n      \"chartType\": \"ScatterChart\",\n      \"data\": [\n        [\"Task\", \"Hours per Day\"],\n        [\"Code\", 7],\n        [\"Write\", 11],\n        [\"Sleep\", 2],\n        [\"Read\", 5],\n        [\"Watch TV\", 2]\n      ],\n      \"options\": {\n        \"title\": \"Scattered Chart displaying daily task\"\n      }\n    }\n  ]\n}\n",[711,908,906],{"__ignoreMap":713},[682,910,911],{},"The code above is in JSON format and will serve as our API response.",[724,913,915],{"id":914},"creating-states","Creating States",[682,917,918,919,921],{},"We’ll be managing two states: the loading state (when the data is coming from the API) and the data state (when displaying the data in our chart). Paste the code block below into the ",[711,920,822],{}," file:",[704,923,926],{"className":924,"code":925,"language":709},[707],"import React, { useState, useEffect } from 'react';\nfunction App() {\n const [loading, setLoading] = useState(false);\n const [data, setData] = useState(false);\n  useEffect(() => {\n  }, []);\n  .....\n}\n",[711,927,925],{"__ignoreMap":713},[682,929,930,931,934,935,938,939,941],{},"In the code block above, we imported the ",[711,932,933],{},"useState"," and ",[711,936,937],{},"useEffect"," components from the React library and then created two states: one for our loading gif, and the other to display the response data with ",[711,940,933],{},".",[724,943,945],{"id":944},"manipulating-our-state","Manipulating our State",[682,947,948,949,952],{},"Now, let’s manage our state by updating the code in the ",[711,950,951],{},"App()"," function with the code block below:",[704,954,957],{"className":955,"code":956,"language":709},[707],"import \".\u002FApp.css\";\nimport response from \".\u002Fdata.json\";\nimport Charts from \".\u002FCharts\";\nimport { useState, useEffect } from \"react\";\nfunction App() {\n const [loading, setLoading] = useState(false);\n const [data, setData] = useState(false);\n  useEffect(() => {\n const id = setInterval(() => {\n      setLoading(false);\n      setData(response);\n    }, 3000);\n return () => {\n      clearInterval(id);\n    };\n  }, [loading]);\n  .....\n}\n",[711,958,956],{"__ignoreMap":713},[682,960,961,962,964],{},"With the code block above, we import the ",[711,963,892],{}," as a response that is passed into a timer function. This creates a 3-second delay to simulate a fetch request, after which we set our loading to false (stop the spinner) and set the data to the response data.",[724,966,968],{"id":967},"using-multiple-charts","Using Multiple Charts",[682,970,971],{},"React Google Charts has a variety of chart types at our disposal.",[682,973,974,975,977],{},"In this section, we’ll be implementing a few of the charts to visualize our data from the ",[711,976,892],{}," file.",[682,979,980,981,921],{},"When loading, we want to display a loading gif. Import the loading gif into the ",[711,982,822],{},[682,984,985],{},[711,986,987],{},"import spinner from \".\u002Fspinner.gif\";",[682,989,990],{},"Now, let's populate our app with other chart types. Update the return block by copying and pasting the code block below:",[704,992,995],{"className":993,"code":994,"language":709},[707],"function App() {\n  .....\n  return (\n      {loading ? (              ) : (        data.charts.map((i, index) => )      )}    \n  );\n}\n",[711,996,994],{"__ignoreMap":713},[682,998,999,1000,1002,1003,1005],{},"We’re looping through the response stored in the ",[711,1001,799],{}," hook and passing it to our ",[711,1004,840],{}," components as props while listening to the loading state. While the data is loading, the loading gif is displayed, and after 3 seconds, the data is displayed.",[724,1007,1009],{"id":1008},"updating-the-google-charts-component","Updating the Google Charts Component",[682,1011,1012,1013,1016],{},"In the previous section, we successfully mapped and passed our response as props into the Charts component. Let’s update our Charts component to receive the props and render the charts. To achieve this, update the code in ",[711,1014,1015],{},"src\u002FCharts.jsx",":",[704,1018,1021],{"className":1019,"code":1020,"language":709},[707],"import { Chart } from \"react-google-charts\";\nfunction Charts({ response }) {\n  const { data, options, chartType } = response;\n  return (\n    \n      chartType={chartType}\n      data={data}\n      options={options}\n      width={\"100%\"}\n      height={\"400px\"}\n    \u002F>\n  );\n}\nexport default Charts;\n",[711,1022,1020],{"__ignoreMap":713},[682,1024,1025,1026,808,1028,1030,1031,1033,1034,1036],{},"In the code block above, we destructure ",[711,1027,799],{},[711,1029,803],{},", and ",[711,1032,795],{}," from the response prop, and then assign their corresponding property to the ",[711,1035,784],{}," component.",[682,1038,1039],{},"We’ve successfully built our chart application! Let’s refresh it to see the charts as shown below:",[682,1041,1042],{},[766,1043],{"alt":1044,"src":1045},"Various Google Charts. ","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fgoogle-charts-react-data-visualization\u002Fimg-004.png",[689,1047,1049],{"id":1048},"use-cases-for-data-visualization","Use Cases for Data Visualization",[682,1051,1052],{},"Keeping track of user data and activities can be rigorous for users, admins, and developers since data is often presented in several rows and columns. This makes reading and interpreting data a strenuous task for the analyst. With visual data, anyone can easily understand it, thus making it easy for the brain to capture and process.",[682,1054,1055],{},"Visual charts are most often used in:",[1057,1058,1059,1063,1066],"ul",{},[1060,1061,1062],"li",{},"Admin dashboards",[1060,1064,1065],{},"Network mapping",[1060,1067,1068],{},"Real-time data flow in stock markets",[689,1070,1072],{"id":1071},"conclusion","Conclusion",[682,1074,1075,1076,1078],{},"In this tutorial, we explored React Google Charts, its uses, and how to use it to create dynamic charts for our applications. We also broadened our expertise by looking at other techniques for building complicated applications with React Hooks and the ",[711,1077,788],{}," package.",[682,1080,1081,1082,1087,1088,1093],{},"Read the ",[729,1083,1086],{"href":1084,"rel":1085},"https:\u002F\u002Fwww.react-google-charts.com\u002Fexamples",[733],"React Google Chart documentation"," for more implementation information and check out the ",[729,1089,1092],{"href":1090,"rel":1091},"https:\u002F\u002Fgithub.com\u002FiamVictorSam\u002Freact-google-chart",[733],"complete source code"," for this article.",{"title":713,"searchDepth":1095,"depth":1095,"links":1096},2,[1097,1098,1106,1113,1114],{"id":691,"depth":1095,"text":692},{"id":698,"depth":1095,"text":699,"children":1099},[1100,1103,1104],{"id":726,"depth":1101,"text":1102},3,"Installing React Google Charts",{"id":750,"depth":1101,"text":751},{"id":818,"depth":1101,"text":1105},"Updating App.js",{"id":862,"depth":1095,"text":863,"children":1107},[1108,1109,1110,1111,1112],{"id":885,"depth":1101,"text":886},{"id":914,"depth":1101,"text":915},{"id":944,"depth":1101,"text":945},{"id":967,"depth":1101,"text":968},{"id":1008,"depth":1101,"text":1009},{"id":1048,"depth":1095,"text":1049},{"id":1071,"depth":1095,"text":1072},null,"Software Development","2022-10-19T00:00:00.000Z","Let's explore React Google Charts! We'll discuss its uses and how to use it to create dynamic charts for our applications in this step-by-step tutorial.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fgoogle-charts-react-data-visualization\u002Fhero.jpeg","Five grayscale bar charts.",{},"\u002Fblog\u002Fgoogle-charts-react-data-visualization",{"title":673,"description":1118},"blog\u002Fgoogle-charts-react-data-visualization","_SFn_DaWDAvX6jk_0R6WRywEn5MIvTsW5wOr7rpm4kM",{"id":1129,"title":674,"body":1130,"description":713,"draft":1119,"extension":1120,"meta":1134,"navigation":32,"path":1135,"photo":1136,"photoAlt":1115,"seo":1137,"stem":1138,"__hash__":1139},"authors\u002Fauthors\u002Fsam-victor.md",{"type":679,"value":1131,"toc":1132},[],{"title":713,"searchDepth":1095,"depth":1095,"links":1133},[],{},"\u002Fauthors\u002Fsam-victor","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fplaceholder.svg",{"title":674,"description":713},"authors\u002Fsam-victor","TR4zhV-Y-Z_ORuOINT4XO1pQPvsQVJNxnpSi-gJq6hI",{"left":1141,"top":1141,"width":1142,"height":1142,"rotate":1141,"vFlip":1119,"hFlip":1119,"body":1143},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]