Bar

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

Bar Mark Properties

Click to show code

import altair as alt
import pandas as pd

corner_slider = alt.binding_range(min=0, max=50, step=1)
corner_var = alt.param(bind=corner_slider, value=0, name="cornerRadius")

source = pd.DataFrame(
    {
        "a": ["A", "B", "C", "D", "E", "F", "G", "H", "I"],
        "b": [28, 55, 43, 91, 81, 53, 19, 87, 52],
    }
)

alt.Chart(source).mark_bar(cornerRadius=corner_var).encode(
    x=alt.X("a:N").axis(labelAngle=0),
    y="b:Q",
).add_params(corner_var)

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

Click to show table

Property	Type	Description
width	anyOf(number, ExprRef, RelativeBandSize)	Width of the marks. One of: A number representing a fixed pixel width. A relative band size definition. For example, {band: 0.5} represents half of the band.
height	anyOf(number, ExprRef, RelativeBandSize)	Height of the marks. One of: A number representing a fixed pixel height. A relative band size definition. For example, {band: 0.5} represents half of the band
orient	Orientation	The orientation of a non-stacked bar, tick, area, and line charts. The value is either horizontal (default) or vertical. For bar, rule and tick, this determines whether the size of the bar and tick should be applied to x or y dimension. For area, this property determines the orient property of the Vega output. For line and trail marks, this property determines the sort order of the points in the line if config.sortLineBy is not specified. For stacked charts, this is always determined by the orientation of the stack; therefore explicitly specified value will be ignored.
align	anyOf(Align, ExprRef)	The horizontal alignment of the text or ranged marks (area, bar, image, rect, rule). One of "left", "right", "center". Note: Expression reference is not supported for range marks.
baseline	anyOf(TextBaseline, ExprRef)	For text marks, the vertical text baseline. One of "alphabetic" (default), "top", "middle", "bottom", "line-top", "line-bottom", or an expression reference that provides one of the valid values. The "line-top" and "line-bottom" values operate similarly to "top" and "bottom", but are calculated relative to the lineHeight rather than fontSize alone. For range marks, the vertical alignment of the marks. One of "top", "middle", "bottom". Note: Expression reference is not supported for range marks.
binSpacing	number	Offset between bars for binned field. The ideal value for this is either 0 (preferred by statisticians) or 1 (Vega-Lite default, D3 example style). Default value: 1
cornerRadius	anyOf(number, ExprRef)	The radius in pixels of rounded rectangles or arcs’ corners. Default value: 0
cornerRadiusEnd	anyOf(number, ExprRef)	For vertical bars, top-left and top-right corner radius. For horizontal bars, top-right and bottom-right corner radius.
cornerRadiusTopLeft	anyOf(number, ExprRef)	The radius in pixels of rounded rectangles’ top right corner. Default value: 0
cornerRadiusTopRight	anyOf(number, ExprRef)	The radius in pixels of rounded rectangles’ top left corner. Default value: 0
cornerRadiusBottomRight	anyOf(number, ExprRef)	The radius in pixels of rounded rectangles’ bottom right corner. Default value: 0
cornerRadiusBottomLeft	anyOf(number, ExprRef)	The radius in pixels of rounded rectangles’ bottom left corner. Default value: 0

Examples

Single Bar Chart

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

import altair as alt
from altair import datum
from vega_datasets import data

source = data.population.url

alt.Chart(source).mark_bar().encode(
    alt.X("sum(people):Q").title("Population")
).transform_filter(
    datum.year == 2000
)

Bar Chart

If we map a different discrete field to the y channel, we can produce a horizontal bar chart. Specifying alt.Step(20) will adjust the bar’s height per discrete step.

import altair as alt
from altair import datum
from vega_datasets import data

source = data.population.url

alt.Chart(source).mark_bar().encode(
    alt.X("sum(people):Q").title("Population"),
    alt.Y("age:O"),
).transform_filter(
    datum.year == 2000
).properties(height=alt.Step(20))

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.

import altair as alt
from vega_datasets import data

source = data.seattle_weather()

alt.Chart(source).mark_bar().encode(
    alt.X("month(date):T").title("Date"),
    alt.Y("mean(precipitation):Q"),
)

Histograms

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.

import altair as alt
from vega_datasets import data

source = data.movies.url

alt.Chart(source).mark_bar().encode(
    alt.X("IMDB_Rating:Q").bin(),
    y='count()',
)

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.)

import altair as alt
from vega_datasets import data

source = data.barley()

alt.Chart(source).mark_bar().encode(
    x="variety",
    y="sum(yield)",
    color="site"
)

Grouped Bar Chart with Offset

import altair as alt
import pandas as pd

source = pd.DataFrame(
    {
        "category": ["A", "A", "B", "B", "C", "C"],
        "group": ["x", "y", "z", "x", "y", "z"],
        "value": [0.1, 0.6, 0.9, 0.7, 0.2, 0.6],
    }
)

alt.Chart(source).mark_bar().encode(
    x=alt.X("category:N"),
    xOffset="group:N",
    y=alt.Y("value:Q"),
    color=alt.Color("group:N"),
)