{"id":21704,"date":"2023-01-13T18:00:16","date_gmt":"2023-01-13T12:30:16","guid":{"rendered":"https:\/\/www.fusioncharts.com\/blog\/?p=21704"},"modified":"2026-01-20T14:40:50","modified_gmt":"2026-01-20T09:10:50","slug":"how-to-create-bar-chart-in-javascript","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/","title":{"rendered":"How to Create Bar Charts in JavaScript: 2026 Tutorial"},"content":{"rendered":"<p>Are you finding it hard to display your numerical data? Bar charts are always useful to help us represent numerical data visualization. The <a href=\"https:\/\/www.fusioncharts.com\/fusioncharts\" target=\"_blank\" rel=\"noopener noreferrer\">JS charts<\/a> are highly useful, from infographics to PowerPoint presentations to financial reports. Moreover, they make the data more understandable. This article will tell you how to create bar chart in javascript.<\/p>\n<p>Bar JS charts display the numerical data in the form of bars or columns. The best part to know is that there are different types of bar charts available these days. We can choose any of those types depending on our needs and requirements. Let&#8217;s explore how to create JS charts in this guide. Continue reading!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/images.surferseo.art\/0ece13fb-284c-4c28-86f3-a5becfe69d27.webp\" alt=\"how to create bar chart in javascript &amp; bar chart component grid lines on y axis\" \/><\/p>\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\/how-to-create-bar-chart-in-javascript\/#What_Are_The_Components_Of_A_Bar_Chart\" title=\"What Are The Components Of A Bar Chart?\">What Are The Components Of A Bar Chart?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/#Data_Series_Name\" title=\"Data Series Name\">Data Series Name<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/#The_Chart_Grid\" title=\"The Chart Grid\">The Chart Grid<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/#The_Bars\" title=\"The Bars\">The Bars<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/#Chart_Legend\" title=\"Chart Legend\">Chart Legend<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/#How_to_Create_Bar_Chart_in_JavaScript_Code_Through_Simple_Steps\" title=\"How to Create Bar Chart in JavaScript Code Through Simple Steps?\">How to Create Bar Chart in JavaScript Code Through Simple Steps?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/#Creation_Of_An_HTML_Page\" title=\"Creation Of An HTML Page\">Creation Of An HTML Page<\/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\/how-to-create-bar-chart-in-javascript\/#Reference_All_The_Necessary_Files\" title=\"Reference All The Necessary Files\">Reference All The Necessary Files<\/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\/how-to-create-bar-chart-in-javascript\/#How_to_Create_Bar_Chart_in_JavaScript_Putting_Together_The_Data\" title=\"How to Create Bar Chart in JavaScript: Putting Together The Data\">How to Create Bar Chart in JavaScript: Putting Together The Data<\/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\/how-to-create-bar-chart-in-javascript\/#Writing_Chart_Code\" title=\"Writing Chart Code\">Writing Chart Code<\/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\/how-to-create-bar-chart-in-javascript\/#Chart_Type_Modification\" title=\"Chart Type Modification\">Chart Type Modification<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/#Tune_Bar_Chart\" title=\"Tune Bar Chart\">Tune Bar Chart<\/a><\/li><\/ul><\/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\/how-to-create-bar-chart-in-javascript\/#Does_FusionCharts_Help_To_Create_Bar_Charts_In_JavaScript\" title=\"Does FusionCharts Help To Create Bar Charts In JavaScript?\">Does FusionCharts Help To Create Bar Charts In JavaScript?<\/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\/how-to-create-bar-chart-in-javascript\/#How_to_Create_Bar_Chart_in_Javascript_Conclusion\" title=\"How to Create Bar Chart in Javascript: Conclusion\">How to Create Bar Chart in Javascript: Conclusion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/#How_to_Create_Bar_Chart_in_JavaScript_FAQs\" title=\"How to Create Bar Chart in JavaScript: FAQs\">How to Create Bar Chart in JavaScript: FAQs<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_Are_The_Components_Of_A_Bar_Chart\"><\/span>What Are The Components Of A Bar Chart?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We must know that bar charts are made of important components no matter the type. Those components are explained as under:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Data_Series_Name\"><\/span><strong>Data Series Name<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The data series works as an essential component of the chart. The whole chart responds according to the data in the data series. Whatever changes you make to the data series will automatically show up in the chart.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"The_Chart_Grid\"><\/span><strong>The Chart Grid<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A chart grid gives us a frame of reference for our data. As a result, the data visualization becomes more simple and more understandable.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"The_Bars\"><\/span><strong>The Bars<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The bars are what made them named bar charts. The bars help to visualize the data in the form of long or short rectangles depending on the data. Note that the bars are color-filled rectangles that have dimensions proportional to the data representation.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Chart_Legend\"><\/span><strong>Chart Legend<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Chart legend helps us to understand the relationship between the chosen colors and the represented data.<\/p>\n<p>Now that we have learned about the important chart components, let&#8217;s learn how to create bar chart in JavaScript library.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/images.surferseo.art\/adb3bbf9-3a63-4a1c-b47c-84e3dd023dc6.jpeg\" alt=\"js library line charts with width and height parameters, x and y axes\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_Create_Bar_Chart_in_JavaScript_Code_Through_Simple_Steps\"><\/span>How to Create Bar Chart in JavaScript Code Through Simple Steps?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Here are some simple steps that we must follow to create an amazing bar chart.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Creation_Of_An_HTML_Page\"><\/span>Creation Of An HTML Page<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>First of all, we have to create an HTML page. The HTML code will look like the one given below:<\/p>\n<pre class=\"lang:json\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;title&gt;JavaScript Bar Chart&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div id=\"container\" style=\"width: 100%; height: 100%\"&gt;&lt;\/div&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>We will create a container that will act like a container for the chart. Moreover, we can set our own values for height and width in the above code. Let&#8217;s move to the next phase.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Reference_All_The_Necessary_Files\"><\/span>Reference All The Necessary Files<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The next step is to reference the AnyChart JavaScript charting library. We will do it in the &lt;script&gt; tag in the &lt;head&gt; section. The example code is given below:<\/p>\n<pre class=\"lang:json\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n      &lt;title&gt;JavaScript Bar Chart&lt;\/title&gt;\r\n      <a href=\"https:\/\/cdn.anychart.com\/releases\/8.0.0\/js\/anychart-base.min.js\">https:\/\/cdn.anychart.com\/releases\/8.0.0\/js\/anychart-base.min.js<\/a>\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div id=\"container\" style=\"width: 100%; height: 100%\"&gt;&lt;\/div&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>We will also write the JS chart sample&#8217;s whole code in the script tag. We have to add two more lines as under:<\/p>\n<pre class=\"lang:json\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n      &lt;title&gt;JavaScript Bar Chart&lt;\/title&gt;\r\n      <a href=\"https:\/\/cdn.anychart.com\/releases\/8.0.0\/js\/anychart-base.min.js\">https:\/\/cdn.anychart.com\/releases\/8.0.0\/js\/anychart-base.min.js<\/a>\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div id=\"container\" style=\"width: 100%; height: 100%\"&gt;&lt;\/div&gt;\r\n    &lt;script&gt;\r\n        &lt;!-- chart code will be here --&gt;\r\n    &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>The JavaScript charting example&#8217;s whole code will be put into those two lines. Now, we have to move to the next section.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/images.surferseo.art\/8d8530c9-a903-4533-9dc6-87417c083637.webp\" alt=\"grid line x axis html file with bar chart's legend axis labels in entire code\" width=\"1124\" height=\"750\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"How_to_Create_Bar_Chart_in_JavaScript_Putting_Together_The_Data\"><\/span>How to Create Bar Chart in JavaScript: Putting Together The Data<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>When we plan for data visualization, the first thing that comes to mind is the data itself. Let&#8217;s suppose we have a simple dataset. We will display simple two-dimensional chart data in columns X and Y. X tables to help us display categories or timestamps. On the other hand, Y contains values according to X.<\/p>\n<p>We will show the 10 deadliest earthquakes in a certain century. The image given below contains the data:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/images.surferseo.art\/bca3c75b-c1bb-4921-92d0-357ccb27aac7.png\" alt=\"var i data for major browsers following code on top left corner in bar charts\" width=\"263\" height=\"310\" \/><\/p>\n<p>We will convert this data into a JavaScript object.<\/p>\n<pre class=\"lang:json\">var data = {\r\n  header: [\"Name\", \"Death toll\"],\r\n  rows: [\r\n    [\"San-Francisco (1906)\", 1500],\r\n    [\"Messina (1908)\", 87000],\r\n    [\"Ashgabat (1948)\", 175000],\r\n    [\"Chile (1960)\", 10000],\r\n    [\"Tian Shan (1976)\", 242000],\r\n    [\"Armenia (1988)\", 25000],\r\n    [\"Iran (1990)\", 50000]\r\n]}<\/pre>\n<p>Now, we have to move to the next stages.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Writing_Chart_Code\"><\/span>Writing Chart Code<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>We will use &lt;script&gt; and &lt;\/script&gt; tags to enclose the JavaScript charting sample code. We have to put the function that will await the completion of the first page.<\/p>\n<pre class=\"lang:json\">&lt;script&gt;\r\nanychart.onDocumentReady(function() {\r\n    \/\/ the code to create a chart will be here\r\n});\r\n&lt;\/script&gt;<\/pre>\n<p>Then, we have to add the data:<\/p>\n<pre class=\"lang:json\">anychart.onDocumentReady(function() {\r\n    \/\/ the data \r\n    var data = {\r\n      header: [\"Name\", \"Death toll\"],\r\n      rows: [\r\n        [\"San-Francisco (1906)\", 1500],\r\n        [\"Messina (1908)\", 87000],\r\n        [\"Ashgabat (1948)\", 175000],\r\n        [\"Chile (1960)\", 10000],\r\n        [\"Tian Shan (1976)\", 242000],\r\n        [\"Armenia (1988)\", 25000],\r\n        [\"Iran (1990)\", 50000]\r\n    ]};\r\n});<\/pre>\n<p>Now, we must specify the type of JavaScript chart. In this case, we will select the bar chart type.<\/p>\n<pre class=\"lang:json\">\/\/ create the chart\r\nvar chart = anychart.bar();\r\n \r\n\/\/ add the data\r\nchart.data(data);<\/pre>\n<p>Then, we will set the title of the chart.<\/p>\n<pre class=\"lang:json\">\/\/ set the chart title\r\nchart.title(\"The deadliest earthq<\/pre>\n<p>Then, we have to finish the chart and run it.<\/p>\n<pre class=\"lang:json\">chart.container('container');\r\nchart.draw();<\/pre>\n<p>We will get the results as under:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/images.surferseo.art\/34b68312-8ab2-43d9-977c-d498713e976e.png\" alt=\"bar chart canvas element\" width=\"847\" height=\"476\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Chart_Type_Modification\"><\/span>Chart Type Modification<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If we want to arrange the data properly in the form of a vertical bar chart, then we will have to modify it. The code to modify the chart types is given below:<\/p>\n<pre class=\"lang:json\">\t\/\/ create the chart\r\nchart = anychart.column();<\/pre>\n<p>Now, it will look like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/images.surferseo.art\/1d62c800-6907-4eb4-9c0a-2cce45f21dcd.png\" alt=\"vertical bar chart\" width=\"850\" height=\"478\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Tune_Bar_Chart\"><\/span>Tune Bar Chart<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>We can tune the charts in multiple ways. It alters the general appearance and feel of the chart. The simplest way to do this is to change the theme of the chart. First, we need to link to the predefined themes as under:<\/p>\n<pre class=\"codeblock\"><code><a href=\"https:\/\/cdn.anychart.com\/releases\/8.0.0\/themes\/dark_earth.min.js\">https:\/\/cdn.anychart.com\/releases\/8.0.0\/themes\/dark_earth.min.js<\/a><\/code><\/pre>\n<p>Then, we will tell our chart to use it.<\/p>\n<pre class=\"lang:json\">anychart.theme(anychart.themes.darkEarth);<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/images.surferseo.art\/11e18fb8-7e0c-44aa-b09d-cd73ace416ec.png\" alt=\"bar chart \" width=\"850\" height=\"479\" \/><\/p>\n<p>You can also <a href=\"https:\/\/www.fusioncharts.com\/blog\/visualize-your-data-with-this-bar-graph-example-fusioncharts\/\" target=\"_blank\" rel=\"noopener\">visualize your data with this bar graph example<\/a> given above.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Does_FusionCharts_Help_To_Create_Bar_Charts_In_JavaScript\"><\/span>Does FusionCharts Help To Create Bar Charts In JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/www.fusioncharts.com\/fusioncharts\" target=\"_blank\" rel=\"noopener\">FusionCharts Suite XT<\/a> gives us 100+ interactive charts and more than 2000 maps. It is simple to create a bar chart using the simplest JavaScript library of FusionCharts.It is the greatest tool available that helps us in creating effective charts. FusionCharts uses JS framework and server-side programming languages. It becomes easy to create JS charts for our enterprise and web apps.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_Create_Bar_Chart_in_Javascript_Conclusion\"><\/span>How to Create Bar Chart in Javascript: Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We have learned that there is no difficulty in creating charts using JavaScript. It needs only a few simple steps to create amazing bar charts. The best part is that FusionChats is a great tool to use for building an interactive bar chart with amazing <a href=\"https:\/\/www.fusioncharts.com\/blog\/colors-for-charts-how-to-use-them-effectively\/\" target=\"_blank\" rel=\"noopener\">colors for charts<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_Create_Bar_Chart_in_JavaScript_FAQs\"><\/span>How to Create Bar Chart in JavaScript: FAQs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>Can You Create a Graph in Javascript?<\/strong><\/p>\n<p>Yes. We can use the chart.js library to create amazing charts using JavaScript.<\/p>\n<p><strong>What Is a Bar Chart With Examples?<\/strong><\/p>\n<p>It is a graph with rectangular bars. The most common example is the vertical bar graph. Some most common types are grouped, stacked, and segmented bar graphs.<\/p>\n<p><strong>Is Javascript Good for Data Visualization?<\/strong><\/p>\n<p>Yes. It is great for creating visual experiences.<\/p>\n<p><strong>Is Javascript Good for Graphics?<\/strong><\/p>\n<p>Yes. It can be used to enhance graphics.<\/p>\n<p><a href=\"https:\/\/www.fusioncharts.com\/download\/fusioncharts-suite-xt?framework=react\" target=\"_blank\" rel=\"noopener noreferrer\">Sign up for free now to create effective JS charts using FusionCharts.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you finding it hard to display your numerical data? Bar charts are always useful to help us represent numerical data visualization. The JS charts are highly useful, from infographics to PowerPoint presentations to financial reports. Moreover, they make the data more understandable. This article will tell you how to create bar chart in javascript. [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":21719,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[722],"tags":[41,1206,1108,1159,1207],"coauthors":[1157],"class_list":["post-21704","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fusioncharts","tag-bar-chart","tag-bar-chart-example","tag-bar-graph","tag-bar-graph-example","tag-best-charting-library"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create Bar Chart in JavaScript<\/title>\n<meta name=\"description\" content=\"Learn how to create a bar chart in JavaScript with this 2026 tutorial. Use FusionCharts Suite XT to build the most accessible interactive charts 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\/how-to-create-bar-chart-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Bar Chart in JavaScript\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a bar chart in JavaScript with this 2026 tutorial. Use FusionCharts Suite XT to build the most accessible interactive charts today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-13T12:30:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:10:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2023\/01\/smartmockups_lcui5wgz.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"853\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ayesha Zahra\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ayesha Zahra\" \/>\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\/how-to-create-bar-chart-in-javascript\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Ayesha Zahra\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/77aa4f7d2a8235db67db82ee04c1fcf6\"\n\t            },\n\t            \"headline\": \"How to Create Bar Charts in JavaScript: 2026 Tutorial\",\n\t            \"datePublished\": \"2023-01-13T12:30:16+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:10:50+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/\"\n\t            },\n\t            \"wordCount\": 1000,\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\/how-to-create-bar-chart-in-javascript\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2023\/01\/smartmockups_lcui5wgz.jpg\",\n\t            \"keywords\": [\n\t                \"Bar chart\",\n\t                \"bar chart example\",\n\t                \"bar graph\",\n\t                \"bar graph example\",\n\t                \"best charting library\"\n\t            ],\n\t            \"articleSection\": [\n\t                \"FusionCharts\"\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\/how-to-create-bar-chart-in-javascript\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/\",\n\t            \"name\": \"How to Create Bar Chart in JavaScript\",\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\/how-to-create-bar-chart-in-javascript\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2023\/01\/smartmockups_lcui5wgz.jpg\",\n\t            \"datePublished\": \"2023-01-13T12:30:16+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:10:50+00:00\",\n\t            \"description\": \"Learn how to create a bar chart in JavaScript with this 2026 tutorial. Use FusionCharts Suite XT to build the most accessible interactive charts today.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/#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\/how-to-create-bar-chart-in-javascript\/\"\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\/how-to-create-bar-chart-in-javascript\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2023\/01\/smartmockups_lcui5wgz.jpg\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2023\/01\/smartmockups_lcui5wgz.jpg\",\n\t            \"width\": 1280,\n\t            \"height\": 853\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/#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\": \"How to Create Bar Charts in JavaScript: 2026 Tutorial\"\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\/77aa4f7d2a8235db67db82ee04c1fcf6\",\n\t            \"name\": \"Ayesha Zahra\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/b2dd54c88c1e9273d9a0aefebb7e0299\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/16e\/16efc356a8921ab52c4cf08fc9fe018ex96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/16e\/16efc356a8921ab52c4cf08fc9fe018ex96.jpg\",\n\t                \"caption\": \"Ayesha Zahra\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/ayeshaz\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Bar Chart in JavaScript","description":"Learn how to create a bar chart in JavaScript with this 2026 tutorial. Use FusionCharts Suite XT to build the most accessible interactive charts 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\/how-to-create-bar-chart-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Bar Chart in JavaScript","og_description":"Learn how to create a bar chart in JavaScript with this 2026 tutorial. Use FusionCharts Suite XT to build the most accessible interactive charts today.","og_url":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2023-01-13T12:30:16+00:00","article_modified_time":"2026-01-20T09:10:50+00:00","og_image":[{"width":1280,"height":853,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2023\/01\/smartmockups_lcui5wgz.jpg","type":"image\/jpeg"}],"author":"Ayesha Zahra","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Ayesha Zahra","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/"},"author":{"name":"Ayesha Zahra","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/77aa4f7d2a8235db67db82ee04c1fcf6"},"headline":"How to Create Bar Charts in JavaScript: 2026 Tutorial","datePublished":"2023-01-13T12:30:16+00:00","dateModified":"2026-01-20T09:10:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/"},"wordCount":1000,"commentCount":0,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2023\/01\/smartmockups_lcui5wgz.jpg","keywords":["Bar chart","bar chart example","bar graph","bar graph example","best charting library"],"articleSection":["FusionCharts"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/","url":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/","name":"How to Create Bar Chart in JavaScript","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2023\/01\/smartmockups_lcui5wgz.jpg","datePublished":"2023-01-13T12:30:16+00:00","dateModified":"2026-01-20T09:10:50+00:00","description":"Learn how to create a bar chart in JavaScript with this 2026 tutorial. Use FusionCharts Suite XT to build the most accessible interactive charts today.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2023\/01\/smartmockups_lcui5wgz.jpg","contentUrl":"\/blog\/wp-content\/uploads\/2023\/01\/smartmockups_lcui5wgz.jpg","width":1280,"height":853},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-bar-chart-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create Bar Charts in JavaScript: 2026 Tutorial"}]},{"@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\/77aa4f7d2a8235db67db82ee04c1fcf6","name":"Ayesha Zahra","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/b2dd54c88c1e9273d9a0aefebb7e0299","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/16e\/16efc356a8921ab52c4cf08fc9fe018ex96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/16e\/16efc356a8921ab52c4cf08fc9fe018ex96.jpg","caption":"Ayesha Zahra"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/ayeshaz\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/21704","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\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=21704"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/21704\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/21719"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=21704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=21704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=21704"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=21704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}