Bar

// Single View Specification
{
  "data": ... ,
  "mark": "bar",
  "encoding": ... ,
  ...
}

Bar marks are useful in many visualizations, including bar charts, stacked bar charts, and timelines.

Documentation Overview

• Bar Mark Properties
• Examples
  • Single Bar Chart
  • Bar Chart
  • Bar Chart with a Temporal Axis
  • Relative Bar Width
  • Bar Chart with a Discrete Temporal Axis
  • Bar Chart with Rounded Corners
  • Bar Chart with Negative Values and Zero Baseline
  • Histogram
  • Stacked Bar Chart
  • Layered Bar Chart
  • Normalized Stacked Bar Chart
  • Grouped Bar Chart (with Offset)
  • Grouped Bar Chart (with Facet)
  • Grouped Bar Chart (Multiple Measure with Repeat)
  • Ranged Bars
• Bar Config

Bar Mark Properties

// Single View Specification
{
  ...
  "mark": {
    "type": "bar",
    ...
  },
  "encoding": ... ,
  ...
}

A bar mark definition can contain any standard mark properties and the following special properties:

Examples

Single Bar Chart

Mapping a quantitative field to either x or y of the bar mark produces a single bar chart.

Bar Chart

If we map a different discrete field to the y channel, we can produce a horizontal bar chart. Specifying "height": {"step": 17} will adjust the bar’s height per discrete step.

Bar Chart with a Temporal Axis

While the bar mark typically uses the x and y channels to encode a pair of discrete and continuous fields, it can also be used with continuous fields on both channels. For example, given a bar chart with a temporal field on x, we can see that the x-scale is a continuous scale. By default, the size of bars on continuous scales will be set based on the continuousBandSize config.

{.#bar-width}

Relative Bar Width

To adjust the bar to be smaller than the time unit step, you can adjust the bar’s width to be a proportion of band. For example, the following chart sets the width to be 70% of the x band width.

Bar Chart with a Discrete Temporal Axis

If you want to use a discrete scale instead, you can cast the field to have an "ordinal" type. This casting strategy can be useful for time units with low cardinality such as "month".

Bar Chart with Rounded Corners

We can also adjust corner radius of the bar with various corner radius properties. For example, we can use cornerRadiusEnd to create a bar chart with rounded corners at the end of the bars.

Bar Chart with Negative Values and Zero Baseline

When there are negative values, you may want to hide domain the axis domain line, and instead use a conditional grid color to draw a zero baseline.

Histogram

If the data is not pre-aggregated (i.e. each record in the data field represents one item), mapping a binned quantitative field to x and aggregate count to y produces a histogram.

If you prefer to have histogram without gaps between bars, you can set the binSpacing mark property to 0.

Stacked Bar Chart

Adding color to the bar chart (by using the color attribute) creates a stacked bar chart by default. Here we also customize the color’s scale range to make the color a little nicer. (See stack for more details about customizing stack.)

Layered Bar Chart

To disable stacking, you can alternatively set stack to null. This produces a layered bar chart. To make it clear that bars are layered, we can make marks semi-transparent by setting the opacity to a value between 0 and 1 (e.g., 0.7).

Normalized Stacked Bar Chart

You can also create a normalized stacked bar chart by setting stack to "normalize". Here we can easily see the percentage of male and female population at different ages.

Grouped Bar Chart (with Offset)

Grouped Bar Chart (with Facet)

Alternatively, you can also use faceting to produce a grouped bar chart.

This allows you to use independent x-scale for each facet:

Grouped Bar Chart (Multiple Measure with Repeat)

Ranged Bars

Specifying x2 or y2 for the quantitative axis of bar marks creates ranged bars. For example, we can use ranged bars to create a gantt chart.

Bar Config

// Top-level View Specification
{
  ...
  "config": {
    "bar": ...,
    ...
  }
}

The bar property of the top-level config object sets the default properties for all bar marks. If mark property encoding channels are specified for marks, these config values will be overridden.

Besides standard bar mark properties, bar config can contain the following additional properties: