{"id":18195,"date":"2021-06-23T14:00:16","date_gmt":"2021-06-23T08:30:16","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=18195"},"modified":"2026-01-20T14:36:15","modified_gmt":"2026-01-20T09:06:15","slug":"easily-add-charts-gauges-and-maps-to-your-svelte-projects","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/","title":{"rendered":"Easily Add Charts, Gauges, and Maps to Your Svelte Projects 2026"},"content":{"rendered":"No matter what your industry or business focus is, there are specific must-have tools that you can exploit to give you a competitive edge. This is especially true today &#8211; collecting data is standard practice, and everyone has mechanisms to amass information covering almost every aspect of our businesses. Modern businesses have access to everything from customer and market data to data that describes the processes they use to create or manufacture the products they sell.\r\n\r\nWith this wealth of information at hand, data visualization is critically important as an analytical tool. Effective data visualization enables businesses to present and organize their data in a way that allows anyone, especially decision-makers, to identify and understand patterns and trends in the big picture as they emerge. Depending on the nature of the data, you can display data with several tools, including charts, gauges, maps, plots, and so on. Because of this, a <a href=\"https:\/\/www.fusioncharts.com\/\">data visualization tool<\/a> helps businesses develop informed marketing plans, promote sales, and make proactive decisions for the future.\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#How_do_I_Using_FusionCharts_to_Achieve_Our_Data_Visualization_Goals\" title=\"How do I Using FusionCharts to Achieve Our Data Visualization Goals?\">How do I Using FusionCharts to Achieve Our Data Visualization Goals?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#Prerequisites\" title=\"Prerequisites\">Prerequisites<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#Step_1_Create_a_Svelte_Project\" title=\"Step 1: Create a Svelte Project\">Step 1: Create a Svelte Project<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#Step_2_Add_Code_to_Appsvelte\" title=\"Step 2: Add Code to App.svelte\">Step 2: Add Code to App.svelte<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#A_Add_Imports\" title=\"A. Add Imports\">A. Add Imports<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#B_Add_Data\" title=\"B. Add Data\">B. Add Data<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#C_Add_Color_Ranges\" title=\"C. Add Color Ranges\">C. Add Color Ranges<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#D_Add_a_Chart_Configuration\" title=\"D. Add a Chart Configuration\">D. Add a Chart Configuration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#E_Add_a_Gauge_Configuration\" title=\"E. Add a Gauge Configuration\">E. Add a Gauge Configuration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#F_Add_a_Map_Configuration\" title=\"F. Add a Map Configuration\">F. Add a Map Configuration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#G_Render_Everything\" title=\"G. Render Everything\">G. Render Everything<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#Step_3_Add_Code_to_mainjs\" title=\"Step 3: Add Code to main.js\">Step 3: Add Code to main.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#Step_4_Run_the_App\" title=\"Step 4: Run the App\">Step 4: Run the App<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#Are_There_More_Options_for_Data_Visualization\" title=\"Are There More Options for Data Visualization?\">Are There More Options for Data Visualization?<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"How_do_I_Using_FusionCharts_to_Achieve_Our_Data_Visualization_Goals\"><\/span>How do I Using FusionCharts to Achieve Our Data Visualization Goals?<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<span data-preserver-spaces=\"true\">That is where\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/www.fusioncharts.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">FusionCharts<\/span><\/a><span data-preserver-spaces=\"true\">\u00a0enters the frame. FusionCharts is an extensive library of over 100 charts and graphs, as well as over 2000 maps. It is a complete suite of data visualization tools that makes it simple to integrate various data visualization techniques into your online and mobile apps. FusionCharts takes your apps to the next level with beautiful visuals. In addition, you can get it up and running in no time using SvelteJS directives.<\/span>\r\n\r\nContinue reading to learn how to use simple SvelteJS directives to add charts, gauges, and maps to your applications. Learn more about svelte-fusioncharts bindings that allow you to integrate FusionCharts components into your programs.\r\n\r\nBelow are four simple steps that you need to follow to build a Svelte app with a chart, gauge, and map. We&#8217;ll display the percentage of land area for each continent, taking the data from <a href=\"https:\/\/www.enchantedlearning.com\/geography\/continents\/Land.shtml\">enchantedlearning.com<\/a>. As an example, the chart, gauge, and map appear as seen below. They are displayed one after the other within the rendered app.\r\n\r\n<figure id=\"attachment_18199\" aria-describedby=\"caption-attachment-18199\" style=\"width: 672px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18199\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2021\/06\/sv1-300x138.png\" alt=\"Gauge, chart and Map\" width=\"672\" height=\"309\" srcset=\"\/blog\/wp-content\/uploads\/2021\/06\/sv1-300x138.png 300w, \/blog\/wp-content\/uploads\/2021\/06\/sv1-768x352.png 768w, \/blog\/wp-content\/uploads\/2021\/06\/sv1-1024x470.png 1024w, \/blog\/wp-content\/uploads\/2021\/06\/sv1.png 1774w\" sizes=\"auto, (max-width: 672px) 100vw, 672px\" \/><figcaption id=\"caption-attachment-18199\" class=\"wp-caption-text\">Gauge (top), Chart (left), and Map (right)<\/figcaption><\/figure>\r\n\r\n<div class=\"mceTemp\"><\/div>\r\n<h2><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span>Prerequisites<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nYour development environment needs the latest npm package manager and <a href=\"https:\/\/nodejs.org\/en\/\">node.js<\/a> 10.9.0 or later. Once you have that setup, you are ready to build your Svelte project integrated with FusionCharts.\r\n<h2><span class=\"ez-toc-section\" id=\"Step_1_Create_a_Svelte_Project\"><\/span>Step 1: Create a Svelte Project<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nCreate a folder for your svelte project by typing the following at the command line:\r\n<pre class=\"lang:bash\">npx degit sveltejs\/template svelte-fusionchart-demo<\/pre>\r\nThis will create a project folder called <strong>svelte-fusionchart-demo<\/strong> with the following directory structure:\r\n\r\n<figure id=\"attachment_18196\" aria-describedby=\"caption-attachment-18196\" style=\"width: 217px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18196 size-medium\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2021\/06\/dir-217x300.png\" alt=\"Directory structure of svelte-fusionchart-demo \" width=\"217\" height=\"300\" srcset=\"\/blog\/wp-content\/uploads\/2021\/06\/dir-217x300.png 217w, \/blog\/wp-content\/uploads\/2021\/06\/dir.png 372w\" sizes=\"auto, (max-width: 217px) 100vw, 217px\" \/><figcaption id=\"caption-attachment-18196\" class=\"wp-caption-text\">The directory structure of svelte-fusionchart-demo<\/figcaption><\/figure>\r\n\r\nYour directory contains public, scripts, and src folders. To get moving, you only need to change the code in the <strong>App. svelte<\/strong> and <strong>main.js<\/strong> files located in the <strong>src<\/strong> folder.\r\n\r\nTo do this, type the following at the command line:\r\n<pre class=\"lang:markup\">cd my-first-svelte-project\r\nnpm install\r\nnpm install svelte-fusioncharts fusioncharts --save<\/pre>\r\nThis installs the required node_modules into your project directory.\r\n<h2><span class=\"ez-toc-section\" id=\"Step_2_Add_Code_to_Appsvelte\"><\/span>Step 2: Add Code to App.svelte<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nNow we&#8217;ll begin adding code for our app. If you don&#8217;t need one of the components in this example, you can omit it.\r\n<h3><span class=\"ez-toc-section\" id=\"A_Add_Imports\"><\/span>A. Add Imports<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nIn the &lt;script&gt; section of the app.svelte file add the following imports.\r\n<pre class=\"lang:markup\">\/\/ General imports for all fusion charts\r\nimport FusionCharts from \"fusioncharts\";\r\nimport FusionTheme from \"fusioncharts\/themes\/fusioncharts.theme.fusion\";\r\n\r\n\/\/ Required for charts\r\nimport Charts from \"fusioncharts\/fusioncharts.charts\";\r\n\r\n\/\/ Required for gauges\r\nimport Widgets from \"fusioncharts\/fusioncharts.widgets\";\r\n\r\n\/\/ Required for maps\r\nimport Maps from \"fusioncharts\/fusioncharts.maps\";\r\nimport World from \"fusioncharts\/maps\/fusioncharts.world\";\r\n\r\n\/\/ Required for all types\r\nimport SvelteFC, { fcRoot } from \"svelte-fusioncharts\";\r\n\r\n\/\/ FusionCharts should always be first parameter. You can omit \r\n\/\/ what is not required\r\nfcRoot(FusionCharts, Charts, Maps, World, Widgets, FusionTheme);<\/pre>\r\n<h3><span class=\"ez-toc-section\" id=\"B_Add_Data\"><\/span><!--more--> B. Add Data<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nAdd the data of the percentage of the land area of continents from <a href=\"https:\/\/www.enchantedlearning.com\/geography\/continents\/Land.shtml\">enchantedlearning.com<\/a> as follows. This will go in the &lt;script&gt; tag.\r\n<pre class=\"lang:markup\">\/\/ Add data of continents from www.enchantedlearning.com\r\n\/\/ Needed for chart and map\r\nconst continentData = [\r\n    {\r\n      id: \"NA\",\r\n      label: \"North America\",\r\n      value: \"16.3\",\r\n      showLabel: \"1\"\r\n\r\n    },\r\n    {\r\n      id: \"SA\",\r\n      label: \"South America\",\r\n      value: \"12.0\",\r\n      showLabel: \"1\"\r\n    },\r\n    {\r\n      id: \"AS\",\r\n      label: \"Asia\",\r\n      value: \"30.0\",\r\n      showLabel: \"1\"\r\n    },\r\n    {\r\n      id: \"EU\",\r\n      label: \"Europe\",\r\n      value: \"6.7\",\r\n      showLabel: \"1\"\r\n    },\r\n    {\r\n      id: \"AF\",\r\n      label: \"Africa\",\r\n      value: \"20.3\",\r\n      showLabel: \"1\"\r\n    },\r\n    {\r\n      id: \"AU\",\r\n      label: \"Australia\",\r\n      value: \"5.2\",\r\n      showLabel: \"1\"\r\n    }\r\n  ];<\/pre>\r\nAlso, add the const for captions and sub-captions.\r\n<pre class=\"lang:markup\">\/\/ For captions and subcaptions\r\nconst caption = \"Percentage of Land Area on Planet Earth\";\r\nconst subcaption = \"Data Source: www.enchantedlearning.com\";<\/pre>\r\n<h3><span class=\"ez-toc-section\" id=\"C_Add_Color_Ranges\"><\/span>C. Add Color Ranges<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nIn the code below, there are four color ranges. You can choose to add more for the slider and the gauge. This will also be placed in the &lt;script&gt; tag.\r\n<pre class=\"lang:markup\">\/\/ Add color ranges for map and guage\r\nconst colorRange = {\r\n    minvalue: \"0\",\r\n    code: \"#87CEFA\",\r\n    gradient: \"1\", \r\n    color: [\r\n      {\r\n        minvalue: \"0.0\",\r\n        maxvalue: \"5.0\",\r\n        color: \"#87CEFA\"\r\n      },\r\n      {\r\n        minvalue: \"5.0\",\r\n        maxvalue: \"10.0\",\r\n        color: \"#87CEEB\"\r\n      },\r\n      {\r\n        minvalue: \"10.0\",\r\n        maxvalue: \"25.0\",\r\n        color: \"#00BFFF\"\r\n      },      \r\n      {\r\n        minvalue: \"25.0\",\r\n        maxvalue: \"100.0\",\r\n        color: \"#0000FF\"\r\n      }\r\n    ]\r\n};<\/pre>\r\n<h3><span class=\"ez-toc-section\" id=\"D_Add_a_Chart_Configuration\"><\/span>D. Add a Chart Configuration<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nBelow is the JSON object required for rendering a chart (again in the &lt;script&gt; tag):\r\n<pre class=\"lang:markup\">\/\/ Add chart configuration\r\nconst chartConfigs = {\r\n    type: \"column2d\", \r\n    height: 400, \r\n    width: 600, \r\n    dataFormat: \"json\", \r\n    renderAt: \"chart-container\", \r\n    dataSource: {\r\n      chart: {\r\n       caption: caption,\r\n       subCaption: subcaption,\r\n       xAxisName: \"Continent\", \r\n       yAxisName: \"% Land Area\", \r\n       numberSuffix: \"%\",\r\n       theme: \"fusion\"   \r\n      },\r\n      \/\/Include chartData from STEP 2\r\n      data: continentData\r\n    }\r\n  };<\/pre>\r\n<h3><span class=\"ez-toc-section\" id=\"E_Add_a_Gauge_Configuration\"><\/span>E. Add a Gauge Configuration<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nYou can add the configuration for rendering a gauge that uses the color range that we described earlier. In the &lt;script&gt; tag, add the following:\r\n<pre class=\"lang:markup\">\/\/ Add gauge configuration\r\nconst guageConfigs = {\r\n    type: \"angulargauge\", \r\n    width: \"450\", \r\n    height: \"200\",\r\n    dataFormat: \"json\", \r\n    renderAt: \"guage-container\", \r\n    dataSource: {\r\n     chart: {\r\n      caption: \"Percentage Land Area of Asia\",\r\n      lowerLimit: \"0\",\r\n      upperLimit: \"100\",\r\n      showValue: \"1\",\r\n      numberSuffix: \"%\",\r\n      theme: \"fusion\"\r\n    },\r\n    \/\/ Chart Data\r\n    colorRange: colorRange,\r\n    dials: {dial: [{value: \"30\"} ]}\r\n  }\r\n};<\/pre>\r\n<h3><span class=\"ez-toc-section\" id=\"F_Add_a_Map_Configuration\"><\/span>F. Add a Map Configuration<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nThe map configuration uses both the continent data and the color ranges we defined earlier. The &lt;script&gt; tag should also include this.\r\n<pre class=\"lang:markup\">\/\/ Add map configuration\r\nconst mapConfigs = {\r\n    type: \"world\", \/\/ Map type\r\n    width: \"600\", \/\/ Width of the chart\r\n    height: \"400\", \/\/ Height of the chart\r\n    dataFormat: \"json\", \/\/ Data Type\r\n    renderAt: \"map-container\", \r\n    dataSource: {\r\n      \/\/ Map Configuration\r\n      chart: {\r\n        caption: caption,\r\n        subcaption: subcaption,\r\n        numbersuffix: \"%\",\r\n        includevalueinlabels: \"1\",\r\n        labelsepchar: \" - \",\r\n        entityFillHoverColor: \"#FFF9C4\",\r\n        theme: \"fusion\"\r\n      },\r\n      colorrange: colorRange,\r\n      data: continentData\r\n    }\r\n  };<\/pre>\r\n<h3><span class=\"ez-toc-section\" id=\"G_Render_Everything\"><\/span>G. Render Everything<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nTo render the chart, gauge, and map on the same page, add the following after the &lt;script&gt; tag.\r\n<pre class=\"lang:markup\">&lt;SvelteFC {...chartConfigs}\/&gt; \r\n&lt;SvelteFC {...guageConfigs}\/&gt; \r\n&lt;SvelteFC {...mapConfigs} \/&gt;<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"Step_3_Add_Code_to_mainjs\"><\/span>Step 3: Add Code to main.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nOpen the <strong>main.js<\/strong> file in the <strong>src<\/strong> folder and add the following to it:\r\n<pre class=\"lang:markup\">import App from \".\/App.svelte\";\r\nvar app = new App({\r\n  target: document.body\r\n});\r\n\r\nexport default app;<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"Step_4_Run_the_App\"><\/span>Step 4: Run the App<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nNow you are ready to run the app by typing the following at the console:\r\n<pre class=\"lang:markup\">npm run dev<\/pre>\r\nYou can use localhost in your browser to see the running app. The port for localhost shows on the console when you run the command.\r\n<h2><span class=\"ez-toc-section\" id=\"Are_There_More_Options_for_Data_Visualization\"><\/span>Are There More Options for Data Visualization?<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nAs you can see from this example, FusionCharts opens up a world of visualization options and presentation ideas that you can add to a Svelte project. Explore the <a href=\"https:\/\/www.fusioncharts.com\/dev\/demos\/chart-gallery\">Fusion Charts Gallery<\/a> for more impressive and stunning interactive charts, gauges, and maps that you can customize and integrate into your project. You can also build beautiful and practical <a href=\"https:\/\/www.fusioncharts.com\/dashboards\/\">dashboards<\/a> for exploratory data analysis or data visualization.\r\n\r\nIf you want to run the code in this tutorial, you can download it <a href=\"https:\/\/github.com\/fusionchartsexpress\/svelt-fusion-charts-demo\">here<\/a>.\r\n\r\n<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/www.fusioncharts.com\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\" data-href=\"https:\/\/www.fusioncharts.com\/download\/\">Download FusionCharts now and accelerate to building successful apps!<\/a>\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;","protected":false},"excerpt":{"rendered":"<p>No matter what your industry or business focus is, there are specific must-have tools that you can exploit to give you a competitive edge. This is especially true today &#8211; collecting data is standard practice, and everyone has mechanisms to amass information covering almost every aspect of our businesses. Modern businesses have access to everything [&hellip;]<\/p>\n","protected":false},"author":59,"featured_media":18200,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[722,18],"tags":[683,105,152,792,240,747],"coauthors":[769],"class_list":["post-18195","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fusioncharts","category-tutorials","tag-charts","tag-data-visualization","tag-fusioncharts","tag-gauges","tag-maps","tag-svelte"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Easily Add Charts, Gauges, and Maps to Your Svelte Projects 2026<\/title>\n<meta name=\"description\" content=\"Add visualizations to your Svelte project in 2026. This tutorial shows you how to integrate charts, gauges, and maps with ease. Build modern apps today.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Easily Add Charts, Gauges, and Maps to Your Svelte Projects 2026\" \/>\n<meta property=\"og:description\" content=\"Add visualizations to your Svelte project in 2026. This tutorial shows you how to integrate charts, gauges, and maps with ease. Build modern apps today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-23T08:30:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:06:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2021\/06\/svMain.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mehreen Saeed\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mehreen Saeed\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Mehreen Saeed\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/93c1ff85ace69b8175fdec9016c8aca7\"\n\t            },\n\t            \"headline\": \"Easily Add Charts, Gauges, and Maps to Your Svelte Projects 2026\",\n\t            \"datePublished\": \"2021-06-23T08:30:16+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:06:15+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/\"\n\t            },\n\t            \"wordCount\": 894,\n\t            \"commentCount\": 0,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2021\/06\/svMain.jpg\",\n\t            \"keywords\": [\n\t                \"charts\",\n\t                \"data visualization\",\n\t                \"FusionCharts\",\n\t                \"gauges\",\n\t                \"maps\",\n\t                \"Svelte\"\n\t            ],\n\t            \"articleSection\": [\n\t                \"FusionCharts\",\n\t                \"Tutorials\"\n\t            ],\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"CommentAction\",\n\t                    \"name\": \"Comment\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/\",\n\t            \"name\": \"Easily Add Charts, Gauges, and Maps to Your Svelte Projects 2026\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2021\/06\/svMain.jpg\",\n\t            \"datePublished\": \"2021-06-23T08:30:16+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:06:15+00:00\",\n\t            \"description\": \"Add visualizations to your Svelte project in 2026. This tutorial shows you how to integrate charts, gauges, and maps with ease. Build modern apps today.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"en-US\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2021\/06\/svMain.jpg\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2021\/06\/svMain.jpg\",\n\t            \"width\": 1920,\n\t            \"height\": 1440\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.fusioncharts.com\/blog\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Easily Add Charts, Gauges, and Maps to Your Svelte Projects 2026\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"name\": \"FusionBrew - The FusionCharts Blog\",\n\t            \"description\": \"Get tips and tricks on how to build effective Data Visualisation using FusionCharts\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\",\n\t            \"name\": \"FusionCharts\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"width\": 1,\n\t                \"height\": 1,\n\t                \"caption\": \"FusionCharts\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/93c1ff85ace69b8175fdec9016c8aca7\",\n\t            \"name\": \"Mehreen Saeed\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/b00c4263cd8aa44b9c97ced2ed628629\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/c98\/c98777bf022eae7522cadf4e18cc8c38x96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/c98\/c98777bf022eae7522cadf4e18cc8c38x96.jpg\",\n\t                \"caption\": \"Mehreen Saeed\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/mehreensaeed\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Easily Add Charts, Gauges, and Maps to Your Svelte Projects 2026","description":"Add visualizations to your Svelte project in 2026. This tutorial shows you how to integrate charts, gauges, and maps with ease. Build modern apps today.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/","og_locale":"en_US","og_type":"article","og_title":"Easily Add Charts, Gauges, and Maps to Your Svelte Projects 2026","og_description":"Add visualizations to your Svelte project in 2026. This tutorial shows you how to integrate charts, gauges, and maps with ease. Build modern apps today.","og_url":"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2021-06-23T08:30:16+00:00","article_modified_time":"2026-01-20T09:06:15+00:00","og_image":[{"width":1920,"height":1440,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2021\/06\/svMain.jpg","type":"image\/jpeg"}],"author":"Mehreen Saeed","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mehreen Saeed","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/"},"author":{"name":"Mehreen Saeed","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/93c1ff85ace69b8175fdec9016c8aca7"},"headline":"Easily Add Charts, Gauges, and Maps to Your Svelte Projects 2026","datePublished":"2021-06-23T08:30:16+00:00","dateModified":"2026-01-20T09:06:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/"},"wordCount":894,"commentCount":0,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2021\/06\/svMain.jpg","keywords":["charts","data visualization","FusionCharts","gauges","maps","Svelte"],"articleSection":["FusionCharts","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/","url":"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/","name":"Easily Add Charts, Gauges, and Maps to Your Svelte Projects 2026","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2021\/06\/svMain.jpg","datePublished":"2021-06-23T08:30:16+00:00","dateModified":"2026-01-20T09:06:15+00:00","description":"Add visualizations to your Svelte project in 2026. This tutorial shows you how to integrate charts, gauges, and maps with ease. Build modern apps today.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2021\/06\/svMain.jpg","contentUrl":"\/blog\/wp-content\/uploads\/2021\/06\/svMain.jpg","width":1920,"height":1440},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/easily-add-charts-gauges-and-maps-to-your-svelte-projects\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Easily Add Charts, Gauges, and Maps to Your Svelte Projects 2026"}]},{"@type":"WebSite","@id":"https:\/\/www.fusioncharts.com\/blog\/#website","url":"https:\/\/www.fusioncharts.com\/blog\/","name":"FusionBrew - The FusionCharts Blog","description":"Get tips and tricks on how to build effective Data Visualisation using FusionCharts","publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fusioncharts.com\/blog\/#organization","name":"FusionCharts","url":"https:\/\/www.fusioncharts.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/","url":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","contentUrl":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","width":1,"height":1,"caption":"FusionCharts"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/93c1ff85ace69b8175fdec9016c8aca7","name":"Mehreen Saeed","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/b00c4263cd8aa44b9c97ced2ed628629","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/c98\/c98777bf022eae7522cadf4e18cc8c38x96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/c98\/c98777bf022eae7522cadf4e18cc8c38x96.jpg","caption":"Mehreen Saeed"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/mehreensaeed\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/18195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/users\/59"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=18195"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/18195\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/18200"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=18195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=18195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=18195"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=18195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}