{"id":2459,"date":"2017-05-17T16:55:35","date_gmt":"2017-05-17T16:55:35","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=2459"},"modified":"2017-05-17T16:55:35","modified_gmt":"2017-05-17T16:55:35","slug":"create-responsive-bar-chart-jquery-css","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/create-responsive-bar-chart-jquery-css\/","title":{"rendered":"Creating Bar Chart with jQuery and CSS"},"content":{"rendered":"

A bar chart is a graph that represents group data with vertical or horizontal bars. Basically, the bar chart is used to shows the comparison which can easily understand. The bar chart helps to make the web application more user-friendly. To demonstrate comparison data among categories in percentage, the bar chart is the best choice.<\/p>\n

In this tutorial, we will show how you can create a responsive bar chart using pure CSS and jQuery. You don’t need to use any jQuery chart plugin for add a bar chart in the web page. You can easily create your own bar chart with pure CSS and jQuery<\/b>.<\/p>\n

Let’s start to create responsive bar chart with CSS<\/b>. In the example code, the Levels of Expertise will be shown on a bar chart.<\/p>\n

HTML Code<\/h2>\n

The following HTML shows the bar chart with the percentage value. Also, the respective label will appear below the chart.<\/p>\n

<div<\/span> class<\/span>=\"container\"<\/span>>\r\n    <h2<\/span>>Levels of Expertise<\/h2<\/span>>\r\n    <div<\/span> class<\/span>=\"bar-chart\"<\/span>>\r\n        <!-- legend label --><\/span>\r\n        <div<\/span> class<\/span>=\"legend\"<\/span>>\r\n            <div<\/span> class<\/span>=\"label\"<\/span>>\r\n                <h4<\/span>>Beginner<\/h4<\/span>>\r\n            <\/div<\/span>>\r\n            <div<\/span> class<\/span>=\"label\"<\/span>>\r\n                <h4<\/span>>Intermediate<\/h4<\/span>>\r\n            <\/div<\/span>>\r\n            <div<\/span> class<\/span>=\"label\"<\/span>>\r\n                <h4<\/span>>Proficient<\/h4<\/span>>\r\n            <\/div<\/span>>\r\n            <div<\/span> class<\/span>=\"label last\"<\/span>>\r\n                <h4<\/span>>Expert<\/h4<\/span>>\r\n            <\/div<\/span>>\r\n        <\/div<\/span>>\r\n        \r\n        <!-- bars --><\/span>\r\n        <div<\/span> class<\/span>=\"chart clearfix\"<\/span>>\r\n            <div<\/span> class<\/span>=\"item\"<\/span>>\r\n                <div<\/span> class<\/span>=\"bar\"<\/span>>\r\n                    <span<\/span> class<\/span>=\"percent\"<\/span>>85%<\/span<\/span>>\r\n    \r\n                    <div<\/span> class<\/span>=\"progress\"<\/span> data-percent<\/span>=\"85\"<\/span>>\r\n                        <span<\/span> class<\/span>=\"title\"<\/span>>PHP KNOWLEDGE<\/span<\/span>>\r\n                    <\/div<\/span>>\r\n                <\/div<\/span>>\r\n            <\/div<\/span>>\r\n            \r\n            <div<\/span> class<\/span>=\"item\"<\/span>>\r\n                <div<\/span> class<\/span>=\"bar\"<\/span>>\r\n                    <span<\/span> class<\/span>=\"percent\"<\/span>>68%<\/span<\/span>>\r\n    \r\n                    <div<\/span> class<\/span>=\"progress\"<\/span> data-percent<\/span>=\"68\"<\/span>>\r\n                        <span<\/span> class<\/span>=\"title\"<\/span>>MySQL KNOWLEDGE<\/span<\/span>>\r\n                    <\/div<\/span>>\r\n                <\/div<\/span>>\r\n            <\/div<\/span>>\r\n            \r\n            <div<\/span> class<\/span>=\"item\"<\/span>>\r\n                <div<\/span> class<\/span>=\"bar\"<\/span>>\r\n                    <span<\/span> class<\/span>=\"percent\"<\/span>>59%<\/span<\/span>>\r\n    \r\n                    <div<\/span> class<\/span>=\"progress\"<\/span> data-percent<\/span>=\"59\"<\/span>>\r\n                        <span<\/span> class<\/span>=\"title\"<\/span>>JavaScript KNOWLEDGE<\/span<\/span>>\r\n                    <\/div<\/span>>\r\n                <\/div<\/span>>\r\n            <\/div<\/span>>\r\n    \r\n            <div<\/span> class<\/span>=\"item\"<\/span>>\r\n                <div<\/span> class<\/span>=\"bar\"<\/span>>\r\n                    <span<\/span> class<\/span>=\"percent\"<\/span>>91%<\/span<\/span>>\r\n    \r\n                    <div<\/span> class<\/span>=\"progress\"<\/span> data-percent<\/span>=\"91\"<\/span>>\r\n                        <span<\/span> class<\/span>=\"title\"<\/span>>HTML&<\/span>CSS KNOWLEDGE<\/span<\/span>>\r\n                    <\/div<\/span>>\r\n                <\/div<\/span>>\r\n            <\/div<\/span>>\r\n        <\/div<\/span>>\r\n    <\/div<\/span>>\r\n<\/div<\/span>>\r\n<\/pre>\n
JavaScript Code<\/h2>\n
At first the jQuery library need to be included.<\/p>\n
<script<\/span> src<\/span>=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"<\/span>><\/script<\/span>>\r\n<\/pre>\n
The barChart()<\/code> function is used to assign the width of the bar based on the specified percentage. On document ready and window resize the barChart()<\/b> function is loaded.<\/p>\n
<script<\/span>>\r\n$<\/span>(document<\/span>).ready<\/span>(function<\/span>(){\r\n    barChart();\r\n    \r\n    $<\/span>(window<\/span>).resize<\/span>(function<\/span>(){\r\n        barChart();\r\n    });\r\n    \r\n    function<\/span> barChart<\/span>(){\r\n        $<\/span>('.bar-chart<\/span>').find<\/span>('.progress<\/span>').each<\/span>(function<\/span>(){\r\n            var<\/span> itemProgress =<\/span> $<\/span>(this<\/span>),\r\n            itemProgressWidth =<\/span> $<\/span>(this<\/span>).parent<\/span>().width<\/span>() *<\/span> ($<\/span>(this<\/span>).data<\/span>('percent'<\/span>) \/ 100<\/span>);\r\n            itemProgress.css<\/span>('width'<\/span>, itemProgressWidth);\r\n        });\r\n    }\r\n});\r\n<\/script<\/span>>\r\n<\/pre>\n
CSS Code<\/h2>\n
The following CSS is used to styling the bar chart and make bar graph responsive.<\/p>\n
.bar-chart<\/span> {\r\n    position<\/span>:<\/span> relative<\/span>;\r\n    width<\/span>:<\/span> 100%<\/span><\/span>;\r\n    margin-top<\/span>:<\/span> 15px<\/span><\/span>;\r\n    padding-bottom<\/span>:<\/span> 1px<\/span><\/span>;\r\n}\r\n.bar-chart<\/span> > .legend<\/span> {\r\n    position<\/span>:<\/span> absolute<\/span>;\r\n    bottom<\/span>:<\/span> 0<\/span>;\r\n    left<\/span>:<\/span> 0<\/span>;\r\n    width<\/span>:<\/span> 100%<\/span><\/span>;\r\n    height<\/span>:<\/span> 40px<\/span><\/span>;\r\n    margin-bottom<\/span>:<\/span> -45px<\/span><\/span>;\r\n    border-top<\/span>:<\/span> 1px<\/span><\/span> solid<\/span> #000<\/span>;\r\n}\r\n.bar-chart<\/span> > .legend<\/span> > .label<\/span> {\r\n    position<\/span>:<\/span> relative<\/span>;\r\n    display<\/span>:<\/span> inline-block<\/span>;\r\n    float<\/span>:<\/span> left<\/span>;\r\n    width<\/span>:<\/span> 25%<\/span><\/span>;\r\n    text-align<\/span>:<\/span> center<\/span>;\r\n}\r\n.bar-chart<\/span> > .legend<\/span> > .label<\/span>:before<\/span> {\r\n    display<\/span>:<\/span> block<\/span>;\r\n    position<\/span>:<\/span> absolute<\/span>;\r\n    top<\/span>:<\/span> 0<\/span>;\r\n    left<\/span>:<\/span> 0<\/span>;\r\n    content<\/span>:<\/span> ''<\/span>;\r\n    width<\/span>:<\/span> 1px<\/span><\/span>;\r\n    height<\/span>:<\/span> 8px<\/span><\/span>;\r\n    background-color<\/span>:<\/span> #000<\/span>;\r\n    margin-top<\/span>:<\/span> -8px<\/span><\/span>;\r\n}\r\n.bar-chart<\/span> > .legend<\/span> > .label<\/span>.last<\/span>:after<\/span> {\r\n    display<\/span>:<\/span> block<\/span>;\r\n    position<\/span>:<\/span> absolute<\/span>;\r\n    top<\/span>:<\/span> 0<\/span>;\r\n    right<\/span>:<\/span> 0<\/span>;\r\n    left<\/span>:<\/span> auto<\/span>;\r\n    content<\/span>:<\/span> ''<\/span>;\r\n    width<\/span>:<\/span> 1px<\/span><\/span>;\r\n    height<\/span>:<\/span> 8px<\/span><\/span>;\r\n    background-color<\/span>:<\/span> #000<\/span>;\r\n    margin-top<\/span>:<\/span> -8px<\/span><\/span>;\r\n}\r\n.bar-chart<\/span> > .legend<\/span> > .label<\/span> h4<\/span> {\r\n    font-size<\/span>:<\/span> 13px<\/span><\/span>;\r\n    text-transform<\/span>:<\/span> uppercase<\/span>;\r\n    letter-spacing<\/span>:<\/span> 1px<\/span><\/span>;\r\n}\r\n.bar-chart<\/span> > .chart<\/span> {\r\n    position<\/span>:<\/span> relative<\/span>;\r\n    width<\/span>:<\/span> 100%<\/span><\/span>;\r\n}\r\n.bar-chart<\/span> > .chart<\/span> > .item<\/span> {\r\n    position<\/span>:<\/span> relative<\/span>;\r\n    width<\/span>:<\/span> 100%<\/span><\/span>;\r\n    height<\/span>:<\/span> 40px<\/span><\/span>;\r\n    margin-bottom<\/span>:<\/span> 10px<\/span><\/span>;\r\n    color<\/span>:<\/span> #fff<\/span>;\r\n    text-transform<\/span>:<\/span> uppercase<\/span>;\r\n}\r\n.bar-chart<\/span> > .chart<\/span> > .item<\/span> > .bar<\/span> {\r\n    position<\/span>:<\/span> absolute<\/span>;\r\n    top<\/span>:<\/span> 0<\/span>;\r\n    left<\/span>:<\/span> 0<\/span>;\r\n    width<\/span>:<\/span> 100%<\/span><\/span>;\r\n    height<\/span>:<\/span> 100%<\/span><\/span>;\r\n    background-color<\/span>:<\/span> #ff4081<\/span>;\r\n    z-index<\/span>:<\/span> 5<\/span>;\r\n}\r\n.bar-chart<\/span> > .chart<\/span> > .item<\/span> > .bar<\/span> > .percent<\/span> {\r\n    display<\/span>:<\/span> block<\/span>;\r\n    position<\/span>:<\/span> absolute<\/span>;\r\n    top<\/span>:<\/span> 0<\/span>;\r\n    right<\/span>:<\/span> 0<\/span>;\r\n    height<\/span>:<\/span> 40px<\/span><\/span>;\r\n    line-height<\/span>:<\/span> 40px<\/span><\/span>;\r\n    padding-right<\/span>:<\/span> 12px<\/span><\/span>;\r\n    z-index<\/span>:<\/span> 15<\/span>;\r\n}\r\n.bar-chart<\/span> > .chart<\/span> > .item<\/span> > .bar<\/span> > .progress<\/span> {\r\n    position<\/span>:<\/span> absolute<\/span>;\r\n    top<\/span>:<\/span> 0<\/span>;\r\n    left<\/span>:<\/span> 0<\/span>;\r\n    height<\/span>:<\/span> 100%<\/span><\/span>;\r\n    background-color<\/span>:<\/span> #3e50b4<\/span>;\r\n    z-index<\/span>:<\/span> 10<\/span>;\r\n}\r\n.bar-chart<\/span> > .chart<\/span> > .item<\/span> > .bar<\/span> > .progress<\/span> > .title<\/span> {\r\n    display<\/span>:<\/span> block<\/span>;\r\n    position<\/span>:<\/span> absolute<\/span>;\r\n    height<\/span>:<\/span> 40px<\/span><\/span>;\r\n    line-height<\/span>:<\/span> 40px<\/span><\/span>;\r\n    padding-left<\/span>:<\/span> 12px<\/span><\/span>;\r\n    letter-spacing<\/span>:<\/span> 2px<\/span><\/span>;\r\n    z-index<\/span>:<\/span> 15<\/span>;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
A bar chart is a graph that represents group data with vertical or horizontal bars. Basically, the bar chart is used to shows the comparison which can easily understand. The bar chart helps to make <\/p>\n","protected":false},"author":1,"featured_media":2460,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[292,124,179,16],"class_list":["post-2459","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-chart","tag-css","tag-html","tag-jquery","cat-6-id","has_thumb"],"yoast_head":"\nCreating Bar Chart with jQuery and CSS - CodexWorld<\/title>\n<meta name=\"description\" content=\"jQuery Bar Chart with CSS - Create responsive bar chart using jQuery and CSS. Example code to create your own bar chart with pure CSS and jQuery.\" \/>\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.codexworld.com\/create-responsive-bar-chart-jquery-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Bar Chart with jQuery and CSS - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"jQuery Bar Chart with CSS - Create responsive bar chart using jQuery and CSS. Example code to create your own bar chart with pure CSS and jQuery.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/create-responsive-bar-chart-jquery-css\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-17T16:55:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/05\/responsive-bar-chart-jquery-css-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\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\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-responsive-bar-chart-jquery-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-responsive-bar-chart-jquery-css\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Creating Bar Chart with jQuery and CSS\",\"datePublished\":\"2017-05-17T16:55:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-responsive-bar-chart-jquery-css\\\/\"},\"wordCount\":215,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-responsive-bar-chart-jquery-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/responsive-bar-chart-jquery-css-codexworld.png\",\"keywords\":[\"Chart\",\"CSS\",\"HTML\",\"jQuery\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/create-responsive-bar-chart-jquery-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-responsive-bar-chart-jquery-css\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/create-responsive-bar-chart-jquery-css\\\/\",\"name\":\"Creating Bar Chart with jQuery and CSS - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-responsive-bar-chart-jquery-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-responsive-bar-chart-jquery-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/responsive-bar-chart-jquery-css-codexworld.png\",\"datePublished\":\"2017-05-17T16:55:35+00:00\",\"description\":\"jQuery Bar Chart with CSS - Create responsive bar chart using jQuery and CSS. Example code to create your own bar chart with pure CSS and jQuery.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-responsive-bar-chart-jquery-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/create-responsive-bar-chart-jquery-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-responsive-bar-chart-jquery-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/responsive-bar-chart-jquery-css-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/responsive-bar-chart-jquery-css-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"responsive-bar-chart-jquery-css-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-responsive-bar-chart-jquery-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating Bar Chart with jQuery and CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web & Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating Bar Chart with jQuery and CSS - CodexWorld","description":"jQuery Bar Chart with CSS - Create responsive bar chart using jQuery and CSS. Example code to create your own bar chart with pure CSS and jQuery.","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.codexworld.com\/create-responsive-bar-chart-jquery-css\/","og_locale":"en_US","og_type":"article","og_title":"Creating Bar Chart with jQuery and CSS - CodexWorld","og_description":"jQuery Bar Chart with CSS - Create responsive bar chart using jQuery and CSS. Example code to create your own bar chart with pure CSS and jQuery.","og_url":"https:\/\/www.codexworld.com\/create-responsive-bar-chart-jquery-css\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2017-05-17T16:55:35+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/05\/responsive-bar-chart-jquery-css-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/create-responsive-bar-chart-jquery-css\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/create-responsive-bar-chart-jquery-css\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Creating Bar Chart with jQuery and CSS","datePublished":"2017-05-17T16:55:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/create-responsive-bar-chart-jquery-css\/"},"wordCount":215,"commentCount":0,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/create-responsive-bar-chart-jquery-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/05\/responsive-bar-chart-jquery-css-codexworld.png","keywords":["Chart","CSS","HTML","jQuery"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/create-responsive-bar-chart-jquery-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/create-responsive-bar-chart-jquery-css\/","url":"https:\/\/www.codexworld.com\/create-responsive-bar-chart-jquery-css\/","name":"Creating Bar Chart with jQuery and CSS - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/create-responsive-bar-chart-jquery-css\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/create-responsive-bar-chart-jquery-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/05\/responsive-bar-chart-jquery-css-codexworld.png","datePublished":"2017-05-17T16:55:35+00:00","description":"jQuery Bar Chart with CSS - Create responsive bar chart using jQuery and CSS. Example code to create your own bar chart with pure CSS and jQuery.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/create-responsive-bar-chart-jquery-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/create-responsive-bar-chart-jquery-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/create-responsive-bar-chart-jquery-css\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/05\/responsive-bar-chart-jquery-css-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/05\/responsive-bar-chart-jquery-css-codexworld.png","width":1366,"height":768,"caption":"responsive-bar-chart-jquery-css-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/create-responsive-bar-chart-jquery-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Creating Bar Chart with jQuery and CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web & Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/05\/responsive-bar-chart-jquery-css-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-DF","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=2459"}],"version-history":[{"count":1,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2459\/revisions"}],"predecessor-version":[{"id":2461,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2459\/revisions\/2461"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/2460"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=2459"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=2459"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=2459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}