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()
Concat and Facet Configuration
Chart.configure_concat()
,Chart.configure_facet()
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 accepts the following parameters:
Click to show table
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. |
locale |
Locale definitions for string parsing and formatting of number and date values. The locale object should contain |
|
mark |
Mark Config |
|
normalizedNumberFormat |
|
If normalizedNumberFormatType is not specified, D3 number format for axis labels, text marks, and tooltips of normalized stacked fields (fields with If |
normalizedNumberFormatType |
|
Custom format type for Default value: |
numberFormat |
|
If numberFormatType is not specified, D3 number format for guide labels, text marks, and tooltips of non-normalized fields (fields without If |
numberFormatType |
|
Custom format type for Default value: |
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 or selections 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: |
timeFormatType |
|
Custom format type for 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()
Chart.configure_axisDiscrete()
Chart.configure_axisPoint()
Chart.configure_axisQuantitative()
Chart.configure_axisTemporal()
Chart.configure_axisXBand()
Chart.configure_axisXDiscrete()
Chart.configure_axisXPoint()
Chart.configure_axisXQuantitative()
Chart.configure_axisXTemporal()
Chart.configure_axisYBand()
Chart.configure_axisYDiscrete()
Chart.configure_axisYPoint()
Chart.configure_axisYQuantitative()
Chart.configure_axisYTemporal()
They have the following properties:
Click to show table
Property |
Type |
Description |
---|---|---|
aria |
anyOf( |
A boolean flag indicating if ARIA attributes should be included (SVG output only). If Default value: |
bandPosition |
anyOf( |
An interpolation fraction indicating where, for Default value: |
description |
anyOf( |
A text description of this axis for ARIA accessibility (SVG output only). If the |
disable |
|
Disable axis by default. |
domain |
|
A boolean flag indicating if the domain (the axis baseline) should be included as part of the axis. Default value: |
domainCap |
The stroke cap for the domain line’s ending style. One of Default value: |
|
domainColor |
Color of axis domain line. Default value: |
|
domainDash |
anyOf(array( |
An array of alternating [stroke, space] lengths for dashed domain lines. |
domainDashOffset |
anyOf( |
The pixel offset at which to start drawing with the domain dash array. |
domainOpacity |
anyOf( |
Opacity of the axis domain line. |
domainWidth |
anyOf( |
Stroke width of axis domain line Default value: |
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 |
The stroke cap for grid lines’ ending style. One of Default value: |
|
gridColor |
anyOf(anyOf( |
Color of gridlines. Default value: |
gridDash |
anyOf(array( |
An array of alternating [stroke, space] lengths for dashed grid lines. |
gridDashOffset |
anyOf( |
The pixel offset at which to start drawing with the grid dash array. |
gridOpacity |
anyOf( |
The stroke opacity of grid (value between [0,1]) Default value: |
gridWidth |
anyOf( |
The grid width, in pixels. Default value: |
labelAlign |
anyOf( |
Horizontal text alignment of axis tick labels, overriding the default setting for the current axis orientation. |
labelAngle |
anyOf( |
The rotation angle of the axis labels. Default value: |
labelBaseline |
Vertical text baseline of axis tick labels, overriding the default setting for the current axis orientation. One of |
|
labelBound |
anyOf([number, boolean], |
Indicates if labels should be hidden if they exceed the axis range. If Default value: |
labelColor |
anyOf(anyOf( |
The color of the tick 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 |
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( |
Indicates the number of pixels by which to offset flush-adjusted labels. For example, a value of Default value: |
labelFont |
anyOf( |
The font of the tick label. |
labelFontSize |
anyOf( |
The font size of the label, in pixels. |
labelFontStyle |
Font style of the title. |
|
labelFontWeight |
Font weight of axis tick labels. |
|
labelLimit |
anyOf( |
Maximum allowed pixel width of axis tick labels. Default value: |
labelLineHeight |
anyOf( |
Line height in pixels for multi-line label text or label text with |
labelOffset |
anyOf( |
Position offset in pixels to apply to labels, in addition to tickOffset. Default value: |
labelOpacity |
anyOf( |
The opacity of the labels. |
labelOverlap |
anyOf( |
The strategy to use for resolving overlap of axis labels. If Default value: |
labelPadding |
anyOf( |
The padding in pixels between labels and ticks. Default value: |
labelSeparation |
anyOf( |
The minimum separation that must be between label bounding boxes for them to be considered non-overlapping (default |
labels |
|
A boolean flag indicating if labels should be included as part of the axis. Default value: |
maxExtent |
anyOf( |
The maximum extent in pixels that axis ticks and labels should use. This determines a maximum offset value for axis titles. Default value: |
minExtent |
anyOf( |
The minimum extent in pixels that axis ticks and labels should use. This determines a minimum offset value for axis titles. Default value: |
offset |
anyOf( |
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’], |
For band scales, indicates if ticks and grid lines should be placed at the |
tickCap |
The stroke cap for the tick lines’ ending style. One of Default value: |
|
tickColor |
anyOf(anyOf( |
The color of the axis’s tick. Default value: |
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( |
An array of alternating [stroke, space] lengths for dashed tick mark lines. |
tickDashOffset |
anyOf( |
The pixel offset at which to start drawing with the tick mark dash array. |
tickExtra |
|
Boolean flag indicating if an extra axis tick should be added for the initial position of the axis. This flag is useful for styling axes for |
tickMinStep |
anyOf( |
The minimum desired step between axis ticks, in terms of scale domain values. For example, a value of |
tickOffset |
anyOf( |
Position offset in pixels to apply to ticks, labels, and gridlines. |
tickOpacity |
anyOf( |
Opacity of the ticks. |
tickRound |
|
Boolean flag indicating if pixel position values should be rounded to the nearest integer. Default value: |
tickSize |
anyOf( |
The size in pixels of axis ticks. Default value: |
tickWidth |
anyOf( |
The width, in pixels, of ticks. Default value: |
ticks |
|
Boolean value that determines whether the axis should include ticks. Default value: |
title |
anyOf( |
A title for the field. If Default value: derived from the field’s name and transformation function ( Notes:
|
titleAlign |
Horizontal text alignment of axis titles. |
|
titleAnchor |
anyOf( |
Text anchor position for placing axis titles. |
titleAngle |
anyOf( |
Angle in degrees of axis titles. |
titleBaseline |
anyOf( |
Vertical text baseline for axis titles. One of |
titleColor |
Color of the title, can be in hex color code or regular color name. |
|
titleFont |
anyOf( |
Font of the title. (e.g., |
titleFontSize |
anyOf( |
Font size of the title. |
titleFontStyle |
Font style of the title. |
|
titleFontWeight |
anyOf( |
Font weight of the title. This can be either a string (e.g |
titleLimit |
anyOf( |
Maximum allowed pixel width of axis titles. |
titleLineHeight |
anyOf( |
Line height in pixels for multi-line title text or title text with |
titleOpacity |
anyOf( |
Opacity of the axis title. |
titlePadding |
anyOf( |
The padding, in pixels, between title and axis. |
titleX |
anyOf( |
X-coordinate of the axis title relative to the axis group. |
titleY |
anyOf( |
Y-coordinate of the axis title relative to the axis group. |
translate |
anyOf( |
Coordinate space translation offset for axis layout. By default, axes are translated by a 0.5 pixel offset for both the x and y coordinates in order to align stroked lines with the pixel grid. However, for vector graphics output these pixel-specific adjustments may be undesirable, in which case translate can be changed (for example, to zero). Default value: |
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#
Header configuration defines default settings for headers including the font, color,
size, and position of the title and labels and can be set using
the Chart.configure_header()
method. 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
)
Additional property blocks can target more specific header types. The methods are the following:
Chart.configure_header()
Chart.configure_headerColumn()
Chart.configure_headerFacet()
Chart.configure_headerRow()
They have the following properties:
Click to show table
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:
Click to show table
Property |
Type |
Description |
---|---|---|
aria |
anyOf( |
A boolean flag indicating if ARIA attributes should be included (SVG output only). If Default value: |
clipHeight |
anyOf( |
The height in pixels to clip symbol legend entries and limit their size. |
columnPadding |
anyOf( |
The horizontal padding in pixels between symbol legend entries. Default value: |
columns |
anyOf( |
The number of columns in which to arrange symbol legend entries. A value of |
cornerRadius |
anyOf( |
Corner radius for the full legend. |
description |
anyOf( |
A text description of this legend for ARIA accessibility (SVG output only). If the |
direction |
The direction of the legend, one of Default value:
|
|
disable |
|
Disable legend by default |
fillColor |
Background fill color for the full legend. |
|
gradientDirection |
anyOf( |
The default direction ( Default value: |
gradientHorizontalMaxLength |
|
Max legend length for a horizontal gradient when Default value: |
gradientHorizontalMinLength |
|
Min legend length for a horizontal gradient when Default value: |
gradientLabelLimit |
anyOf( |
The maximum allowed length in pixels of color ramp gradient labels. |
gradientLabelOffset |
anyOf( |
Vertical offset in pixels for color ramp gradient labels. Default value: |
gradientLength |
anyOf( |
The length in pixels of the primary axis of a color gradient. This value corresponds to the height of a vertical gradient or the width of a horizontal gradient. Default value: |
gradientOpacity |
anyOf( |
Opacity of the color gradient. |
gradientStrokeColor |
The color of the gradient stroke, can be in hex color code or regular color name. Default value: |
|
gradientStrokeWidth |
anyOf( |
The width of the gradient stroke, in pixels. Default value: |
gradientThickness |
anyOf( |
The thickness in pixels of the color gradient. This value corresponds to the width of a vertical gradient or the height of a horizontal gradient. Default value: |
gradientVerticalMaxLength |
|
Max legend length for a vertical gradient when Default value: |
gradientVerticalMinLength |
|
Min legend length for a vertical gradient when Default value: |
gridAlign |
anyOf( |
The alignment to apply to symbol legends rows and columns. The supported string values are Default value: |
labelAlign |
The alignment of the legend label, can be left, center, or right. |
|
labelBaseline |
anyOf( |
The position of the baseline of legend label, can be Default value: |
labelColor |
The color of the legend label, can be in hex color code or regular color name. |
|
labelFont |
anyOf( |
The font of the legend label. |
labelFontSize |
anyOf( |
The font size of legend label. Default value: |
labelFontStyle |
The font style of legend label. |
|
labelFontWeight |
anyOf( |
The font weight of legend label. |
labelLimit |
anyOf( |
Maximum allowed pixel width of legend tick labels. Default value: |
labelOffset |
anyOf( |
The offset of the legend label. Default value: |
labelOpacity |
anyOf( |
Opacity of labels. |
labelOverlap |
anyOf( |
The strategy to use for resolving overlap of labels in gradient legends. If Default value: |
labelPadding |
anyOf( |
Padding in pixels between the legend and legend labels. |
labelSeparation |
anyOf( |
The minimum separation that must be between label bounding boxes for them to be considered non-overlapping (default |
layout |
||
legendX |
anyOf( |
Custom x-position for legend with orient “none”. |
legendY |
anyOf( |
Custom y-position for legend with orient “none”. |
offset |
anyOf( |
The offset in pixels by which to displace the legend from the data rectangle and axes. Default value: |
orient |
The orientation of the legend, which determines how the legend is positioned within the scene. One of Default value: |
|
padding |
anyOf( |
The padding between the border and content of the legend group. Default value: |
rowPadding |
anyOf( |
The vertical padding in pixels between symbol legend entries. Default value: |
strokeColor |
Border stroke color for the full legend. |
|
strokeDash |
anyOf(array( |
Border stroke dash pattern for the full legend. |
strokeWidth |
anyOf( |
Border stroke width for the full legend. |
symbolBaseFillColor |
Default fill color for legend symbols. Only applied if there is no Default value: |
|
symbolBaseStrokeColor |
Default stroke color for legend symbols. Only applied if there is no Default value: |
|
symbolDash |
anyOf(array( |
An array of alternating [stroke, space] lengths for dashed symbol strokes. |
symbolDashOffset |
anyOf( |
The pixel offset at which to start drawing with the symbol stroke dash array. |
symbolDirection |
anyOf( |
The default direction ( Default value: |
symbolFillColor |
The color of the legend symbol, |
|
symbolLimit |
anyOf( |
The maximum number of allowed entries for a symbol legend. Additional entries will be dropped. |
symbolOffset |
anyOf( |
Horizontal pixel offset for legend symbols. Default value: |
symbolOpacity |
anyOf( |
Opacity of the legend symbols. |
symbolSize |
anyOf( |
The size of the legend symbol, in pixels. Default value: |
symbolStrokeColor |
Stroke color for legend symbols. |
|
symbolStrokeWidth |
anyOf( |
The width of the symbol’s stroke. Default value: |
symbolType |
anyOf( |
The symbol shape. One of the plotting shapes Default value: |
tickCount |
The desired number of tick values for quantitative legends. |
|
title |
|
Set to null to disable title for the axis, legend, or header. |
titleAlign |
Horizontal text alignment for legend titles. Default value: |
|
titleAnchor |
anyOf( |
Text anchor position for placing legend titles. |
titleBaseline |
anyOf( |
Vertical text baseline for legend titles. One of Default value: |
titleColor |
The color of the legend title, can be in hex color code or regular color name. |
|
titleFont |
anyOf( |
The font of the legend title. |
titleFontSize |
anyOf( |
The font size of the legend title. |
titleFontStyle |
The font style of the legend title. |
|
titleFontWeight |
anyOf( |
The font weight of the legend title. This can be either a string (e.g |
titleLimit |
anyOf( |
Maximum allowed pixel width of legend titles. Default value: |
titleLineHeight |
anyOf( |
Line height in pixels for multi-line title text or title text with |
titleOpacity |
anyOf( |
Opacity of the legend title. |
titleOrient |
Orientation of the legend title. |
|
titlePadding |
anyOf( |
The padding, in pixels, between title and legend. Default value: |
unselectedOpacity |
|
The opacity of unselected legend entries. Default value: 0.35. |
zindex |
anyOf( |
The integer z-index indicating the layering of the legend group relative to other axis, mark, and legend groups. |
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_arc()
Chart.configure_area()
Chart.configure_bar()
Chart.configure_boxplot()
Chart.configure_circle()
Chart.configure_errorband()
Chart.configure_errorbar()
Chart.configure_geoshape()
Chart.configure_image()
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:
Click to show table
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( |
The rotation angle of the text, in degrees. |
aria |
anyOf( |
A boolean flag indicating if ARIA attributes should be included (SVG output only). If |
ariaRole |
anyOf( |
Sets the type of user interface element of the mark item for ARIA accessibility (SVG output only). If specified, this property determines the “role” attribute. Warning: this property is experimental and may be changed in the future. |
ariaRoleDescription |
anyOf( |
A human-readable, author-localized description for the role of the mark item for ARIA accessibility (SVG output only). If specified, this property determines the “aria-roledescription” attribute. Warning: this property is experimental and may be changed in the future. |
aspect |
anyOf( |
Whether to keep aspect ratio of image marks. |
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 |
The color blend mode for drawing an item on its current background. Any valid CSS mix-blend-mode value can be used. __Default value: |
|
color |
Default color. Default value: ■ Note:
|
|
cornerRadius |
anyOf( |
The radius in pixels of rounded rectangles or arcs’ corners. Default value: |
cornerRadiusBottomLeft |
anyOf( |
The radius in pixels of rounded rectangles’ bottom left corner. Default value: |
cornerRadiusBottomRight |
anyOf( |
The radius in pixels of rounded rectangles’ bottom right corner. Default value: |
cornerRadiusTopLeft |
anyOf( |
The radius in pixels of rounded rectangles’ top right corner. Default value: |
cornerRadiusTopRight |
anyOf( |
The radius in pixels of rounded rectangles’ top left corner. Default value: |
cursor |
The mouse cursor used over the mark. Any valid CSS cursor type can be used. |
|
description |
anyOf( |
A text description of the mark item for ARIA accessibility (SVG output only). If specified, this property determines the “aria-label” attribute. |
dir |
anyOf( |
The direction of the text. One of Default value: |
dx |
anyOf( |
The horizontal offset, in pixels, between the text label and its anchor point. The offset is applied after rotation by the angle property. |
dy |
anyOf( |
The vertical offset, in pixels, between the text label and its anchor point. The offset is applied after rotation by the angle property. |
ellipsis |
anyOf( |
The ellipsis string for text truncated in response to the limit parameter. Default value: |
endAngle |
anyOf( |
The end angle in radians for arc marks. A value of |
fill |
Default fill color. This property has higher precedence than Default value: (None) |
|
fillOpacity |
anyOf( |
The fill opacity (value between [0,1]). Default value: |
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( |
The typeface to set the text in (e.g., |
fontSize |
anyOf( |
The font size, in pixels. Default value: |
fontStyle |
The font style (e.g., |
|
fontWeight |
anyOf( |
The font weight. This can be either a string (e.g |
height |
anyOf( |
Height of the marks. |
href |
A URL to load upon mouse click. If defined, the mark acts as a hyperlink. |
|
innerRadius |
anyOf( |
The inner radius in pixels of arc marks. Default value: |
interpolate |
anyOf( |
The line interpolation method to use for line and area marks. One of the following:
|
invalid |
[‘filter’, None] |
Defines how Vega-Lite should handle marks for invalid values (
|
limit |
anyOf( |
The maximum length of the text mark in pixels. The text value will be automatically truncated if the rendered size exceeds the limit. Default value: |
lineBreak |
anyOf( |
A delimiter, such as a newline character, upon which to break text strings into multiple lines. This property is ignored if the text is array-valued. |
lineHeight |
anyOf( |
The line height in pixels (the spacing between subsequent lines of text) for multi-line text marks. |
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.
|
|
outerRadius |
anyOf( |
The outer radius in pixels of arc marks. Default value: |
padAngle |
anyOf( |
The angular padding applied to sides of the arc, in radians. |
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 Default value: |
radius2 |
anyOf( |
The secondary (inner) radius in pixels of arc marks. Default value: |
shape |
anyOf(anyOf( |
Shape of the point marks. Supported values include:
Default value: |
size |
anyOf( |
Default size for marks.
Default value:
|
smooth |
anyOf( |
A boolean flag (default true) indicating if the image should be smoothed when resized. If false, individual pixels should be scaled directly rather than interpolated with smoothing. For SVG rendering, this option may not work in some browsers due to lack of standardization. |
startAngle |
anyOf( |
The start angle in radians for arc marks. A value of |
stroke |
Default stroke color. This property has higher precedence than Default value: (None) |
|
strokeCap |
The stroke cap for line ending style. One of Default value: |
|
strokeDash |
anyOf(array( |
An array of alternating stroke, space lengths for creating dashed or dotted lines. |
strokeDashOffset |
anyOf( |
The offset (in pixels) into which to begin drawing with the stroke dash array. |
strokeJoin |
anyOf( |
The stroke line join method. One of Default value: |
strokeMiterLimit |
anyOf( |
The miter limit at which to bevel a line join. |
strokeOffset |
anyOf( |
The offset in pixels at which to draw the group stroke and fill. If unspecified, the default behavior is to dynamically offset stroked groups such that 1 pixel stroke widths align with the pixel grid. |
strokeOpacity |
anyOf( |
The stroke opacity (value between [0,1]). Default value: |
strokeWidth |
anyOf( |
The stroke width, in pixels. |
tension |
anyOf( |
Depending on the interpolation type, sets the tension parameter (for line and area marks). |
text |
Placeholder text if the |
|
theta |
anyOf( |
|
theta2 |
anyOf( |
The end angle of arc marks in radians. A value of 0 indicates up or “north”, increasing values proceed clockwise. |
timeUnitBandPosition |
|
Default relative band position for a time unit. If set to |
timeUnitBandSize |
|
Default relative band size 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 |
The URL of the image file for image marks. |
|
width |
anyOf( |
Width of the marks. |
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:
Click to show table
Property |
Type |
Description |
---|---|---|
bandPaddingInner |
anyOf( |
Default inner padding for Default value:
|
bandPaddingOuter |
anyOf( |
Default outer padding for Default value: |
bandWithNestedOffsetPaddingInner |
anyOf( |
Default inner padding for Default value: |
bandWithNestedOffsetPaddingOuter |
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 x/y scales. Default: The bar width for continuous x-scale of a vertical bar and continuous y-scale of a horizontal bar.; |
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: |
offsetBandPaddingInner |
anyOf( |
Default padding inner for xOffset/yOffset’s band scales. Default Value: |
offsetBandPaddingOuter |
anyOf( |
Default padding outer for xOffset/yOffset’s band scales. 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). |
zero |
|
Default Default value: |
Scale Range Configuration#
Scale ranges can be configured using Chart.configure_range()
, which has
the following properties:
Click to show table
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#
Projections can be configured using Chart.configure_projection()
,
which has the following properties:
Click to show table
Property |
Type |
Description |
---|---|---|
center |
anyOf( |
The projection’s center, a two-element array of longitude and latitude in degrees. Default value: |
clipAngle |
anyOf( |
The projection’s clipping circle radius to the specified angle in degrees. If |
clipExtent |
anyOf( |
The projection’s viewport clip extent to the specified bounds in pixels. The extent bounds are specified as an array |
coefficient |
anyOf( |
The coefficient parameter for the Default value: |
distance |
anyOf( |
For the Default value: |
extent |
anyOf( |
|
fit |
||
fraction |
anyOf( |
The fraction parameter for the Default value: |
lobes |
anyOf( |
The number of lobes in projections that support multi-lobe views: |
parallel |
anyOf( |
The parallel parameter for projections that support it: |
parallels |
anyOf(array( |
For conic projections, the two standard parallels that define the map layout. The default depends on the specific conic projection used. |
pointRadius |
anyOf( |
The default radius (in pixels) to use when drawing GeoJSON Default value: |
precision |
anyOf( |
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 |
anyOf( |
The radius parameter for the |
ratio |
anyOf( |
The ratio parameter for the |
reflectX |
anyOf( |
Sets whether or not the x-dimension is reflected (negated) in the output. |
reflectY |
anyOf( |
Sets whether or not the y-dimension is reflected (negated) in the output. |
rotate |
anyOf(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 |
anyOf( |
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 |
anyOf( |
Used in conjunction with fit, provides the width and height in pixels of the area to which the projection should be automatically fit. |
spacing |
anyOf( |
The spacing parameter for the Default value: |
tilt |
anyOf( |
The tilt angle (in degrees) for the Default value: |
translate |
anyOf( |
The projection’s translation offset as a two-element array |
type |
anyOf( |
The cartographic projection to use. This value is case-insensitive, for example Default value: |
Concat and Facet Configuration#
Various aspects of concat and facet charts can be configured using Chart.configure_concat()
and Chart.configure_facet()
, which have the following properties:
Click to show table
Property |
Type |
Description |
---|---|---|
columns |
|
The number of columns to include in the view composition layout. Default value: Note:
|
spacing |
|
The default spacing in pixels between composed sub-views. Default value: |
Selection Configuration#
Selections can be configured using Chart.configure_selection()
,
which has the following properties:
Click to show table
Property |
Type |
Description |
---|---|---|
interval |
The default definition for an For instance, setting |
|
point |
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:
Click to show table
Property |
Type |
Description |
---|---|---|
align |
Horizontal text alignment for title text. One of |
|
anchor |
anyOf( |
The anchor position for placing the title and subtitle text. One of |
angle |
anyOf( |
Angle in degrees of title and subtitle text. |
aria |
anyOf( |
A boolean flag indicating if ARIA attributes should be included (SVG output only). If Default value: |
baseline |
Vertical text baseline for title and subtitle text. One of |
|
color |
Text color for title text. |
|
dx |
anyOf( |
Delta offset for title and subtitle text x-coordinate. |
dy |
anyOf( |
Delta offset for title and subtitle text y-coordinate. |
font |
anyOf( |
Font name for title text. |
fontSize |
anyOf( |
Font size in pixels for title text. |
fontStyle |
Font style for title text. |
|
fontWeight |
anyOf( |
Font weight for title text. This can be either a string (e.g |
frame |
anyOf(anyOf( |
The reference frame for the anchor position, one of |
limit |
anyOf( |
The maximum allowed length in pixels of title and subtitle text. |
lineHeight |
anyOf( |
Line height in pixels for multi-line title text or title text with |
offset |
anyOf( |
The orthogonal offset in pixels by which to displace the title group from its position along the edge of the chart. |
orient |
anyOf( |
Default title orientation ( |
subtitleColor |
Text color for subtitle text. |
|
subtitleFont |
anyOf( |
Font name for subtitle text. |
subtitleFontSize |
anyOf( |
Font size in pixels for subtitle text. |
subtitleFontStyle |
Font style for subtitle text. |
|
subtitleFontWeight |
anyOf( |
Font weight for subtitle text. This can be either a string (e.g |
subtitleLineHeight |
anyOf( |
Line height in pixels for multi-line subtitle text. |
subtitlePadding |
anyOf( |
The padding in pixels between title and subtitle text. |
zindex |
anyOf( |
The integer z-index indicating the layering of the title group relative to other axis, mark, and legend groups. Default value: |
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:
Click to show 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( |
The radius in pixels of rounded rectangles or arcs’ corners. Default value: |
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( |
The fill opacity (value between [0,1]). Default value: |
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 |
The stroke cap for line ending style. One of Default value: |
|
strokeDash |
anyOf(array( |
An array of alternating stroke, space lengths for creating dashed or dotted lines. |
strokeDashOffset |
anyOf( |
The offset (in pixels) into which to begin drawing with the stroke dash array. |
strokeJoin |
anyOf( |
The stroke line join method. One of Default value: |
strokeMiterLimit |
anyOf( |
The miter limit at which to bevel a line join. |
strokeOpacity |
anyOf( |
The stroke opacity (value between [0,1]). Default value: |
strokeWidth |
anyOf( |
The stroke width, in pixels. |