jQWidgets jqxBulletChart barSize Property Last Updated : 19 Jul, 2021 Comments Improve Suggest changes Like Article Like Report jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxBulletChart represents a jQuery bullet chart widget that features two measures, a primary one and a comparative one, and displays them in the context of a number of differently styled qualitative ranges. The barSize property is used to set or return the bullet chart's bar size. It accepts array type value and its default value is 50%. Syntax: $('.selector').jqxBulletChart({ barSize: '40%' }); Linked Files: Download jQWidgets from the link. In the HTML file, locate the script files in the downloaded folder. <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="jqwidgets/jqxbulletchart.js"></script> <script type="text/javascript" src="jqwidgets/jqxtooltip.js"></script> Example: The below example illustrates the jqxBulletChart barSize property in jQWidgets. HTML <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"> </script> <script type="text/javascript" src="jqwidgets/jqxcore.js"> </script> <script type="text/javascript" src="jqwidgets/jqxdraw.js"> </script> <script type="text/javascript" src="jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="jqwidgets/jqxbulletchart.js"></script> <script type="text/javascript" src="jqwidgets/jqxtooltip.js"></script> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> jQWidgets jqxBulletChart barSize Property </h3> <div id="gfg"></div> </center> <script type="text/javascript"> $(document).ready(function () { $('#gfg').jqxBulletChart({ width: 700, height: 100, barSize: "60%", title: "GeeksforGeeks", description: "Computer science portal", ranges: [ { startValue: 0, endValue: 100, color: "red" }, { startValue: 100, endValue: 200, color: "blue" }, { startValue: 200, endValue: 300, color: "yellow" } ], pointer: { value: 250, color: "green" }, target: { value: 230, color: "green" }, ticks: { interval: 50 }, }); }); </script> </body> </html> Output: bar size Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxbulletchart/jquery-bullet-chart-api.htm Comment More infoAdvertise with us Next Article jQWidgets jqxBulletChart description Property P ppatelkap Follow Improve Article Tags : Web Technologies JQuery jQuery-jQWidgets jQWidgets-jqxBulletChart Similar Reads jQWidgets jqxBulletChart disabled Property jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized, platform-independent, and widely supported framework. The jqxBulletChart represents a jQuery bullet chart widget that features two measures, a primary one and a compa 2 min read jQWidgets jqxBulletChart height Property jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxBulletChart represents a jQuery bullet chart widget that features two measures, a primary one and a compa 2 min read jQWidgets jqxBulletChart rtl Property jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxBulletChart represents a jQuery bullet chart widget that features two measures - a primary one and a comp 2 min read jQWidgets jqxBulletChart description Property jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxBulletChart represents a jQuery bullet chart widget that features two measures, a primary one and a comparat 2 min read jQWidgets jqxBulletChart width Property jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxBulletChart represents a jQuery bullet chart widget that features two measures, a primary one and a comparat 2 min read jQWidgets jqxBulletChart ticks Property jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxBulletChart represents a jQuery bullet chart widget that features two measures, a primary one and a comparat 2 min read Like