{"id":16555,"date":"2017-11-28T16:40:13","date_gmt":"2017-11-28T11:10:13","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=16555"},"modified":"2026-01-20T14:36:39","modified_gmt":"2026-01-20T09:06:39","slug":"create-charts-vue-js","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/","title":{"rendered":"Create Delightful Charts with Vue.js and FusionCharts 2026"},"content":{"rendered":"Vue.JS a progressive JavaScript-based framework works well when you want to build user interfaces. The Vue framework is designed such that it can be adopted incrementally; a developer\u2019s familiarity with HTML, CSS, and JavaScript, therefore, makes it all the more easy to start working with Vue. Additionally, the core library\u2019s focus on the view layer only allows for easy integration with other libraries too.\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\/create-charts-vue-js\/#Benefits_of_VueJS_over_other_libraries\" title=\"Benefits of Vue.JS over other libraries\">Benefits of Vue.JS over other libraries<\/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\/create-charts-vue-js\/#The_Vue-FusionCharts_Component\" title=\"The Vue-FusionCharts Component\">The Vue-FusionCharts Component<\/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\/create-charts-vue-js\/#Integrating_VueJS_with_FusionCharts\" title=\"Integrating Vue.JS with FusionCharts\">Integrating Vue.JS with FusionCharts<\/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\/create-charts-vue-js\/#Integrating_the_FusionCharts_extension_with_VueJS\" title=\"Integrating the FusionCharts extension with Vue.JS\">Integrating the FusionCharts extension with Vue.JS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/#Creating_the_chart_instance\" title=\"Creating the chart instance\">Creating the chart instance<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Benefits_of_VueJS_over_other_libraries\"><\/span>Benefits of Vue.JS over other libraries<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nWhile every library comes with its own set of advantages, Vue.JS, for specific metrics, is marginally better than most other libraries. Vue\u2019s rise in popularity over libraries like React and Angular is attributed to factors like runtime performance, optimization with respect to component re-rendering, CSS management, and data binding.\r\n\r\nFor example, when it comes to runtime performance, this is how Vue.JS compares with React for the time taken for creating 1000 rows after a page is loaded:\r\n<ol><em>react-v16.1.0-keyed: <strong>187 \u00b1 4.3<\/strong>\r\nvue-v2.5.3-keyed: <strong>169 \u00b1 3.6<\/strong><\/em><\/ol>\r\n\r\n(Figures according to the data collected by a 3rd party benchmark)\r\n\r\nSimilarly, when it comes to Angular, Vue demonstrates a better performance due to better optimization.\r\n<h2><span class=\"ez-toc-section\" id=\"The_Vue-FusionCharts_Component\"><\/span>The Vue-FusionCharts Component<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nFusionCharts Suite XT is a JavaScript based charting library that comes with several basic and advanced configurations supported by its large number of charts and maps.\r\n\r\nThe Vue-FusionCharts component lets you easily include FusionCharts in your Vue projects and add interactive charts to your Vue applications.\r\n<h2><span class=\"ez-toc-section\" id=\"Integrating_VueJS_with_FusionCharts\"><\/span>Integrating Vue.JS with FusionCharts<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<strong>Downloading the required components<\/strong>\r\nBefore we look at how you can create charts using Vue.JS, you need to:\r\n\r\n<a>Download FusionCharts Suite XT.<\/a>\r\nThe FusionCharts Suite XT downloads as a zip package. To install the suite, all you need to do is unzip the files and copy them in your project folder. As simple as that!\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/dev\/getting-started\/vue\/your-first-chart-using-vuejs\" target=\"_blank\" rel=\"noopener noreferrer\">Download the Vue-FusionCharts component.<\/a>\r\nThe Vue-FusionCharts component also downloads as a zip file. Unzip this and copy the files into your project folder.\r\n<h2><span class=\"ez-toc-section\" id=\"Integrating_the_FusionCharts_extension_with_VueJS\"><\/span>Integrating the FusionCharts extension with Vue.JS<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nTo include the FusionCharts library and the Vue-FusionCharts component in your project, copy the following code and paste it into your JavaScript file:\r\n<pre class=\"lang:markup decode:true \">&lt;script type=\"text\/javascript\" src=\"fetch.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"https:\/\/unpkg.com\/vue@2.3.3\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"https:\/\/unpkg.com\/fusioncharts\/fusioncharts.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"https:\/\/unpkg.com\/fusioncharts\/fusioncharts.charts.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"https:\/\/unpkg.com\/fusioncharts@3.12.1\/themes\/fusioncharts.theme.fint.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"https:\/\/unpkg.com\/fusioncharts@3.12.1\/themes\/fusioncharts.theme.ocean.js\"&gt;&lt;\/script&gt;   \r\n&lt;script type=\"text\/javascript\" src=\"https:\/\/unpkg.com\/vue-fusioncharts\/dist\/vue-fusioncharts.min.js\"&gt;&lt;\/script&gt;\r\n<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"Creating_the_chart_instance\"><\/span>Creating the chart instance<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIn this tutorial, we\u2019ll create a multi-series column 2D chart that plots growth for the year over year sales of technology products.\r\n\r\n<strong>Creating the data source<\/strong>\r\n\r\nTo create the data source for the sample chart, copy the code given below and paste it in your JS file:\r\n<pre class=\"lang:json decode:true \">{\r\n         \"chart\": {\r\n           \"caption\": \"Growth of hot tech products\",\r\n           \"subcaption\": \"YoY Sales in USD\",\r\n           \"decimals\": \"0\",\r\n           \"numberprefix\": \"$\",\r\n           \"baseFont\": \"Roboto\",\r\n           \"baseFontSize\": \"14\",\r\n           \"showAlternateVGridColor\": \"1\",\r\n           \"alternateVGridAlpha\": \"5\",\r\n           \"labelFontSize\": \"15\",\r\n           \"captionFontSize\": \"20\",\r\n           \"subCaptionFontSize\": \"16\",\r\n           \"placevaluesinside\": \"1\",\r\n           \"rotatevalues\": \"0\",\r\n           \"divlinealpha\": \"50\",\r\n           \"paletteColors\": \"#1B5E20, #0091EA\",\r\n           \"plotfillalpha\": \"80\",\r\n           \"drawCrossLine\": \"1\",\r\n           \"crossLineColor\": \"#dddddd\",\r\n           \"crossLineAlpha\": \"30\",\r\n           \"theme\": \"ocean\"    \r\n          },\r\n         \"categories\": [{\r\n           \"category\": [{\r\n               \"label\": \"Wearables\"\r\n             },\r\n             {\r\n               \"label\": \"Smart Home\"\r\n             },\r\n             {\r\n               \"label\": \"4K UHD TV\"\r\n             }\r\n           ]\r\n         }],\r\n         \"dataset\": [{\r\n             \"seriesname\": \"2016\",\r\n             \"data\": [{\r\n                 \"value\": \"43680000\"\r\n               },\r\n               {\r\n                 \"value\": \"13500000\"\r\n               },\r\n               {\r\n                 \"value\": \"6847000\"\r\n               }\r\n             ]\r\n           }, {\r\n             \"seriesname\": \"2017\",\r\n             \"data\": [{\r\n                 \"value\": \"48000000\"\r\n               },\r\n               {\r\n                 \"value\": \"27000000\"\r\n               },\r\n               {\r\n                 \"value\": \"16700000\"\r\n               }\r\n             ]\r\n           }\r\n         ]\r\n       }\r\n<\/pre>\r\n&nbsp;\r\n\r\n<strong>Setting the chart configuration<\/strong>\r\n\r\nTo set the chart configuration, copy the following code and paste it in your JS file:\r\n<pre class=\"lang:javascript decode:true \">window.loadApp = function (data) {\r\n Vue.use(VueFusionCharts);\r\n \r\n const app = new Vue({\r\n   el: '#app',\r\n   data: {\r\n     type: 'mscolumn2d',\r\n     width: '100%',\r\n     height: '400',\r\n     dataFormat: 'json',\r\n     dataSource: data\r\n   }\r\n });\r\n};\r\n<\/pre>\r\n&nbsp;\r\n\r\n<strong>Rendering the chart<\/strong>\r\n\r\nRendering the chart by calling the function\r\nFinally, to render the chart, paste the following code in your JS file:\r\n<pre class=\"lang:javascript decode:true \">&lt;div id=\"app\"&gt;\r\n           &lt;fusioncharts\r\n           :type=\"type\"\r\n           :width=\"width\"\r\n           :height=\"height\"\r\n           :dataFormat=\"dataFormat\"\r\n           :dataSource=\"dataSource\"\r\n           &gt;&lt;\/fusioncharts&gt;\r\n       &lt;\/div&gt;\r\n<\/pre>\r\n<strong>Here&#8217;s what we get as output:<\/strong>\r\n\r\nIf you\u2019ve followed the above steps correctly, your output should look like the image shown below:\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/11\/fusioncharts-vue-output.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16556\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/11\/fusioncharts-vue-output.png\" alt=\"\" width=\"1646\" height=\"790\" srcset=\"\/blog\/wp-content\/uploads\/2017\/11\/fusioncharts-vue-output.png 1646w, \/blog\/wp-content\/uploads\/2017\/11\/fusioncharts-vue-output-150x72.png 150w\" sizes=\"auto, (max-width: 1646px) 100vw, 1646px\" \/><\/a>\r\n\r\nIf you see any errors in your code or have trouble executing the above sample, click <a>here<\/a> for the complete source code. For more, refer to the <a href=\"https:\/\/www.fusioncharts.com\/dev\/fusiontime\/integrations\/vuejs\/your-first-chart-using-vuejs-in-fusiontime\" rel=\"noopener noreferrer\" target=\"_blank\">FusionCharts Vue.JS component developer documentation<\/a>.  ","protected":false},"excerpt":{"rendered":"<p>Vue.JS a progressive JavaScript-based framework works well when you want to build user interfaces. The Vue framework is designed such that it can be adopted incrementally; a developer\u2019s familiarity with HTML, CSS, and JavaScript, therefore, makes it all the more easy to start working with Vue. Additionally, the core library\u2019s focus on the view layer [&hellip;]<\/p>\n","protected":false},"author":39,"featured_media":16567,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"coauthors":[675],"class_list":["post-16555","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create Delightful Charts With Vue.JS And FusionCharts<\/title>\n<meta name=\"description\" content=\"Charting with Vue.js is simple and incremental. Follow our 2026 step-by-step guide to start creating beautiful charts today. Build fast interfaces 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\/create-charts-vue-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Delightful Charts With Vue.JS And FusionCharts\" \/>\n<meta property=\"og:description\" content=\"Charting with Vue.js is simple and incremental. Follow our 2026 step-by-step guide to start creating beautiful charts today. Build fast interfaces today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-28T11:10:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:06:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/11\/Creating-Charts-Using-VueJS-.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2016\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jonathan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jonathan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 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\/create-charts-vue-js\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Jonathan\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb\"\n\t            },\n\t            \"headline\": \"Create Delightful Charts with Vue.js and FusionCharts 2026\",\n\t            \"datePublished\": \"2017-11-28T11:10:13+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:06:39+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/\"\n\t            },\n\t            \"wordCount\": 508,\n\t            \"commentCount\": 1,\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\/create-charts-vue-js\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2017\/11\/Creating-Charts-Using-VueJS-.jpg\",\n\t            \"articleSection\": [\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\/create-charts-vue-js\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/\",\n\t            \"name\": \"Create Delightful Charts With Vue.JS And FusionCharts\",\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\/create-charts-vue-js\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2017\/11\/Creating-Charts-Using-VueJS-.jpg\",\n\t            \"datePublished\": \"2017-11-28T11:10:13+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:06:39+00:00\",\n\t            \"description\": \"Charting with Vue.js is simple and incremental. Follow our 2026 step-by-step guide to start creating beautiful charts today. Build fast interfaces today.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/#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\/create-charts-vue-js\/\"\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\/create-charts-vue-js\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2017\/11\/Creating-Charts-Using-VueJS-.jpg\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2017\/11\/Creating-Charts-Using-VueJS-.jpg\",\n\t            \"width\": 2016,\n\t            \"height\": 750,\n\t            \"caption\": \"creating charts in vue js using FusionCharts\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/#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\": \"Create Delightful Charts with Vue.js and FusionCharts 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\/14fbfb07e81bfbcd524a4202f34bdcbb\",\n\t            \"name\": \"Jonathan\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/0b58dff9af412d6ac90a1569df4d596c\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg\",\n\t                \"caption\": \"Jonathan\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/jonathan\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Delightful Charts With Vue.JS And FusionCharts","description":"Charting with Vue.js is simple and incremental. Follow our 2026 step-by-step guide to start creating beautiful charts today. Build fast interfaces 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\/create-charts-vue-js\/","og_locale":"en_US","og_type":"article","og_title":"Create Delightful Charts With Vue.JS And FusionCharts","og_description":"Charting with Vue.js is simple and incremental. Follow our 2026 step-by-step guide to start creating beautiful charts today. Build fast interfaces today.","og_url":"https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2017-11-28T11:10:13+00:00","article_modified_time":"2026-01-20T09:06:39+00:00","og_image":[{"width":2016,"height":750,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/11\/Creating-Charts-Using-VueJS-.jpg","type":"image\/jpeg"}],"author":"Jonathan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jonathan","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/"},"author":{"name":"Jonathan","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb"},"headline":"Create Delightful Charts with Vue.js and FusionCharts 2026","datePublished":"2017-11-28T11:10:13+00:00","dateModified":"2026-01-20T09:06:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/"},"wordCount":508,"commentCount":1,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/11\/Creating-Charts-Using-VueJS-.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/","url":"https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/","name":"Create Delightful Charts With Vue.JS And FusionCharts","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/11\/Creating-Charts-Using-VueJS-.jpg","datePublished":"2017-11-28T11:10:13+00:00","dateModified":"2026-01-20T09:06:39+00:00","description":"Charting with Vue.js is simple and incremental. Follow our 2026 step-by-step guide to start creating beautiful charts today. Build fast interfaces today.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2017\/11\/Creating-Charts-Using-VueJS-.jpg","contentUrl":"\/blog\/wp-content\/uploads\/2017\/11\/Creating-Charts-Using-VueJS-.jpg","width":2016,"height":750,"caption":"creating charts in vue js using FusionCharts"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-vue-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Delightful Charts with Vue.js and FusionCharts 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\/14fbfb07e81bfbcd524a4202f34bdcbb","name":"Jonathan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/0b58dff9af412d6ac90a1569df4d596c","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg","caption":"Jonathan"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/jonathan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16555","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\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=16555"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16555\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/16567"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16555"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}