User Guide
Reference
Examples
Download
Github

bars

The bars command takes an input data table, transforms it according to a user-provided scale configuration and then plots the data as one or more 'bars' (rectangle shapes).

Synopsis

bars { 
  data-x: <dataset>;
  data-x-high: <>;
  data-x-low: <dataset>;
  data-y: <dataset Set the 'x' dataset for the plot. The 'x' dataset will be used to calculate the vertical position of geometry.>;
  data-y-high: <>;
  data-y-low: <dataset>;
  direction: <>;
  color: <color>;
  width: <>;
  offset: <>;
  stroke-color: <color>;
  stroke-width: <stroke_width>;
  stroke-style: <stroke_style>;
  labels: <dataset_string>;
  label-font-size: <font_size>;
  label-color: <color>;
  label-padding: <padding>;
  scale-x: <scale>;
  scale-y: <scale>;
  limit-x: <limit>;
  limit-x-min: <limit_min>;
  limit-x-max: <limit-max>;
  limit-y: <limit>;
  limit-y-min: <limit_min>;
  limit-y-max: <limit-max>;
}

List of Options

data-x

Set the 'x' dataset for the plot. The 'x' dataset will be used to calculate the horizontal position of geometry.

data-x: <path>;
Examples:
// load a csv file
data-x: "myfile.csv";

// load a geojson file
data-x: "myfile.geojson";

data-x-high

The bars command takes an input data table, transforms it according to a user-provided scale configuration and then plots the data as one or more 'bars' (rectangle shapes).

Alias for the data-x option.

data-x-low

Set the dataset for the current element. The dataset should be a valid CSV (RFC4180) or GeoJSON file. 

data-x-low: <path>;
Examples:
// load a csv file
data-x-low: "myfile.csv";

// load a geojson file
data-x-low: "myfile.geojson";

data-y

The bars command takes an input data table, transforms it according to a user-provided scale configuration and then plots the data as one or more 'bars' (rectangle shapes).

data-y-high

The bars command takes an input data table, transforms it according to a user-provided scale configuration and then plots the data as one or more 'bars' (rectangle shapes).

Alias for the data-y option.

data-y-low

Set the dataset for the current element. The dataset should be a valid CSV (RFC4180) or GeoJSON file. 

data-y-low: <path>;
Examples:
// load a csv file
data-y-low: "myfile.csv";

// load a geojson file
data-y-low: "myfile.geojson";

direction

Set the bar 'direction'.

direction [horizontal|vertical]
Examples:
;; draw a vertical "bar" chart
direction vertical

;; draw a horizontal "column" chart
direction horizontal

color

Set the bar color.

color: <color>;
Examples:
;; set the color to grey
color: #eee;

;; set the color to red, 50% transparent
color: rgba(1 0 0 .5);

width

Set the bar width. See the measure page for more details on valid values.

width <measure>
Examples:
;; set the bar width to 1em
width 1em

offset

Set the bar offset. See the measure page for more details on valid values.

offset <measure>
Examples:
;; set the bar offset to -.4em
offset -.4em

stroke-color

Set the bar's stroke color.

stroke-color: <color>;
Examples:
;; set the color to grey
stroke-color: #eee;

;; set the color to red, 50% transparent
stroke-color: rgba(1 0 0 .5);

stroke-width

Set the bar stroke width.

stroke-width: <measure>;
Examples:
;; set the stroke width to 2pt
stroke-width: 2pt;

stroke-style

Set the bar stroke style.

stroke-style: (<stroke-style>);
Examples:
;; set the stroke to dashed
stroke-style: dashed;

labels

Set the labels dataset. If provided, a label will be drawn for each point in the dataset next to the corresponding bar. The number of entries in the 'labels' dataset must match the number of entries in the 'x' and 'y' datasets exactly.

labels: list(<values>...);
labels: csv(<file> <column>);
Examples:
;; list of static values
labels: list("A" "B" "C");

;; load a csv file
labels: csv(myfile.csv mycolumn);

label-font-size

Set the label font size.

label-font-size: <measure>;
Examples:
;; set the font size to 14pt
label-font-size: 14pt;

label-color

Set the label color.

label-color: <color>;
Examples:
;; set the color to grey
label-color: #eee;

;; set the color to red, 50% transparent
label-color: rgba(1 0 0 .5);

label-padding

Set the label padding/spacing.

label-padding: <measure>;
Examples:
;; set the padding to 2em
label-padding: 2em;

scale-x

Set the type of the 'x' (horizontal) scale.

scale-x: [linear] [log] [logarithmic] [invert] [inverted];

List of scale types: - `linear` - Standard linear scale - `log`, `logarithmic` - Logarithmic (log10) scale - `invert`, `inverted` - Flip the scale

Examples:
;; set the scale to logarithmic mode
scale-x: log;

;; set the scale to inverted mode
scale-x: invert;

scale-y

Set the type of the 'y' (vertical) scale.

scale-y: [linear] [log] [logarithmic] [invert] [inverted];

List of scale types: - `linear` - Standard linear scale - `log`, `logarithmic` - Logarithmic (log10) scale - `invert`, `inverted` - Flip the scale

Examples:
;; set the scale to logarithmic mode
scale-y: log;

;; set the scale to inverted mode
scale-y: invert;

limit-x

Set the limits (minimum and maximum values) for the 'x' (horizontal) scale.

limit-x: <min> <max;
Examples:
;; set limits to [1..10]
limit-x: 1 10;

limit-x-min

Set the minimum value (lower limit) for the 'x' (horizontal) scale.

limit-x-min: <min>;
Examples:
;; set the lower limit to 2
limit-x-min: 2;

limit-x-max

Set the maximum value (upper limit) for the 'x' (horizontal) scale.

limit-x-max: <value>;
Examples:
;; set the upper limit to 20
limit-x-max: 20;

limit-y

Set the limits (minimum and maximum values) for the 'y' (vertical) scale.

limit-y: <min> <max;
Examples:
;; set limits to [1..10]
limit-y: 1 10;

limit-y-min

Set the minimum value (lower limit) for the 'y' (vertical) scale.

limit-y-min: <min>;
Examples:
;; set the lower limit to 2
limit-y-min: 2;

limit-y-max

Set the maximum value (upper limit) for the 'y' (vertical) scale.

limit-y-max: <value>;
Examples:
;; set the upper limit to 20
limit-y-max: 20;

Examples

Example: examples/charts-editorial/barchart_with_labels

Edit this page on GitHub