Top-Level Chart Configuration
Many aspects of a chart’s appearance can be configured at the top level using
the configure_*()
methods.
These methods and the properties that they set are only valid at the top level
of a chart, and can be thought of as a way of setting a chart theme: that is,
they set the default styles for the entire chart, and these defaults can be
overridden by specific style settings associated with chart elements.
These methods and their arguments will be outlined below:
-
Chart Configuration
Chart.configure()
-
Axis Configuration
Chart.configure_axis()
-
Header Configuration
Chart.configure_header()
-
Legend Configuration
Chart.configure_legend()
-
Mark and Mark Style Configuration
Chart.configure_mark()
-
Scale Configuration
Chart.configure_scale()
-
Scale Range Configuration
Chart.configure_range()
-
Projection Configuration
Chart.configure_projection()
-
Selection Configuration
Chart.configure_selection()
-
Title Configuration
Chart.configure_title()
-
View Configuration
Chart.configure_view()
For more discussion of approaches to chart customization, see Customizing Visualizations.
Chart Configuration
The Chart.configure()
method adds a Config
instance to the chart,
and has the following attributes:
Property |
Type |
Description |
---|---|---|
arc |
Arc-specific Config |
|
area |
Area-Specific Config |
|
aria |
|
A boolean flag indicating if ARIA default attributes should be included for marks and
guides (SVG output only). If false, the Default value: |
autosize |
anyOf( |
How the visualization size should be determined. If a string, should be one of Default value: |
axis |
Axis configuration, which determines default properties for all |
|
axisBand |
Config for axes with “band” scales. |
|
axisBottom |
Config for x-axis along the bottom edge of the chart. |
|
axisDiscrete |
Config for axes with “point” or “band” scales. |
|
axisLeft |
Config for y-axis along the left edge of the chart. |
|
axisPoint |
Config for axes with “point” scales. |
|
axisQuantitative |
Config for quantitative axes. |
|
axisRight |
Config for y-axis along the right edge of the chart. |
|
axisTemporal |
Config for temporal axes. |
|
axisTop |
Config for x-axis along the top edge of the chart. |
|
axisX |
X-axis specific config. |
|
axisXBand |
Config for x-axes with “band” scales. |
|
axisXDiscrete |
Config for x-axes with “point” or “band” scales. |
|
axisXPoint |
Config for x-axes with “point” scales. |
|
axisXQuantitative |
Config for x-quantitative axes. |
|
axisXTemporal |
Config for x-temporal axes. |
|
axisY |
Y-axis specific config. |
|
axisYBand |
Config for y-axes with “band” scales. |
|
axisYDiscrete |
Config for y-axes with “point” or “band” scales. |
|
axisYPoint |
Config for y-axes with “point” scales. |
|
axisYQuantitative |
Config for y-quantitative axes. |
|
axisYTemporal |
Config for y-temporal axes. |
|
background |
CSS color property to use as the background of the entire view. Default value: |
|
bar |
Bar-Specific Config |
|
boxplot |
Box Config |
|
circle |
Circle-Specific Config |
|
concat |
Default configuration for all concatenation and repeat view composition operators ( |
|
countTitle |
|
Default axis and legend title for count fields. Default value: |
customFormatTypes |
|
Allow the |
errorband |
ErrorBand Config |
|
errorbar |
ErrorBar Config |
|
facet |
Default configuration for the |
|
fieldTitle |
[‘verbal’, ‘functional’, ‘plain’] |
Defines how Vega-Lite generates title for fields. There are three possible styles: - |
font |
|
Default font for all text marks, titles, and labels. |
geoshape |
Geoshape-Specific Config |
|
header |
Header configuration, which determines default properties for all headers. For a full list of header configuration options, please see the corresponding section of in the header documentation. |
|
headerColumn |
Header configuration, which determines default properties for column headers. For a full list of header configuration options, please see the corresponding section of in the header documentation. |
|
headerFacet |
Header configuration, which determines default properties for non-row/column facet headers. For a full list of header configuration options, please see the corresponding section of in the header documentation. |
|
headerRow |
Header configuration, which determines default properties for row headers. For a full list of header configuration options, please see the corresponding section of in the header documentation. |
|
image |
Image-specific Config |
|
legend |
Legend configuration, which determines default properties for all legends. For a full list of legend configuration options, please see the corresponding section of in the legend documentation. |
|
line |
Line-Specific Config |
|
lineBreak |
anyOf( |
A delimiter, such as a newline character, upon which to break text strings into multiple lines. This property provides a global default for text marks, which is overridden by mark or style config settings, and by the lineBreak mark encoding channel. If signal-valued, either string or regular expression (regexp) values are valid. |
mark |
Mark Config |
|
numberFormat |
|
D3 Number format for guide labels and text marks. For example |
padding |
The default visualization padding, in pixels, from the edge of the visualization canvas to
the data rectangle. If a number, specifies padding for all sides. If an object, the value
should have the format Default value: |
|
params |
array( |
Dynamic variables that parameterize a visualization. |
point |
Point-Specific Config |
|
projection |
Projection configuration, which determines default properties for all projections. For a full list of projection configuration options, please see the corresponding section of the projection documentation. |
|
range |
An object hash that defines default range arrays or schemes for using with scales. For a full list of scale range configuration options, please see the corresponding section of the scale documentation. |
|
rect |
Rect-Specific Config |
|
rule |
Rule-Specific Config |
|
scale |
Scale configuration determines default properties for all scales. For a full list of scale configuration options, please see the corresponding section of the scale documentation. |
|
selection |
An object hash for defining default properties for each type of selections. |
|
square |
Square-Specific Config |
|
style |
An object hash that defines key-value mappings to determine default properties for marks with a given style. The keys represent styles names; the values have to be valid mark configuration objects. |
|
text |
Text-Specific Config |
|
tick |
Tick-Specific Config |
|
timeFormat |
|
Default time format for raw time values (without time units) in text marks, legend labels and header labels. Default value: |
title |
Title configuration, which determines default properties for all titles. For a full list of title configuration options, please see the corresponding section of the title documentation. |
|
trail |
Trail-Specific Config |
|
view |
Default properties for single view plots. |
Axis Configuration
Axis configuration defines default settings for axes, and can be set using
the Chart.configure_axis()
method.
Properties defined here are applied to all axes in the figure.
Additional property blocks can target more specific axis types based on the orientation (“axisX”, “axisY”, “axisLeft”, “axisTop”, etc.) or band scale type (“axisBand”). For example, properties defined under the “axisBand” property will only apply to axes visualizing “band” scales. If multiple axis config blocks apply to a single axis, type-based options take precedence over orientation-based options, which in turn take precedence over general options.
The methods are the following:
-
Chart.configure_axis()
-
Chart.configure_axisBand()
-
Chart.configure_axisBottom()
-
Chart.configure_axisLeft()
-
Chart.configure_axisRight()
-
Chart.configure_axisTop()
-
Chart.configure_axisX()
-
Chart.configure_axisY()
They have the following properties:
Property |
Type |
Description |
---|---|---|
aria |
anyOf( |
|
bandPosition |
anyOf( |
|
description |
anyOf( |
|
disable |
|
Disable axis by default. |
domain |
anyOf( |
|
domainCap |
||
domainColor |
||
domainDash |
anyOf(array( |
|
domainDashOffset |
anyOf( |
|
domainOpacity |
anyOf( |
|
domainWidth |
anyOf( |
|
format |
anyOf( |
When used with the default
See the format documentation for more examples. When used with a custom Default value: Derived from numberFormat config for number format and from timeFormat config for time format. |
formatType |
|
The format type for labels. One of Default value: - |
grid |
|
A boolean flag indicating if grid lines should be included as part of the axis Default value: |
gridCap |
||
gridColor |
anyOf(anyOf( |
|
gridDash |
anyOf(array( |
|
gridDashOffset |
anyOf( |
|
gridOpacity |
anyOf( |
|
gridWidth |
anyOf( |
|
labelAlign |
anyOf( |
|
labelAngle |
anyOf( |
|
labelBaseline |
||
labelBound |
anyOf([number, boolean], |
|
labelColor |
anyOf(anyOf( |
|
labelExpr |
|
Vega expression for customizing labels text. Note: The label text and value can be assessed via the |
labelFlush |
[boolean, number] |
Indicates if the first and last axis labels should be aligned flush with the scale range. Flush alignment for a horizontal axis will left-align the first label and right-align the last label. For vertical axes, bottom and top text baselines are applied instead. If this property is a number, it also indicates the number of pixels by which to offset the first and last labels; for example, a value of 2 will flush-align the first and last labels and also push them 2 pixels outward from the center of the axis. The additional adjustment can sometimes help the labels better visually group with corresponding axis ticks. Default value: |
labelFlushOffset |
anyOf( |
|
labelFont |
anyOf( |
|
labelFontSize |
anyOf( |
|
labelFontStyle |
||
labelFontWeight |
||
labelLimit |
anyOf( |
|
labelLineHeight |
anyOf( |
|
labelOffset |
anyOf( |
|
labelOpacity |
anyOf( |
|
labelOverlap |
anyOf( |
The strategy to use for resolving overlap of axis labels. If Default value: |
labelPadding |
anyOf( |
|
labelSeparation |
anyOf( |
|
labels |
anyOf( |
|
maxExtent |
anyOf( |
|
minExtent |
anyOf( |
|
offset |
|
The offset, in pixels, by which to displace the axis from the edge of the enclosing group or data rectangle. Default value: derived from the axis
config’s |
orient |
anyOf( |
The orientation of the axis. One of Default value: |
position |
anyOf( |
The anchor position of the axis in pixels. For x-axes with top or bottom orientation, this sets the axis group x coordinate. For y-axes with left or right orientation, this sets the axis group y coordinate. Default value: |
style |
anyOf( |
A string or array of strings indicating the name of custom styles to apply to the axis. A style is a named collection of axis property defined within the style configuration. If style is an array, later styles will override earlier styles. Default value: (none) Note: Any specified style will
augment the default style. For example, an x-axis mark with |
tickBand |
anyOf([‘center’, ‘extent’], |
|
tickCap |
||
tickColor |
anyOf(anyOf( |
|
tickCount |
anyOf( |
A desired number of ticks, for axes visualizing quantitative scales. The resulting number may be different so that values are “nice” (multiples of 2, 5, 10) and lie within the underlying scale’s range. For scales of type Default value: Determine using a formula |
tickDash |
anyOf(array( |
|
tickDashOffset |
anyOf( |
|
tickExtra |
anyOf( |
|
tickMinStep |
anyOf( |
The minimum desired step between axis ticks, in terms of scale domain values. For example,
a value of |
tickOffset |
anyOf( |
|
tickOpacity |
anyOf( |
|
tickRound |
anyOf( |
|
tickSize |
anyOf( |
|
tickWidth |
anyOf( |
|
ticks |
anyOf( |
|
title |
anyOf( |
A title for the field. If Default value: derived from the field’s name and transformation function
( Notes:
|
titleAlign |
||
titleAnchor |
anyOf( |
|
titleAngle |
anyOf( |
|
titleBaseline |
anyOf( |
|
titleColor |
||
titleFont |
anyOf( |
|
titleFontSize |
anyOf( |
|
titleFontStyle |
||
titleFontWeight |
anyOf( |
|
titleLimit |
anyOf( |
|
titleLineHeight |
anyOf( |
|
titleOpacity |
anyOf( |
|
titlePadding |
anyOf( |
|
titleX |
anyOf( |
|
titleY |
anyOf( |
|
translate |
anyOf( |
|
values |
anyOf(array( |
Explicitly set the visible axis tick values. |
zindex |
|
A non-negative integer indicating the z-index of the axis. If zindex is 0, axes should be
drawn behind all chart elements. To put them in front, set Default value: |
Header Configuration
The Chart.configure_header()
method allows configuration of facet headers,
including the font, color, size, and position of the title and labels.
Here is an example:
import altair as alt
from vega_datasets import data
source = data.cars.url
chart = alt.Chart(source).mark_point().encode(
x='Horsepower:Q',
y='Miles_per_Gallon:Q',
color='Origin:N',
column='Origin:N'
).properties(
width=180,
height=180
)
chart.configure_header(
titleColor='green',
titleFontSize=14,
labelColor='red',
labelFontSize=14
)
Property |
Type |
Description |
---|---|---|
format |
anyOf( |
When used with the default
See the format documentation for more examples. When used with a custom Default value: Derived from numberFormat config for number format and from timeFormat config for time format. |
formatType |
|
The format type for labels. One of Default value: - |
labelAlign |
Horizontal text alignment of header labels. One of |
|
labelAnchor |
The anchor position for placing the labels. One of |
|
labelAngle |
|
The rotation angle of the header labels. Default value: |
labelBaseline |
anyOf( |
The vertical text baseline for the header labels. One of |
labelColor |
The color of the header label, can be in hex color code or regular color name. |
|
labelExpr |
|
Vega expression for customizing labels. Note: The label text and value can be assessed via the |
labelFont |
anyOf( |
The font of the header label. |
labelFontSize |
anyOf( |
The font size of the header label, in pixels. |
labelFontStyle |
The font style of the header label. |
|
labelFontWeight |
anyOf( |
The font weight of the header label. |
labelLimit |
anyOf( |
The maximum length of the header label in pixels. The text value will be automatically truncated if the rendered size exceeds the limit. Default value: |
labelLineHeight |
anyOf( |
Line height in pixels for multi-line header labels or title text with |
labelOrient |
The orientation of the header label. One of |
|
labelPadding |
anyOf( |
The padding, in pixel, between facet header’s label and the plot. Default value: |
labels |
|
A boolean flag indicating if labels should be included as part of the header. Default value: |
orient |
Shortcut for setting both labelOrient and titleOrient. |
|
title |
|
Set to null to disable title for the axis, legend, or header. |
titleAlign |
Horizontal text alignment (to the anchor) of header titles. |
|
titleAnchor |
The anchor position for placing the title. One of |
|
titleAngle |
|
The rotation angle of the header title. Default value: |
titleBaseline |
anyOf( |
The vertical text baseline for the header title. One of Default value: |
titleColor |
Color of the header title, can be in hex color code or regular color name. |
|
titleFont |
anyOf( |
Font of the header title. (e.g., |
titleFontSize |
anyOf( |
Font size of the header title. |
titleFontStyle |
The font style of the header title. |
|
titleFontWeight |
anyOf( |
Font weight of the header title. This can be either a string (e.g |
titleLimit |
anyOf( |
The maximum length of the header title in pixels. The text value will be automatically truncated if the rendered size exceeds the limit. Default value: |
titleLineHeight |
anyOf( |
Line height in pixels for multi-line header title text or title text with |
titleOrient |
The orientation of the header title. One of |
|
titlePadding |
anyOf( |
The padding, in pixel, between facet header’s title and the label. Default value: |
Legend Configuration
The Chart.configure_legend()
allows you to customize the appearance of chart
legends, including location, fonts, bounding boxes, colors, and more.
Here is an example:
import altair as alt
from vega_datasets import data
source = data.cars.url
chart = alt.Chart(source).mark_point().encode(
x='Horsepower:Q',
y='Miles_per_Gallon:Q',
color='Origin:N'
)
chart.configure_legend(
strokeColor='gray',
fillColor='#EEEEEE',
padding=10,
cornerRadius=10,
orient='top-right'
)
Additional properties are summarized in the following table:
Property |
Type |
Description |
---|---|---|
aria |
anyOf( |
|
clipHeight |
anyOf( |
|
columnPadding |
anyOf( |
|
columns |
anyOf( |
|
cornerRadius |
anyOf( |
|
description |
anyOf( |
|
direction |
The direction of the legend, one of Default value: - For top-/bottom- |
|
disable |
|
Disable legend by default |
fillColor |
||
gradientDirection |
anyOf( |
|
gradientHorizontalMaxLength |
|
Max legend length for a horizontal gradient when Default value: |
gradientHorizontalMinLength |
|
Min legend length for a horizontal gradient when Default value: |
gradientLabelLimit |
anyOf( |
|
gradientLabelOffset |
anyOf( |
|
gradientLength |
anyOf( |
|
gradientOpacity |
anyOf( |
|
gradientStrokeColor |
||
gradientStrokeWidth |
anyOf( |
|
gradientThickness |
anyOf( |
|
gradientVerticalMaxLength |
|
Max legend length for a vertical gradient when Default value: |
gradientVerticalMinLength |
|
Min legend length for a vertical gradient when Default value: |
gridAlign |
anyOf( |
|
labelAlign |
||
labelBaseline |
anyOf( |
|
labelColor |
||
labelFont |
anyOf( |
|
labelFontSize |
anyOf( |
|
labelFontStyle |
||
labelFontWeight |
anyOf( |
|
labelLimit |
anyOf( |
|
labelOffset |
anyOf( |
|
labelOpacity |
anyOf( |
|
labelOverlap |
anyOf( |
The strategy to use for resolving overlap of labels in gradient legends. If Default value: |
labelPadding |
anyOf( |
|
labelSeparation |
anyOf( |
|
layout |
||
legendX |
anyOf( |
|
legendY |
anyOf( |
|
offset |
anyOf( |
|
orient |
The orientation of the legend, which determines how the legend is positioned within the
scene. One of Default value: |
|
padding |
anyOf( |
|
rowPadding |
anyOf( |
|
strokeColor |
||
strokeDash |
anyOf(array( |
|
strokeWidth |
anyOf( |
|
symbolBaseFillColor |
||
symbolBaseStrokeColor |
||
symbolDash |
anyOf(array( |
|
symbolDashOffset |
anyOf( |
|
symbolDirection |
anyOf( |
|
symbolFillColor |
||
symbolLimit |
anyOf( |
|
symbolOffset |
anyOf( |
|
symbolOpacity |
anyOf( |
|
symbolSize |
anyOf( |
|
symbolStrokeColor |
||
symbolStrokeWidth |
anyOf( |
|
symbolType |
anyOf( |
|
tickCount |
||
title |
|
Set to null to disable title for the axis, legend, or header. |
titleAlign |
||
titleAnchor |
anyOf( |
|
titleBaseline |
anyOf( |
|
titleColor |
||
titleFont |
anyOf( |
|
titleFontSize |
anyOf( |
|
titleFontStyle |
||
titleFontWeight |
anyOf( |
|
titleLimit |
anyOf( |
|
titleLineHeight |
anyOf( |
|
titleOpacity |
anyOf( |
|
titleOrient |
||
titlePadding |
anyOf( |
|
unselectedOpacity |
|
The opacity of unselected legend entries. Default value: 0.35. |
zindex |
anyOf( |
Mark and Mark Style Configuration
The mark configuration can be set using the Chart.configure_mark()
method, which sets the default properties for all marks in the chart.
In addition, the config object also provides mark-specific configuration
using the mark type (e.g. Chart.configure_area()
)
for
defining default properties for each mark.
For general configuration of all mark types, use:
-
Chart.configure_mark()
For configurations specific to particular mark types, use:
-
Chart.configure_area()
-
Chart.configure_bar()
-
Chart.configure_circle()
-
Chart.configure_geoshape()
-
Chart.configure_line()
-
Chart.configure_point()
-
Chart.configure_rect()
-
Chart.configure_rule()
-
Chart.configure_square()
-
Chart.configure_text()
-
Chart.configure_tick()
-
Chart.configure_trail()
Each of the above methods accepts the following properties:
Property |
Type |
Description |
---|---|---|
align |
The horizontal alignment of the text or ranged marks (area, bar, image, rect, rule). One of
Note: Expression reference is not supported for range marks. |
|
angle |
anyOf( |
|
aria |
anyOf( |
|
ariaRole |
anyOf( |
|
ariaRoleDescription |
anyOf( |
|
aspect |
anyOf( |
|
baseline |
anyOf( |
For text marks, the vertical text baseline. One of For range marks, the vertical alignment of the marks. One of Note: Expression reference is not supported for range marks. |
blend |
||
color |
Default color. Default value: ■ Note: - This property cannot be used in a style config. -
The |
|
cornerRadius |
anyOf( |
|
cornerRadiusBottomLeft |
anyOf( |
|
cornerRadiusBottomRight |
anyOf( |
|
cornerRadiusTopLeft |
anyOf( |
|
cornerRadiusTopRight |
anyOf( |
|
cursor |
||
description |
anyOf( |
|
dir |
anyOf( |
|
dx |
anyOf( |
|
dy |
anyOf( |
|
ellipsis |
anyOf( |
|
endAngle |
anyOf( |
|
fill |
Default fill color. This property has higher precedence than Default value: (None) |
|
fillOpacity |
anyOf( |
|
filled |
|
Whether the mark’s color should be used as fill color instead of stroke color. Default value: Note: This property cannot be used in a style config. |
font |
anyOf( |
|
fontSize |
anyOf( |
|
fontStyle |
||
fontWeight |
anyOf( |
|
height |
anyOf( |
|
href |
||
innerRadius |
anyOf( |
The inner radius in pixels of arc marks. |
interpolate |
anyOf( |
|
invalid |
[‘filter’, None] |
Defines how Vega-Lite should handle marks for invalid values ( |
limit |
anyOf( |
|
lineBreak |
anyOf( |
|
lineHeight |
anyOf( |
|
opacity |
anyOf( |
The overall opacity (value between [0,1]). Default value: |
order |
[null, boolean] |
For line and trail marks, this |
orient |
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 |
|
outerRadius |
anyOf( |
The outer radius in pixels of arc marks. |
padAngle |
anyOf( |
|
radius |
anyOf( |
For arc mark, the primary (outer) radius in pixels. For text marks, polar coordinate radial offset, in pixels, of the text from the origin
determined by the |
radius2 |
anyOf( |
The secondary (inner) radius in pixels of arc marks. |
shape |
anyOf(anyOf( |
|
size |
anyOf( |
Default size for marks. - For Default value: - |
smooth |
anyOf( |
|
startAngle |
anyOf( |
|
stroke |
Default stroke color. This property has higher precedence than Default value: (None) |
|
strokeCap |
||
strokeDash |
anyOf(array( |
|
strokeDashOffset |
anyOf( |
|
strokeJoin |
anyOf( |
|
strokeMiterLimit |
anyOf( |
|
strokeOffset |
anyOf( |
|
strokeOpacity |
anyOf( |
|
strokeWidth |
anyOf( |
|
tension |
anyOf( |
|
text |
||
theta |
anyOf( |
|
theta2 |
anyOf( |
The end angle of arc marks in radians. A value of 0 indicates up or “north”, increasing values proceed clockwise. |
timeUnitBand |
|
Default relative band size for a time unit. If set to |
timeUnitBandPosition |
|
Default relative band position for a time unit. If set to |
tooltip |
anyOf( |
The tooltip text string to show upon mouse hover or an object defining which fields should the tooltip be derived from.
See the Default value: |
url |
||
width |
anyOf( |
|
x |
anyOf( |
X coordinates of the marks, or width of horizontal The |
x2 |
anyOf( |
X2 coordinates for ranged The |
y |
anyOf( |
Y coordinates of the marks, or height of vertical The |
y2 |
anyOf( |
Y2 coordinates for ranged The |
In addition to the default mark properties above, default values can be
further customized using named styles defined as keyword arguments to
the Chart.configure_style()
method.
Styles can then be invoked by including a style property within a mark
definition object.
Scale Configuration
Scales can be configured using Chart.configure_scale()
,
which has
the following properties:
Property |
Type |
Description |
---|---|---|
bandPaddingInner |
anyOf( |
Default inner padding for Default value: - |
bandPaddingOuter |
anyOf( |
Default outer padding for Default value: |
barBandPaddingInner |
anyOf( |
Default inner padding for Default value: |
clamp |
anyOf( |
If true, values that exceed the data domain are clamped to either the minimum or maximum range value |
continuousPadding |
anyOf( |
Default padding for continuous scales. Default: |
maxBandSize |
|
The default max value for mapping quantitative fields to bar’s size/bandSize. If undefined (default), we will use the axis’s size (width or height) - 1. |
maxFontSize |
|
The default max value for mapping quantitative fields to text’s size/fontSize. Default value: |
maxOpacity |
|
Default max opacity for mapping a field to opacity. Default value: |
maxSize |
|
Default max value for point size scale. |
maxStrokeWidth |
|
Default max strokeWidth for the scale of strokeWidth for rule and line marks and of size for trail marks. Default value: |
minBandSize |
|
The default min value for mapping quantitative fields to bar and tick’s size/bandSize scale with zero=false. Default value: |
minFontSize |
|
The default min value for mapping quantitative fields to tick’s size/fontSize scale with zero=false Default value: |
minOpacity |
|
Default minimum opacity for mapping a field to opacity. Default value: |
minSize |
|
Default minimum value for point size scale with zero=false. Default value: |
minStrokeWidth |
|
Default minimum strokeWidth for the scale of strokeWidth for rule and line marks and of size for trail marks with zero=false. Default value: |
pointPadding |
anyOf( |
Default outer padding for Default value: |
quantileCount |
|
Default range cardinality for Default value: |
quantizeCount |
|
Default range cardinality for Default value: |
rectBandPaddingInner |
anyOf( |
Default inner padding for Default value: |
round |
anyOf( |
If true, rounds numeric output values to integers. This can be helpful for snapping to the
pixel grid. (Only available for |
useUnaggregatedDomain |
|
Use the source data range before aggregation as scale domain instead of aggregated data for aggregate axis. This is equivalent to setting This property only works with aggregate functions that produce values within the raw data
domain ( Default value: |
xReverse |
anyOf( |
Reverse x-scale by default (useful for right-to-left charts). |
Scale Range Configuration
Scale ranges can be configured using Chart.configure_range()
,
which has
the following properties:
Property |
Type |
Description |
---|---|---|
category |
anyOf( |
Default color scheme for categorical data. |
diverging |
anyOf( |
Default color scheme for diverging quantitative ramps. |
heatmap |
anyOf( |
Default color scheme for quantitative heatmaps. |
ordinal |
anyOf( |
Default color scheme for rank-ordered data. |
ramp |
anyOf( |
Default color scheme for sequential quantitative ramps. |
symbol |
array( |
Array of symbol names or paths for the default shape palette. |
Projection Configuration
Chart.configure_projection()
Property |
Type |
Description |
---|---|---|
center |
|
The projection’s center, a two-element array of longitude and latitude in degrees. Default value: |
clipAngle |
|
The projection’s clipping circle radius to the specified angle in degrees. If |
clipExtent |
|
The projection’s viewport clip extent to the specified bounds in pixels. The extent bounds
are specified as an array |
coefficient |
|
|
distance |
|
|
extent |
|
|
fit |
||
fraction |
|
|
lobes |
|
|
parallel |
|
|
parallels |
array( |
For conic projections, the two standard parallels that define the map layout. The default depends on the specific conic projection used. |
pointRadius |
|
The default radius (in pixels) to use when drawing GeoJSON Default value: |
precision |
|
The threshold for the projection’s adaptive resampling to the specified value
in pixels. This value corresponds to the Douglas–Peucker
distance. If precision is not specified, returns the projection’s current resampling
precision which defaults to |
radius |
|
|
ratio |
|
|
reflectX |
|
|
reflectY |
|
|
rotate |
anyOf( |
The projection’s three-axis rotation to the specified angles, which must be a two- or
three-element array of numbers [ Default value: |
scale |
|
The projection’s scale (zoom) factor, overriding automatic fitting. The default scale is projection-specific. The scale factor corresponds linearly to the distance between projected points; however, scale factor values are not equivalent across projections. |
size |
|
|
spacing |
|
|
tilt |
|
|
translate |
|
The projection’s translation offset as a two-element array |
type |
The cartographic projection to use. This value is case-insensitive, for example Default value: |
Selection Configuration
Chart.configure_selection()
Property |
Type |
Description |
---|---|---|
interval |
The default definition for an For instance, setting |
|
multi |
The default definition for a For instance, setting |
|
single |
The default definition for a For instance, setting |
Title Configuration
The Chart.configure_title()
method allows configuration of the chart
title, including the font, color, placement, and orientation.
Here is an example:
import altair as alt
from vega_datasets import data
source = data.cars.url
chart = alt.Chart(source).mark_point().encode(
x='Horsepower:Q',
y='Miles_per_Gallon:Q',
).properties(
title='Cars Data'
)
chart.configure_title(
fontSize=20,
font='Courier',
anchor='start',
color='gray'
)
Additional title configuration options are listed in the following table:
Property |
Type |
Description |
---|---|---|
align |
Horizontal text alignment for title text. One of |
|
anchor |
anyOf( |
|
angle |
anyOf( |
|
aria |
anyOf( |
|
baseline |
Vertical text baseline for title and subtitle text. One of |
|
color |
||
dx |
anyOf( |
|
dy |
anyOf( |
|
font |
anyOf( |
|
fontSize |
anyOf( |
|
fontStyle |
||
fontWeight |
anyOf( |
|
frame |
anyOf(anyOf( |
|
limit |
anyOf( |
|
lineHeight |
anyOf( |
|
offset |
anyOf( |
|
orient |
anyOf( |
|
subtitleColor |
||
subtitleFont |
anyOf( |
|
subtitleFontSize |
anyOf( |
|
subtitleFontStyle |
||
subtitleFontWeight |
anyOf( |
|
subtitleLineHeight |
anyOf( |
|
subtitlePadding |
anyOf( |
|
zindex |
anyOf( |
View Configuration
The Chart.configure_view()
method allows you to configure aspects of the
chart’s view, i.e. the area of the screen in which the data and scales are
drawn. Here is an example to demonstrate some of the visual features that can
be controlled:
import altair as alt
from vega_datasets import data
source = data.cars.url
chart = alt.Chart(source).mark_point().encode(
x='Horsepower:Q',
y='Miles_per_Gallon:Q',
)
chart.configure_view(
continuousHeight=200,
continuousWidth=200,
strokeWidth=4,
fill='#FFEEDD',
stroke='red',
)
Additional properties are summarized in the following table:
Property |
Type |
Description |
---|---|---|
clip |
|
Whether the view should be clipped. |
continuousHeight |
|
The default height when the plot has a continuous y-field for x or latitude, or has arc marks. Default value: |
continuousWidth |
|
The default width when the plot has a continuous field for x or longitude, or has arc marks. Default value: |
cornerRadius |
anyOf( |
|
cursor |
The mouse cursor used over the view. Any valid CSS cursor type can be used. |
|
discreteHeight |
anyOf( |
The default height when the plot has non arc marks and either a discrete y-field or no
y-field. The height can be either a number indicating a fixed height or an object in the
form of Default value: a step size based on |
discreteWidth |
anyOf( |
The default width when the plot has non-arc marks and either a discrete x-field or no
x-field. The width can be either a number indicating a fixed width or an object in the form
of Default value: a step size based on |
fill |
The fill color. Default value: |
|
fillOpacity |
anyOf( |
|
height |
|
Default height Deprecated: Since Vega-Lite 4.0. Please use continuousHeight and discreteHeight instead. |
opacity |
anyOf( |
The overall opacity (value between [0,1]). Default value: |
step |
|
Default step size for x-/y- discrete fields. |
stroke |
The stroke color. Default value: |
|
strokeCap |
||
strokeDash |
anyOf(array( |
|
strokeDashOffset |
anyOf( |
|
strokeJoin |
anyOf( |
|
strokeMiterLimit |
anyOf( |
|
strokeOpacity |
anyOf( |
|
strokeWidth |
anyOf( |
|
width |
|
Default width Deprecated: Since Vega-Lite 4.0. Please use continuousWidth and discreteWidth instead. |
Altair Themes
Altair makes available a theme registry that lets users apply chart configurations
globally within any Python session. This is done via the alt.themes
object.
The themes registry consists of functions which define a specification dictionary that will be added to every created chart. For example, the default theme configures the default size of a single chart:
>>> import altair as alt
>>> default = alt.themes.get()
>>> default()
{'config': {'view': {'continuousWidth': 400, 'continuousHeight': 300}}}
You can see that any chart you create will have this theme applied, and these configurations added to its specification:
import altair as alt
from vega_datasets import data
chart = alt.Chart(data.cars.url).mark_point().encode(
x='Horsepower:Q',
y='Miles_per_Gallon:Q'
)
chart.to_dict()
{'config': {'view': {'continuousWidth': 400, 'continuousHeight': 300}}, 'data': {'url': 'https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/cars.json'}, 'mark': 'point', 'encoding': {'x': {'field': 'Horsepower', 'type': 'quantitative'}, 'y': {'field': 'Miles_per_Gallon', 'type': 'quantitative'}}, '$schema': 'https://vega.github.io/schema/vega-lite/v4.17.0.json'}
The rendered chart will then reflect these configurations:
chart
Changing the Theme
If you would like to enable any other theme for the length of your Python session,
you can call alt.themes.enable(theme_name)
.
For example, Altair includes a theme in which the chart background is opaque
rather than transparent:
alt.themes.enable('opaque')
chart.to_dict()
{'config': {'background': 'white', 'view': {'continuousWidth': 400, 'continuousHeight': 300}}, 'data': {'url': 'https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/cars.json'}, 'mark': 'point', 'encoding': {'x': {'field': 'Horsepower', 'type': 'quantitative'}, 'y': {'field': 'Miles_per_Gallon', 'type': 'quantitative'}}, '$schema': 'https://vega.github.io/schema/vega-lite/v4.17.0.json'}
chart
Notice that the background color of the chart is now set to white.
If you would like no theme applied to your chart, you can use the
theme named 'none'
:
alt.themes.enable('none')
chart.to_dict()
{'data': {'url': 'https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/cars.json'}, 'mark': 'point', 'encoding': {'x': {'field': 'Horsepower', 'type': 'quantitative'}, 'y': {'field': 'Miles_per_Gallon', 'type': 'quantitative'}}, '$schema': 'https://vega.github.io/schema/vega-lite/v4.17.0.json'}
chart
Because the view configuration is not set, the chart is smaller than the default rendering.
If you would like to use any theme just for a single chart, you can use the
with
statement to
enable a temporary theme:
with alt.themes.enable('default'):
spec = chart.to_json()
Currently Altair does not offer many built-in themes, but we plan to add more options in the future.
Defining a Custom Theme
The theme registry also allows defining and registering custom themes. A theme is simply a function that returns a dictionary of default values to be added to the chart specification at rendering time, which is then registered and activated.
For example, here we define a theme in which all marks are drawn with black fill unless otherwise specified:
import altair as alt
from vega_datasets import data
# define the theme by returning the dictionary of configurations
def black_marks():
return {
'config': {
'view': {
'height': 300,
'width': 400,
},
'mark': {
'color': 'black',
'fill': 'black'
}
}
}
# register the custom theme under a chosen name
alt.themes.register('black_marks', black_marks)
# enable the newly registered theme
alt.themes.enable('black_marks')
# draw the chart
cars = data.cars.url
alt.Chart(cars).mark_point().encode(
x='Horsepower:Q',
y='Miles_per_Gallon:Q'
)
If you want to restore the default theme, use:
alt.themes.enable('default')
For more ideas on themes, see the Vega Themes repository.