{"id":3541,"date":"2013-06-27T11:37:53","date_gmt":"2013-06-27T06:07:53","guid":{"rendered":"http:\/\/blog.fusioncharts.com\/?p=3541"},"modified":"2026-01-20T14:37:34","modified_gmt":"2026-01-20T09:07:34","slug":"export-chart-as-image-on-client-side","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/export-chart-as-image-on-client-side\/","title":{"rendered":"Export Chart as Image on Client Side Without Hitting the Server 2026"},"content":{"rendered":"<p>An important feature you\u2019d consider when <a href=\"https:\/\/www.fusioncharts.com\/javascript-charting-comparison\/\">comparing javascript chart libraries<\/a> is the ability to export your charts in any given scenario &#8211; server-side, client-side, and every permutation and combination in between. This is one reason why our customers love <a href=\"https:\/\/www.fusioncharts.com\/tour\/\">FusionCharts Suite XT<\/a>. It allows you to export your charts <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/index.html?exporting-image\/server-side\/ECServerOverview.html\">server-side<\/a>, <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/index.html?exporting-image\/client-side\/ECClientOverview.html\">client-side<\/a>, in <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/index.html?exporting-image\/batch-exporting\/ECBatchOverview.html\">batch mode<\/a>, using a <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/index.html?exporting-image\/javascript-ref\/ECJavaScript.html\">JavaScript function<\/a>, or without even rendering in a browser using <a href=\"https:\/\/fusioncharts.com\/blog\/generate-chart-images-on-the-server-using-fusioncharts\/\">FCimg<\/a>, <a href=\"https:\/\/fusioncharts.com\/blog\/how-to-save-charts-as-images-at-server-side\/\">wkhtmltoimage, or PhantomJS<\/a>. Whew!<\/p>\r\n<p>While all these options would take care of most use cases, we still get a few requests from users who want to allow their end users to export charts on client side without sending a request to server. This may come in handy if your users save charts frequently, and you want to reduce cost on server, or avoid private data being transferred across network. Also, allowing your users to save charts locally on their machine in a hassle-free way, could mean a world of a difference to them. Though not a heavily requested feature, we decided to make it possible, even if not with a perfect solution, at least with one that works.<\/p>\r\n\r\n<!--more-->\r\n<p><strong>Live Example:<\/strong><\/p>\r\n<p>Here\u2019s a live example of how this is intended to work:<\/p>\r\n\r\n \r\n\r\n\r\n\r\n\r\n<p><strong>Requirements:<\/strong><\/p>\r\n<p>For this, we would use the canvg JavaScript library that converts SVG to HTML5 canvas. This conversion is required as our implementation makes use of the additional image-generation API of <code lang=\"html\"><\/code> element to output the charts as images.<\/p>\r\n<p><strong>Implementation:<\/strong><\/p>\r\n<p>There are three steps to the process (or 123 if you look at it from Jim Carrey&#8217;s perspective!):<\/p>\r\n<ol>\r\n\t<li>Include the three canvg scripts as mentioned in <a href=\"https:\/\/code.google.com\/p\/canvg\/#Usage\">canvg usage documentation<\/a> in your page  right before including FusionCharts.js<\/li>\r\n\t<li>Render your chart in JavaScript renderer mode. Once rendering is complete (subscribe to the &#8220;rendered&#8221; event of the chart to detect this), pass the SVG string of the chart to the canvg library by calling: <code lang=\"javascript\">canvg(\"myCanvasElementId\", myChartInstance.getSVGString());<\/code>\r\nWe are assuming that you have a canvas element in your page with the id &#8220;myCanvasElement&#8221;. The canvg library would replicate the chart on this canvas. For your implementation you may even choose to keep this canvas hidden by setting its css <code lang=\"html\">visibility<\/code> to none. In case you need more guidance in working with <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/JavaScript\/JS_EventOverview.html\">events raised by FusionCharts<\/a>, check out the documentation sample &#8220;<a href=\"https:\/\/docs.fusioncharts.com\/charts\/Code\/JavaScript\/Basics\/Events\/Rendered.html\">Using Rendered Event<\/a>&#8220;.<\/li>\r\n\t<li>Use the standard <code lang=\"javascript\">.toDataURL()<\/code> <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCanvasElement\">API of canvas<\/a> for converting this canvas to an image. There are multiple methods to export canvas to image as reflected by a handful of <a href=\"https:\/\/stackoverflow.com\/search?tab=relevance&amp;q=save%20canvas%20as%20image\">StackOverflow submissions<\/a>. The method we used here is well described in the article user-friendly image saving to Canvas.<\/li>\r\n<\/ol>\r\n<p><strong>A Caveat for the Geeks!<\/strong><\/p>\r\n<p>Exporting charts using this method works in all major browsers that support the <code lang=\"html\"><\/code> element. Oddly, the exported image file, when saved using the method in this demo, may not have a filename extension such as &#8220;png&#8221; or &#8220;jpg&#8221; (perils of new technology!). However, once the chart is duplicated on the canvas, you could swap this canvas-to-image step with an alternative approach that better suits your implementation.<\/p>\r\n<p>Feel free to play around with the fiddle, and let us know if you have ideas to further improve this.<\/p>","protected":false},"excerpt":{"rendered":"<p>An important feature you\u2019d consider when comparing javascript chart libraries is the ability to export your charts in any given scenario &#8211; server-side, client-side, and every permutation and combination in between. This is one reason why our customers love FusionCharts Suite XT. It allows you to export your charts server-side, client-side, in batch mode, using [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[63,64,75,128,186,190,216,288],"coauthors":[718],"class_list":["post-3541","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-canvas","tag-canvg","tag-client-side","tag-export","tag-html5","tag-image","tag-jpg","tag-png"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Export Chart as Image on Client Side Without Hitting the Server 2026<\/title>\n<meta name=\"description\" content=\"Export charts in any scenario\u2014server-side, client-side, or email. Compare 2026 JavaScript charting libraries for the best export features. Pick the best.\" \/>\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\/export-chart-as-image-on-client-side\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Export Chart as Image on Client Side Without Hitting the Server 2026\" \/>\n<meta property=\"og:description\" content=\"Export charts in any scenario\u2014server-side, client-side, or email. Compare 2026 JavaScript charting libraries for the best export features. Pick the best.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/export-chart-as-image-on-client-side\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2013-06-27T06:07:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:07:34+00:00\" \/>\n<meta name=\"author\" content=\"Shamasis Bhattacharya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shamasis Bhattacharya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 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\/export-chart-as-image-on-client-side\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/export-chart-as-image-on-client-side\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Shamasis Bhattacharya\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/cfce3e3c2ecb07767d8d2b84490460f7\"\n\t            },\n\t            \"headline\": \"Export Chart as Image on Client Side Without Hitting the Server 2026\",\n\t            \"datePublished\": \"2013-06-27T06:07:53+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:07:34+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/export-chart-as-image-on-client-side\/\"\n\t            },\n\t            \"wordCount\": 524,\n\t            \"commentCount\": 2,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"keywords\": [\n\t                \"canvas\",\n\t                \"canvg\",\n\t                \"client-side\",\n\t                \"export\",\n\t                \"html5\",\n\t                \"image\",\n\t                \"jpg\",\n\t                \"png\"\n\t            ],\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\/export-chart-as-image-on-client-side\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/export-chart-as-image-on-client-side\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/export-chart-as-image-on-client-side\/\",\n\t            \"name\": \"Export Chart as Image on Client Side Without Hitting the Server 2026\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t            },\n\t            \"datePublished\": \"2013-06-27T06:07:53+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:07:34+00:00\",\n\t            \"description\": \"Export charts in any scenario\u2014server-side, client-side, or email. Compare 2026 JavaScript charting libraries for the best export features. Pick the best.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/export-chart-as-image-on-client-side\/#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\/export-chart-as-image-on-client-side\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/export-chart-as-image-on-client-side\/#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\": \"Export Chart as Image on Client Side Without Hitting the Server 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\/cfce3e3c2ecb07767d8d2b84490460f7\",\n\t            \"name\": \"Shamasis Bhattacharya\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/ed27a4cd012abbe8b9e545e1815f0781\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/ca8\/ca8f277e2c21f1bcf6b56e4364e15157x96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/ca8\/ca8f277e2c21f1bcf6b56e4364e15157x96.jpg\",\n\t                \"caption\": \"Shamasis Bhattacharya\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/shamasis\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Export Chart as Image on Client Side Without Hitting the Server 2026","description":"Export charts in any scenario\u2014server-side, client-side, or email. Compare 2026 JavaScript charting libraries for the best export features. Pick the best.","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\/export-chart-as-image-on-client-side\/","og_locale":"en_US","og_type":"article","og_title":"Export Chart as Image on Client Side Without Hitting the Server 2026","og_description":"Export charts in any scenario\u2014server-side, client-side, or email. Compare 2026 JavaScript charting libraries for the best export features. Pick the best.","og_url":"https:\/\/www.fusioncharts.com\/blog\/export-chart-as-image-on-client-side\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2013-06-27T06:07:53+00:00","article_modified_time":"2026-01-20T09:07:34+00:00","author":"Shamasis Bhattacharya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Shamasis Bhattacharya","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/export-chart-as-image-on-client-side\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/export-chart-as-image-on-client-side\/"},"author":{"name":"Shamasis Bhattacharya","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/cfce3e3c2ecb07767d8d2b84490460f7"},"headline":"Export Chart as Image on Client Side Without Hitting the Server 2026","datePublished":"2013-06-27T06:07:53+00:00","dateModified":"2026-01-20T09:07:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/export-chart-as-image-on-client-side\/"},"wordCount":524,"commentCount":2,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"keywords":["canvas","canvg","client-side","export","html5","image","jpg","png"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/export-chart-as-image-on-client-side\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/export-chart-as-image-on-client-side\/","url":"https:\/\/www.fusioncharts.com\/blog\/export-chart-as-image-on-client-side\/","name":"Export Chart as Image on Client Side Without Hitting the Server 2026","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"datePublished":"2013-06-27T06:07:53+00:00","dateModified":"2026-01-20T09:07:34+00:00","description":"Export charts in any scenario\u2014server-side, client-side, or email. Compare 2026 JavaScript charting libraries for the best export features. Pick the best.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/export-chart-as-image-on-client-side\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/export-chart-as-image-on-client-side\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/export-chart-as-image-on-client-side\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Export Chart as Image on Client Side Without Hitting the Server 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\/cfce3e3c2ecb07767d8d2b84490460f7","name":"Shamasis Bhattacharya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/ed27a4cd012abbe8b9e545e1815f0781","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/ca8\/ca8f277e2c21f1bcf6b56e4364e15157x96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/ca8\/ca8f277e2c21f1bcf6b56e4364e15157x96.jpg","caption":"Shamasis Bhattacharya"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/shamasis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/3541","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=3541"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/3541\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=3541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=3541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=3541"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=3541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}