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 Rounded Corners
  • Bar Chart with Negative Values and Zero Baseline
  • Histogram
  • Stacked Bar Chart
  • Layered Bar Chart
  • Normalized Stacked Bar Chart
  • Grouped Bar Chart
  • 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.

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.

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

Faceting a bar chart produces a grouped bar chart.

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 mark properties, bar config can contain the following additional properties: