{"id":4866,"date":"2017-10-25T08:26:31","date_gmt":"2017-10-25T08:26:31","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=4866"},"modified":"2022-08-13T10:24:20","modified_gmt":"2022-08-13T10:24:20","slug":"javascript-bar-chart-tutorial","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/","title":{"rendered":"Creating JavaScript Bar Chart"},"content":{"rendered":"<p><img decoding=\"async\" class=\"alignnone size-full wp-image-4921\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title.png\" alt=\"How to create a JavaScript bar chart: Tutorial\" width=\"100%\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title.png 1366w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title-300x169.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title-768x432.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title-1024x576.png 1024w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" \/>How to create a JavaScript\u00a0<a href=\"https:\/\/www.anychart.com\/chartopedia\/chart-types\/bar-chart\/\">bar chart<\/a>\u00a0and why is this important? Every day, data visualization becomes all the more powerful and important area of the Web. The volume of information grows, and it must be made understandable as fast as possible. That&#8217;s when data visualization instruments like charts and dashboards become a great help.<\/p>\n<p>Creating HTML5 charts might seem a complicated task, but this assumption is wrong. This article blows this prejudice to pieces and shows <strong>how to build an interactive bar chart using JavaScript<\/strong>.<\/p>\n<p>The result will look like on the picture above. Then you&#8217;ll also learn how to quickly modify and customize such a JavaScript (HTML5) bar chart. All the JS chart examples used along the tutorial can be found <a href=\"https:\/\/codepen.io\/collection\/Djywgm\/\" target=\"_blank\" rel=\"nofollow\">on CodePen<\/a>.<\/p>\n<p><!--more Read the JS charting tutorial \u00bb--><\/p>\n<h2>How to Build JavaScript Bar Chart<\/h2>\n<p>There are 4 basic steps you should take to create a simple bar chart for your application or website:<\/p>\n<ul>\n<li>Create an HTML page.<\/li>\n<li>Reference all necessary files.<\/li>\n<li>Put together the data.<\/li>\n<li>Write the code for a chart.<\/li>\n<\/ul>\n<h3>1. Create an HTML page<\/h3>\n<p>The very first thing you should do is to create\u00a0an HTML page. It should look like the following:<\/p>\n<pre class=\"brush: xml\">&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;\r\n<\/pre>\n<p>The container we have created will be a container for a chart. You can set other values for the <code>width<\/code> and <code>height<\/code> parameters if you don&#8217;t want your chart to fill the whole page.<\/p>\n<p>Let&#8217;s move to the next step.<\/p>\n<h3>2. Reference all necessary files<\/h3>\n<p>Reference the <a href=\"https:\/\/www.anychart.com\/products\/anychart\/overview\/\">AnyChart JavaScript charting library<\/a>\u00a0in the <code>&lt;script&gt;<\/code> tag in the <code>&lt;head&gt;<\/code> section:<\/p>\n<pre class=\"brush: xml; highlight: 5\">&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;script src=\"https:\/\/cdn.anychart.com\/releases\/8.0.0\/js\/anychart-base.min.js\"&gt;&lt;\/script&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;\r\n<\/pre>\n<p>The whole code of the JS chart sample is written in the <code>&lt;script&gt;<\/code> tag too. Add two more lines:<\/p>\n<pre class=\"brush: xml; highlight: [9,10,11]\">&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;script src=\"https:\/\/cdn.anychart.com\/releases\/8.0.0\/js\/anychart-base.min.js\"&gt;&lt;\/script&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;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;\r\n<\/pre>\n<p>The\u00a0entire code of the JavaScript charting example will be put between those lines.<\/p>\n<p>Now the preparations are over. It&#8217;s time to move to the next step.<\/p>\n<h3>3. Put together the data<\/h3>\n<p>The first thing you need when it comes to data visualization is the data itself. As we&#8217;re making a simple chart sample now, let&#8217;s arrange some simple data.<\/p>\n<p>A simple data of a simple two-dimension chart can be presented as a table with two columns: X and Y. X is usually for timestamps or categories and Y holds the values according to the categories.<\/p>\n<p>Our chart will show the 10 deadliest recorded earthquakes in the XXth century, data is obtained from <a href=\"https:\/\/en.wikipedia.org\/wiki\/Lists_of_earthquakes\" target=\"_blank\" rel=\"nofollow\">Wikipedia: List of earthquakes<\/a>.<\/p>\n<table border=\"1\">\n<tbody>\n<tr>\n<th style=\"padding: 15px; text-align: center;\">Place (Year)<\/th>\n<th style=\"padding: 15px; text-align: center;\">Death toll<\/th>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">San-Francisco (1906)<\/td>\n<td style=\"padding: 6px 15px;\">1500<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Messina (1908)<\/td>\n<td style=\"padding: 6px 15px;\">87000<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Ashgabat (1948)<\/td>\n<td style=\"padding: 6px 15px;\">175000<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Chile (1960)<\/td>\n<td style=\"padding: 6px 15px;\">10000<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Tian Shan (1976)<\/td>\n<td style=\"padding: 6px 15px;\">242000<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Armenia (1988)<\/td>\n<td style=\"padding: 6px 15px;\">25000<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Iran (1990)<\/td>\n<td style=\"padding: 6px 15px;\">50000<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<br \/>\nThe categories, which are spread among the X-axis, can be of one type or another, and it is not necessary for them to be numeric. Let\u2019s set the values of the first column as categories of the X-axis. The number of victims will become the Y-axis values.<\/p>\n<p>Convert this data into a special JavaScript object that contains data array and data header settings:<\/p>\n<pre class=\"brush: js\">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>All goes well. Now let&#8217;s move to the next step.<\/p>\n<h3>4. Write the code for the chart<\/h3>\n<p>Finally, all preparations are made, it&#8217;s time to start coding!<\/p>\n<p>As you should remember, we&#8217;ve specified above that all of the JavaScript charting sample code\u00a0must be written inside of the <code>&lt;script&gt;&lt;\/script&gt;<\/code> tags.<\/p>\n<p>First, put the function that waits until the page is ready:<\/p>\n<pre class=\"brush: js; first-line: 1; html-script: true\">&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>Second, add the data into the sample:<\/p>\n<pre class=\"brush: js; first-line: 1\">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});\r\n<\/pre>\n<p>Now, specify the JavaScript chart type. You can find the whole list of the chart types AnyChart provides in the <a href=\"https:\/\/docs.anychart.com\/Quick_Start\/Supported_Charts_Types\" target=\"_blank\" rel=\"nofollow\">Supported Charts Types list<\/a>. In our sample, we&#8217;ll choose the Bar Chart type with the data specified in the <code>data<\/code> variable.<\/p>\n<pre class=\"brush: js; first-line: 1\">\/\/ create the chart\r\nvar chart = anychart.bar();\r\n\r\n\/\/ add the data\r\nchart.data(data);\r\n<\/pre>\n<p>It&#8217;s better for a chart to have a title, to make it clear what it demonstrates from the very first look at it:<\/p>\n<pre class=\"brush: js; first-line: 1\">\/\/ set the chart title\r\nchart.title(\"The deadliest earthquakes in the XXth century\");\r\n<\/pre>\n<p>Now, the last thing we should do to finish our chart and run it, is to set the container for the chart and draw it:<\/p>\n<pre class=\"brush: js; first-line: 1\">chart.container('container');\r\nchart.draw();\r\n<\/pre>\n<p>Bingo! Look at the result of our JavaScript charting below:<\/p>\n<p class=\"codepen\" data-height=\"476\" data-theme-id=\"dark\" data-slug-hash=\"rGgVZJ\" data-default-tab=\"result\" data-user=\"AnyChart\" data-embed-version=\"2\" data-pen-title=\"Creating a JavaScript Bar Chart\">See the Pen <a href=\"https:\/\/codepen.io\/AnyChart\/pen\/rGgVZJ\/\" target=\"_blank\" rel=\"nofollow\">Creating a JavaScript Bar Chart<\/a> by AnyChart JavaScript Charts (<a href=\"https:\/\/codepen.io\/AnyChart\" target=\"_blank\" rel=\"nofollow\">@AnyChart<\/a>) on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"nofollow\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>The whole code of this interactive HTML5 bar chart example should look like this:<\/p>\n<pre class=\"brush: js; first-line: 1; html-script: true\">&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;script src=\"https:\/\/cdn.anychart.com\/releases\/8.0.0\/js\/anychart-base.min.js\"&gt;&gt;\/script&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;script&gt;\r\n      anychart.onDocumentReady(function() {\r\n\r\n        \/\/ set 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\r\n        \/\/ create the chart\r\n        var chart = anychart.bar();\r\n\r\n        \/\/ add the data\r\n        chart.data(data);\r\n\r\n        \/\/ set the chart title\r\n        chart.title(\"The deadliest earthquakes in the XXth century\");\r\n\r\n        \/\/ draw\r\n        chart.container(\"container\");\r\n        chart.draw();\r\n      });\r\n    &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<h2>Modify Chart Type<\/h2>\n<p>There are situations when you might doubt how to arrange it in\u00a0the right way and which chart type would visualize this data best, you can get an idea what chart type you need from tools like <a href=\"https:\/\/www.anychart.com\/chartopedia\/\">Chartopedia<\/a>.<\/p>\n<p>To change the chart type, simply change the <code>bar()<\/code> method of the chart to the <code>column()<\/code>\u00a0one:<\/p>\n<pre class=\"brush: js; first-line: 1\">\/\/ create the chart\r\nchart = anychart.column();\r\n<\/pre>\n<p>That\u2019s it,\u00a0our JS bar chart is now a JS\u00a0column chart:<\/p>\n<p class=\"codepen\" data-height=\"476\" data-theme-id=\"dark\" data-slug-hash=\"RLmPdw\" data-default-tab=\"result\" data-user=\"AnyChart\" data-embed-version=\"2\" data-pen-title=\"Creating a JavaScript Bar Chart: Modify to a JavaScript Column Chart\">See the Pen <a href=\"https:\/\/codepen.io\/AnyChart\/pen\/RLmPdw\/\" target=\"_blank\" rel=\"nofollow\">Creating a JavaScript Bar Chart: Modify to a JavaScript Column Chart<\/a> by AnyChart JavaScript Charts (<a href=\"https:\/\/codepen.io\/AnyChart\" target=\"_blank\" rel=\"nofollow\">@AnyChart<\/a>) on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"nofollow\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2>Tune Bar Chart<\/h2>\n<p>Charts can be tuned in many ways. One of the things that may be of interest is the ability to change general look and feel.<\/p>\n<p>One of the easiest ways to do that is to change the chart theme. That can be done in the following two steps.<\/p>\n<p>First, we need to link one of the <a href=\"https:\/\/docs.anychart.com\/Appearance_Settings\/Themes\" target=\"_blank\" rel=\"nofollow\">predefined themes<\/a>:<\/p>\n<pre class=\"brush: xml; first-line: 1\">&lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.0.0\/themes\/dark_earth.min.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;<\/pre>\n<p>And then tell the chart to use it:<\/p>\n<pre class=\"brush: js; first-line: 1\">anychart.theme(anychart.themes.darkEarth);\r\n<\/pre>\n<p>That\u2019s it, take a look at our JavaScript bar chart which looks completely different now:<\/p>\n<p class=\"codepen\" data-height=\"476\" data-theme-id=\"dark\" data-slug-hash=\"mBYJYy\" data-default-tab=\"result\" data-user=\"AnyChart\" data-embed-version=\"2\" data-pen-title=\"Creating a JavaScript Bar Chart: Tuning\">See the Pen <a href=\"https:\/\/codepen.io\/AnyChart\/pen\/mBYJYy\/\" target=\"_blank\" rel=\"nofollow\">Creating a JavaScript Bar Chart: Tuning<\/a> by AnyChart JavaScript Charts (<a href=\"https:\/\/codepen.io\/AnyChart\" target=\"_blank\" rel=\"nofollow\">@AnyChart<\/a>) on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"nofollow\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2>Conclusion<\/h2>\n<p>As you can see, there is nothing difficult in creating JavaScript charts with the AnyChart JS library. Visit the <a href=\"https:\/\/docs.anychart.com\" target=\"_blank\" rel=\"nofollow\">AnyChart Docs<\/a> and <a href=\"https:\/\/api.anychart.com\" target=\"_blank\" rel=\"nofollow\">API<\/a> to know everything about building and adjusting the interactive HTML5 charts for your projects and websites. Feel free to take the sample created above as\u00a0the basis for your experiments and explore charting with AnyChart.<br \/>\n<!-- SyntaxHighlighter --><script type=\"text\/javascript\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/plugins\/syntaxhighlighter\/syntaxhighlighter3\/scripts\/shCore.js?ver=3.0.9b\"><\/script><script type=\"text\/javascript\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/plugins\/syntaxhighlighter\/syntaxhighlighter3\/scripts\/shBrushJScript.js?ver=3.0.9b\"><\/script><script type=\"text\/javascript\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/plugins\/syntaxhighlighter\/syntaxhighlighter3\/scripts\/shBrushXml.js?ver=3.0.9b\"><\/script><script type=\"text\/javascript\">\n\t(function(){\n\t\tvar corecss = document.createElement('link');\n\t\tvar themecss = document.createElement('link');\n\t\tvar corecssurl = \"https:\/\/www.anychart.com\/blog\/wp-content\/plugins\/syntaxhighlighter\/syntaxhighlighter3\/styles\/shCore.css?ver=3.0.9b\";\n\t\tif ( corecss.setAttribute ) {\n\t\t\t\tcorecss.setAttribute( \"rel\", \"stylesheet\" );\n\t\t\t\tcorecss.setAttribute( \"type\", \"text\/css\" );\n\t\t\t\tcorecss.setAttribute( \"href\", corecssurl );\n\t\t} else {\n\t\t\t\tcorecss.rel = \"stylesheet\";\n\t\t\t\tcorecss.href = corecssurl;\n\t\t}\n\t\tdocument.getElementsByTagName(\"head\")[0].insertBefore( corecss, document.getElementById(\"syntaxhighlighteranchor\") );\n\t\tvar themecssurl = \"https:\/\/www.anychart.com\/blog\/wp-content\/plugins\/syntaxhighlighter\/syntaxhighlighter3\/styles\/shThemeDefault.css?ver=3.0.9b\";\n\t\tif ( themecss.setAttribute ) {\n\t\t\t\tthemecss.setAttribute( \"rel\", \"stylesheet\" );\n\t\t\t\tthemecss.setAttribute( \"type\", \"text\/css\" );\n\t\t\t\tthemecss.setAttribute( \"href\", themecssurl );\n\t\t} else {\n\t\t\t\tthemecss.rel = \"stylesheet\";\n\t\t\t\tthemecss.href = themecssurl;\n\t\t}\n\t\t\/\/document.getElementById(\"syntaxhighlighteranchor\").appendChild(themecss);\n\t\tdocument.getElementsByTagName(\"head\")[0].insertBefore( themecss, document.getElementById(\"syntaxhighlighteranchor\") );\n\t})();\n\tSyntaxHighlighter.config.strings.expandSource = '+ expand source';\n\tSyntaxHighlighter.defaults['auto-links'] = true;\n\tSyntaxHighlighter.defaults['toolbar'] = false;\n\tSyntaxHighlighter.all();\n<\/script><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>How to create a JavaScript\u00a0bar chart\u00a0and why is this important? Every day, data visualization becomes all the more powerful and important area of the Web. The volume of information grows, and it must be made understandable as fast as possible. That&#8217;s when data visualization instruments like charts and dashboards become a great help. Creating HTML5 [&hellip;]<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,23,13,279,4],"tags":[53,70,71,127,85,54,32,55,36,141,81,57,58,65,56,30,172],"class_list":["post-4866","post","type-post","status-publish","format-standard","hentry","category-anychart-charting-component","category-html5","category-javascript","category-javascript-chart-tutorials","category-tips-and-tricks","tag-anychart","tag-bar-chart","tag-bar-charts","tag-chart-types","tag-column-charts","tag-data-visualization","tag-html5","tag-html5-charts","tag-javascript","tag-javascript-charting","tag-javascript-charting-library","tag-javascript-charts","tag-js-chart","tag-js-charting","tag-js-charts","tag-tips-and-tricks","tag-tutorial","wpautop"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript Bar Chart: How to Create and Customize One<\/title>\n<meta name=\"description\" content=\"How to create a JavaScript bar chart? This tutorial will explain that and also tell you how to quickly modify and customize such a chart.\" \/>\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.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating JavaScript Bar Chart\" \/>\n<meta property=\"og:description\" content=\"How to create a JavaScript bar chart? This tutorial explains that and also shows how to quickly customize such a chart.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"AnyChart News\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/AnyCharts\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-25T08:26:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-13T10:24:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title.png\" \/>\n<meta name=\"author\" content=\"Timothy Loginov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Creating JavaScript Bar Chart\" \/>\n<meta name=\"twitter:description\" content=\"How to create a JavaScript bar chart? This tutorial explains that and also shows how to quickly customize such a chart.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title.png\" \/>\n<meta name=\"twitter:creator\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:site\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Timothy Loginov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/\"},\"author\":{\"name\":\"Timothy Loginov\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/a944a69f34509440ab4a9b5ead73caa6\"},\"headline\":\"Creating JavaScript Bar Chart\",\"datePublished\":\"2017-10-25T08:26:31+00:00\",\"dateModified\":\"2022-08-13T10:24:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/\"},\"wordCount\":913,\"commentCount\":15,\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title.png\",\"keywords\":[\"AnyChart\",\"bar chart\",\"bar charts\",\"chart types\",\"column charts\",\"Data Visualization\",\"HTML5\",\"html5 charts\",\"JavaScript\",\"javascript charting\",\"JavaScript charting library\",\"javascript charts\",\"js chart\",\"js charting\",\"js charts\",\"Tips and tricks\",\"tutorial\"],\"articleSection\":[\"AnyChart Charting Component\",\"HTML5\",\"JavaScript\",\"JavaScript Chart Tutorials\",\"Tips and Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/\",\"url\":\"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/\",\"name\":\"JavaScript Bar Chart: How to Create and Customize One\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title.png\",\"datePublished\":\"2017-10-25T08:26:31+00:00\",\"dateModified\":\"2022-08-13T10:24:20+00:00\",\"author\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/a944a69f34509440ab4a9b5ead73caa6\"},\"description\":\"How to create a JavaScript bar chart? This tutorial will explain that and also tell you how to quickly modify and customize such a chart.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/#primaryimage\",\"url\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title.png\",\"contentUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title.png\",\"width\":1366,\"height\":768},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.anychart.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating JavaScript Bar Chart\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\",\"url\":\"https:\/\/www.anychart.com\/blog\/\",\"name\":\"AnyChart News\",\"description\":\"AnyChart JS Charts\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.anychart.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/a944a69f34509440ab4a9b5ead73caa6\",\"name\":\"Timothy Loginov\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/00860a412d134244a5234231874065a30044d4d59f78aef4cca746e1e2dd3691?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/00860a412d134244a5234231874065a30044d4d59f78aef4cca746e1e2dd3691?s=96&r=g\",\"caption\":\"Timothy Loginov\"},\"url\":\"https:\/\/www.anychart.com\/blog\/author\/timothy-loginov\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Bar Chart: How to Create and Customize One","description":"How to create a JavaScript bar chart? This tutorial will explain that and also tell you how to quickly modify and customize such a chart.","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.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"Creating JavaScript Bar Chart","og_description":"How to create a JavaScript bar chart? This tutorial explains that and also shows how to quickly customize such a chart.","og_url":"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/","og_site_name":"AnyChart News","article_publisher":"https:\/\/www.facebook.com\/AnyCharts","article_published_time":"2017-10-25T08:26:31+00:00","article_modified_time":"2022-08-13T10:24:20+00:00","og_image":[{"url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title.png","type":"","width":"","height":""}],"author":"Timothy Loginov","twitter_card":"summary_large_image","twitter_title":"Creating JavaScript Bar Chart","twitter_description":"How to create a JavaScript bar chart? This tutorial explains that and also shows how to quickly customize such a chart.","twitter_image":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title.png","twitter_creator":"@AnyChart","twitter_site":"@AnyChart","twitter_misc":{"Written by":"Timothy Loginov","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/#article","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/"},"author":{"name":"Timothy Loginov","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/a944a69f34509440ab4a9b5ead73caa6"},"headline":"Creating JavaScript Bar Chart","datePublished":"2017-10-25T08:26:31+00:00","dateModified":"2022-08-13T10:24:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/"},"wordCount":913,"commentCount":15,"image":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title.png","keywords":["AnyChart","bar chart","bar charts","chart types","column charts","Data Visualization","HTML5","html5 charts","JavaScript","javascript charting","JavaScript charting library","javascript charts","js chart","js charting","js charts","Tips and tricks","tutorial"],"articleSection":["AnyChart Charting Component","HTML5","JavaScript","JavaScript Chart Tutorials","Tips and Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/","url":"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/","name":"JavaScript Bar Chart: How to Create and Customize One","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title.png","datePublished":"2017-10-25T08:26:31+00:00","dateModified":"2022-08-13T10:24:20+00:00","author":{"@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/a944a69f34509440ab4a9b5ead73caa6"},"description":"How to create a JavaScript bar chart? This tutorial will explain that and also tell you how to quickly modify and customize such a chart.","breadcrumb":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/#primaryimage","url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title.png","contentUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/10\/creating-bar-chart-title.png","width":1366,"height":768},{"@type":"BreadcrumbList","@id":"https:\/\/www.anychart.com\/blog\/2017\/10\/25\/javascript-bar-chart-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.anychart.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating JavaScript Bar Chart"}]},{"@type":"WebSite","@id":"https:\/\/www.anychart.com\/blog\/#website","url":"https:\/\/www.anychart.com\/blog\/","name":"AnyChart News","description":"AnyChart JS Charts","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.anychart.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/a944a69f34509440ab4a9b5ead73caa6","name":"Timothy Loginov","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/00860a412d134244a5234231874065a30044d4d59f78aef4cca746e1e2dd3691?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/00860a412d134244a5234231874065a30044d4d59f78aef4cca746e1e2dd3691?s=96&r=g","caption":"Timothy Loginov"},"url":"https:\/\/www.anychart.com\/blog\/author\/timothy-loginov\/"}]}},"_links":{"self":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/4866","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/comments?post=4866"}],"version-history":[{"count":93,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/4866\/revisions"}],"predecessor-version":[{"id":15484,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/4866\/revisions\/15484"}],"wp:attachment":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/media?parent=4866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/categories?post=4866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/tags?post=4866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}