Cases jqxBulletChart's right-to-left support.
A live JavaScript/jQuery example of jqxBulletChart, the jQWidgets BulletChart component, with its complete source code below. It is one of 9 jqxBulletChart demos for jQuery.
barSize property – Sets ot gets the bulletcharts's bar size.description property – Sets ot gets the bulletcharts's description.height property – Sets ot gets the bulletcharts's height.labelsFormat property – Sets ot gets the bulletcharts's labelsFormat.pointer property – Sets ot gets the bulletcharts's pointer.rtl property – Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.ranges property – Sets ot gets the bulletcharts's range.showTooltip property – Sets ot gets the bulletcharts's showTooltip.target property – Sets ot gets the bulletcharts's target.ticks property – Sets ot gets the bulletcharts's ticks.title property – Sets ot gets the bulletcharts's title.width property – Sets ot gets the bulletcharts's width.To run it in your own page, load jqx.base.css, a theme and the library files below from npm (npm install jqwidgets-scripts) or the jsDelivr CDN, then add the markup and the script. jQuery is not required: jqxcore.js provides $.
The page loads jqx.base.css, a theme and these library files: jqxcore.js, jqxdata.js, jqxtooltip.js, jqxbulletchart.js.
It also loads helper scripts of this demo site, which are not part of the library: demos.js (getWidth() and other layout helpers).
$(document).ready(function () {
$("#bulletChart").jqxBulletChart({
width: getWidth('bulletChart'),
height: 80,
barSize: "40%",
title: "Revenue 2026 YTD",
description: "(U.S. $ in thousands)",
ranges: [
{ startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 },
{ startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 },
{ startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 }
],
pointer: { value: 270, label: "Revenue 2026 YTD", size: "25%", color: "Black" },
target: { value: 260, label: "Revenue 2025 YTD", size: 4, color: "Black" },
ticks: { position: "far", interval: 50, size: 10 },
labelsFormat: "c",
showTooltip: true,
rtl: true
});
});<div id="bulletChart" style="margin-left: 15px;">
</div>