Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxBulletChart.

• jqx-widget - applied to the jqxBulletChart widget.
• jqx-bulletchart - applied to the jqxBulletChart.
• jqx-bulletchart-title - applied to the jqxBulletChart title.
• jqx-bulletchart-description - applied to the jqxBulletChart description.
• jqx-bulletchart-range - applied to the jqxBulletChart ranges.
• jqx-bulletchart-pointer - applied to the jqxBulletChart pointer.
• jqx-bulletchart-target - applied to the jqxBulletChart target.
• jqx-bulletchart-ticks - applied to the jqxBulletChart ticks.
• jqx-bulletchart-zero-tick - applied to the jqxBulletChart zero tick (shown only when the minimum value is a negative number).
• jqx-bulletchart-labels - applied to the jqxBulletChart labels.
• jqx-fill-state-pressed - applied to the pointer and target if their color properties are not set or are set to "".
• jqx-fill-state-hover - applied to a hovered pointer or target if its color property is not set or is set to "".
• jqx-fill-state-disabled - applied to the jqxBulletChart when it is disabled.

Classes applied only when the orientation property is set to "horizontal":

• jqx-bulletchart-range-horizontal - applied to ranges.
• jqx-bulletchart-target-horizontal - applied to the target.
• jqx-bulletchart-ticks-horizontal - applied to ticks.

Classes applied only when the orientation property is set to "vertical":

• jqx-bulletchart-range-vertical - applied to ranges.
• jqx-bulletchart-target-vertical - applied to the target.
• jqx-bulletchart-ticks-vertical - applied to ticks.

When you create a custom style with colors and backgrounds for jqxBulletChart, you need to do the following:

• Add the above CSS classes related to jqxBulletChart
• After each CSS class, add your theme name.
  For example:
  jqx-bulletchart-summer
• To apply your custom style to jqxBulletChart, you need to set its 'theme' property(option) to point to your theme name string. The pointer and target can also be styled by setting their color properties. If the range's or target's color is not set or it is set to "", the theme setting is applied. Ranges can be styled only by setting their color and opacity.