Generates a styleable progress bar-style graphic that may be used to visually display the value of a given statistic, passed as a value scaled to 0 – 100, and intended for comparison with adjacent bars as part of a bar chart. The largest value passed in a series should be given a value of 100 (or less), and other bars should pass a percent of the max value.

Usage

edit
{{vbar|pct}}
{{vbar|pct|value}}
{{vbar|pct|label=string}}

Parameters

edit

Data params

There are three data parameters, one required:

  • |1= – a number from 1..100 indicating the relative size of the bar compared to other bars in the series. By itself, a single bar has no meaning, as it is by definition a comparative value that only makes sense when displayed in multiples.
  • |2= – this is just a string used to decorate the end of the bar, and can be anything you want; normally, a number representing the raw statistic, such as 2,133, meaning 2,133 page views for that day, for example. (optional; no default)
  • |label= – identifier for the bar (any string); for a time-series chart, this might be the day or time.

Style params

There are four styling params, all optional:

  • |label-style= – defaults to 6 characters, monospaced, right-justified.
  • |thick= – bar thickness (default: 5px, plus 1px border)
  • |style= – you may add any CSS parameters applicable to an HTML inline element to alter the appearance of the bar, such as size, width, border, background-color, etc.
  • |mode= – set mode to vert to change the bar to a vertical bar; (default: horizontal)     (not implemented yet)

Examples

edit
{{xviews/vbar|13.3|825|06-03}}
825
{{xviews/vbar|34.5|2133|label=06-05}}
06-052133
{{xviews/vbar|100|6184|label=06-06}}
06-066184
Page views of Liberation of France from June 1 to June 10, 2024
06-01533
06-02767
06-03825
06-041049
06-052133
06-066184
06-073233
06-081751
06-091345
06-10937