Movatterモバイル変換


[0]ホーム

URL:


  • Overview
  • View Specification
  • Data / Datasets
  • Transform
  • Mark
  • Encoding
  • Projection
  • View Composition
  • Parameter
  • Config

  • Property Types
  • Tooltip
  • Invalid Data
  • Axis

    Edit this page

    Axes provide axis lines, ticks, and labels to convey how a positional range represents a data range. Simply put, axes visualize scales.

    By default, Vega-Lite automatically creates axes with default properties forx andy channels when they encode data fields. User can set theaxis property of x- or y-field definition to an object to customizeaxis properties or setaxis tonull to remove the axis.

    Besidesaxis property of a field definition, the configuration object (config) also providesaxis config (config: {axis: {...}}) for setting default axis properties for all axes.

    Documentation Overview

    Axis Properties

    // A Single View or a Layer Specification{  ...,  "mark/layer": ...,  "encoding": {    "x": {      "field": ...,      "type": ...,      "axis": {                // Axis        ...      },      ...    },    "y": ...,    ...  }}

    To customize axis, you can specify anaxis object inan encoding channel’s definition. This section lists all properties of axes.

    See also: Thisinteractive article demonstrates axes and legends in the underlying Vega language.

    General

    PropertyTypeDescription
    ariaBoolean |ExprRef

    A boolean flag indicating ifARIA attributes should be included (SVG output only). Iffalse, the “aria-hidden” attribute will be set on the output SVG group, removing the axis from the ARIA accessibility tree.

    Default value:true

    bandPositionNumber |ExprRef

    An interpolation fraction indicating where, forband scales, axis ticks should be positioned. A value of0 places ticks at the left edge of their bands. A value of0.5 places ticks in the middle of their bands.

    Default value:0.5

    descriptionString |ExprRef

    A text description of this axis forARIA accessibility (SVG output only). If thearia property is true, for SVG output the“aria-label” attribute will be set to this description. If the description is unspecified it will be automatically generated.

    maxExtentNumber |ExprRef

    The maximum extent in pixels that axis ticks and labels should use. This determines a maximum offset value for axis titles.

    Default value:undefined.

    minExtentNumber |ExprRef

    The minimum extent in pixels that axis ticks and labels should use. This determines a minimum offset value for axis titles.

    Default value:30 for y-axis;undefined for x-axis.

    orientString |ExprRef

    The orientation of the axis. One of"top","bottom","left" or"right". The orientation can be used to further specialize the axis type (e.g., a y-axis oriented towards the right edge of the chart).

    Default value:"bottom" for x-axes and"left" for y-axes.

    offsetNumber |ExprRef

    The offset, in pixels, by which to displace the axis from the edge of the enclosing group or data rectangle.

    Default value: derived from theaxis config’soffset (0 by default)

    positionNumber |ExprRef

    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:0

    styleString | String[]

    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 thestyle 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"style": "foo" will useconfig.axisX andconfig.style.foo (the specified style"foo" has higher precedence).

    translateNumber |ExprRef

    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:0.5

    zindexNumber

    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, setzindex to1 or more.

    Default value:0 (behind the marks).

    Example: Using AxisminExtent to Align Multi-View Plots

    By default, Vega-Lite automatically sets the axis extent (the space axis ticks and labels use). However, to align axes between multiple plots in multi-view displays, you can manually setminExtent (and optionallymaxExtent) to make the extent consistent across plots.

    Domain

    PropertyTypeDescription
    domainBoolean

    A boolean flag indicating if the domain (the axis baseline) should be included as part of the axis.

    Default value:true

    domainCapString |ExprRef

    The stroke cap for the domain line’s ending style. One of"butt","round" or"square".

    Default value:"butt"

    domainColorNull |Color |ExprRef

    Color of axis domain line.

    Default value:"gray".

    domainOpacityNumber |ExprRef

    Opacity of the axis domain line.

    domainWidthNumber |ExprRef

    Stroke width of axis domain line

    Default value:1

    domainDashNumber[] |ExprRef

    An array of alternating [stroke, space] lengths for dashed domain lines.

    domainDashOffsetNumber |ExprRef

    The pixel offset at which to start drawing with the domain dash array.

    Labels

    PropertyTypeDescription
    formatFormat

    The text format specifier for formatting number and date/time in labels of guides (axes, legends, headers) and text marks.

    If the format type is"number" (e.g., for quantitative fields), this is a D3’snumber format pattern string.

    If the format type is"time" (e.g., for temporal fields), this is either: a) D3’stime format pattern if you desire to set a static time format.

    b)dynamic time format specifier object if you desire to set a dynamic time format that uses different formats depending on the granularity of the input date (e.g., if the date lies on a year, month, date, hour, etc. boundary).

    When used with acustomformatType, this value will be passed asformat alongsidedatum.value to the registered function.

    Default value: Derived fromnumberFormat config for number format and fromtimeFormat config for time format.

    formatTypeString

    The format type for labels. One of"number","time", or aregistered custom format type.

    Default value:

    • "time" for temporal fields and ordinal and nominal fields withtimeUnit.
    • "number" for quantitative fields as well as ordinal and nominal fields withouttimeUnit.
    labelsBoolean

    A boolean flag indicating if labels should be included as part of the axis.

    Default value:true.

    labelAlignString |ExprRef |ConditionalAxisString

    Horizontal text alignment of axis tick labels, overriding the default setting for the current axis orientation.

    labelAngleNumber |ExprRef

    The rotation angle of the axis labels.

    Default value:-90 for nominal and ordinal fields;0 otherwise.

    labelBaselineString |ExprRef |ConditionalAxisString

    Vertical text baseline of axis tick labels, overriding the default setting for the current axis orientation. One of"alphabetic" (default),"top","middle","bottom","line-top", or"line-bottom". The"line-top" and"line-bottom" values operate similarly to"top" and"bottom", but are calculated relative to thelineHeight rather thanfontSize alone.

    labelBoundNumber | Boolean |ExprRef

    Indicates if labels should be hidden if they exceed the axis range. Iffalse (the default) no bounds overlap analysis is performed. Iftrue, labels will be hidden if they exceed the axis range by more than 1 pixel. If this property is a number, it specifies the pixel tolerance: the maximum amount by which a label bounding box may exceed the axis range.

    Default value:false.

    labelColorNull |Color |ExprRef |ConditionalAxisColor

    The color of the tick label, can be in hex color code or regular color name.

    labelExprString

    Vega expression for customizing labels.

    Note: The label text and value can be assessed via thelabel andvalue properties of the axis’s backingdatum object.

    labelFlushBoolean | 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:true for axis of a continuous x-scale. Otherwise,false.

    labelFlushOffsetNumber |ExprRef

    Indicates the number of pixels by which to offset flush-adjusted labels. For example, a value of2 will push flush-adjusted labels 2 pixels outward from the center of the axis. Offsets can help the labels better visually group with corresponding axis ticks.

    Default value:0.

    labelFontString |ExprRef |ConditionalAxisString

    The font of the tick label.

    labelFontSizeNumber |ExprRef |ConditionalAxisNumber

    The font size of the label, in pixels.

    labelFontStyleString |ExprRef |ConditionalAxisString

    Font style of the title.

    labelFontWeightString | Number |ExprRef |ConditionalAxisString

    Font weight of axis tick labels.

    labelLimitNumber |ExprRef

    Maximum allowed pixel width of axis tick labels.

    Default value:180

    labelLineHeightNumber |ExprRef

    Line height in pixels for multi-line label text or label text with"line-top" or"line-bottom" baseline.

    labelOffsetNumber |ExprRef |ConditionalAxisNumber

    Position offset in pixels to apply to labels, in addition to tickOffset.

    Default value:0

    labelOpacityNumber |ExprRef |ConditionalAxisNumber

    The opacity of the labels.

    labelOverlapString |ExprRef

    The strategy to use for resolving overlap of axis labels. Iffalse (the default), no overlap reduction is attempted. If set totrue or"parity", a strategy of removing every other label is used (this works well for standard linear axes). If set to"greedy", a linear scan of the labels is performed, removing any labels that overlaps with the last visible label (this often works better for log-scaled axes).

    Default value:true for non-nominal fields with non-log scales;"greedy" for log scales; otherwisefalse.

    labelPaddingNumber |ExprRef |ConditionalAxisNumber

    The padding in pixels between labels and ticks.

    Default value:2

    labelSeparationNumber |ExprRef

    The minimum separation that must be between label bounding boxes for them to be considered non-overlapping (default0). This property is ignored iflabelOverlap resolution is not enabled.

    See also:guide-label style config (common styles for axis,legend, andheader labels).

    Example: Using AxislabelExpr to Display Initial Letters of Month Name

    Ticks

    PropertyTypeDescription
    ticksBoolean

    Boolean value that determines whether the axis should include ticks.

    Default value:true

    tickBandString |ExprRef

    For band scales, indicates if ticks and grid lines should be placed at the"center" of a band (default) or at the band"extent"s to indicate intervals

    tickCapString |ExprRef

    The stroke cap for the tick lines’ ending style. One of"butt","round" or"square".

    Default value:"butt"

    tickColorNull |Color |ExprRef |ConditionalAxisColor

    The color of the axis’s tick.

    Default value:"gray"

    tickCountNumber | String | Object |ExprRef

    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"time" or"utc", the tick count can instead be a time interval specifier. Legal string values are"millisecond","second","minute","hour","day","week","month", and"year". Alternatively, an object-valued interval specifier of the form{"interval": "month", "step": 3} includes a desired number of interval steps. Here, ticks are generated for each quarter (Jan, Apr, Jul, Oct) boundary.

    Default value: Determine using a formulaceil(width/40) for x andceil(height/40) for y.

    tickDashNumber[] |ExprRef |ConditionalAxisNumberArray

    An array of alternating [stroke, space] lengths for dashed tick mark lines.

    tickExtraBoolean

    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 forband scales such that ticks are placed on band boundaries rather in the middle of a band. Use in conjunction with"bandPosition": 1 and an axis"padding" value of0.

    tickMinStepNumber |ExprRef

    The minimum desired step between axis ticks, in terms of scale domain values. For example, a value of1 indicates that ticks should not be less than 1 unit apart. IftickMinStep is specified, thetickCount value will be adjusted, if necessary, to enforce the minimum step value.

    tickOffsetNumber |ExprRef

    Position offset in pixels to apply to ticks, labels, and gridlines.

    tickOpacityNumber |ExprRef |ConditionalAxisNumber

    Opacity of the ticks.

    tickRoundBoolean

    Boolean flag indicating if pixel position values should be rounded to the nearest integer.

    Default value:true

    tickSizeNumber |ExprRef |ConditionalAxisNumber

    The size in pixels of axis ticks.

    Default value:5

    tickWidthNumber |ExprRef |ConditionalAxisNumber

    The width, in pixels, of ticks.

    Default value:1

    valuesNumber[] | String[] | Boolean[] |DateTime[] |ExprRef

    Explicitly set the visible axis tick values.

    Example: Using AxistickBand to Show Grid Between Marks

    UsingtickBand, we can change the axis ticks and gridlines to be drawn between marks.

    Title

    PropertyTypeDescription
    titleText | Null

    A title for the field. Ifnull, the title will be removed.

    Default value: derived from the field’s name and transformation function (aggregate,bin andtimeUnit). If the field has an aggregate function, the function is displayed as part of the title (e.g.,"Sum of Profit"). If the field is binned or has a time unit applied, the applied function is shown in parentheses (e.g.,"Profit (binned)","Transaction Date (year-month)"). Otherwise, the title is simply the field name.

    Notes:

    1) You can customize the default field title format by providing thefieldTitle property in theconfig orfieldTitle function via thecompile function’s options.

    2) If both field definition’stitle and axis, header, or legendtitle are defined, axis/header/legend title will be used.

    titleAlignString |ExprRef

    Horizontal text alignment of axis titles.

    titleAnchorNull | String |ExprRef

    Text anchor position for placing axis titles.

    titleAngleNumber |ExprRef

    Angle in degrees of axis titles.

    titleBaselineString |ExprRef

    Vertical text baseline for axis titles. One of"alphabetic" (default),"top","middle","bottom","line-top", or"line-bottom". The"line-top" and"line-bottom" values operate similarly to"top" and"bottom", but are calculated relative to thelineHeight rather thanfontSize alone.

    titleColorNull |Color |ExprRef

    Color of the title, can be in hex color code or regular color name.

    titleFontString |ExprRef

    Font of the title. (e.g.,"Helvetica Neue").

    titleFontSizeNumber |ExprRef

    Font size of the title.

    titleFontStyleString |ExprRef

    Font style of the title.

    titleFontWeightString | Number |ExprRef

    Font weight of the title. This can be either a string (e.g"bold","normal") or a number (100,200,300, …,900 where"normal" =400 and"bold" =700).

    titleLimitNumber |ExprRef

    Maximum allowed pixel width of axis titles.

    titleLineHeightNumber |ExprRef

    Line height in pixels for multi-line title text or title text with"line-top" or"line-bottom" baseline.

    titleOpacityNumber |ExprRef

    Opacity of the axis title.

    titlePaddingNumber |ExprRef

    The padding, in pixels, between title and axis.

    titleXNumber |ExprRef

    X-coordinate of the axis title relative to the axis group.

    titleYNumber |ExprRef

    Y-coordinate of the axis title relative to the axis group.

    Example: Customize Title

    For example, the following plot has a customized x-axis title.

    See also:Axis Title Config andguide-title style config (common styles for axis,legend, andheader titles).

    Grid

    PropertyTypeDescription
    gridBoolean

    A boolean flag indicating if grid lines should be included as part of the axis

    Default value:true forcontinuous scales that are not binned; otherwise,false.

    gridCapString |ExprRef

    The stroke cap for grid lines’ ending style. One of"butt","round" or"square".

    Default value:"butt"

    gridColorNull |Color |ExprRef |ConditionalAxisColor

    Color of gridlines.

    Default value:"lightGray".

    gridDashNumber[] |ExprRef |ConditionalAxisNumberArray

    An array of alternating [stroke, space] lengths for dashed grid lines.

    gridOpacityNumber |ExprRef |ConditionalAxisNumber

    The stroke opacity of grid (value between [0,1])

    Default value:1

    gridWidthNumber |ExprRef |ConditionalAxisNumber

    The grid width, in pixels.

    Default value:1

    Conditional Axis Properties

    We can set axis properties (which can be of type “ConditionalAxisProperty”) to aconditional value definition.

    Note that each axis tick, grid line, and label instance is backed by a data object with the following fields, which may be accessed as part of the test condition in a condition axis property.

    • label - the string label
    • value - the data value
    • index -fractional tick index (0 for the first tick and1 for the last tick)

    Example: Conditional Axis Properties and Multi-Line Axis Label

    In the following example, we adjust thegridDash andtickDash properties in a line chart based on whether a particular grid line falls on a year boundary. We also use thelabelExpr property to show multi-line labels for year and month, showing the year number only for January of each year.

    We can also conditionally hide some labels and ticks in the following Lasagna plot using conditionallabelColor andtickColor:

    Axis Config

    // Top-level View Specification{  ...  "config": {    "axis": : ...,    "axisX": : ...,    "axisY": : ...,    "axisLeft": : ...,    "axisRight": : ...,    "axisTop": : ...,    "axisBottom": : ...,    "axisBand": : ...,    "axisQuantitative": : ...,    "axisTemporal": : ...,    ...  }}

    Axis configuration defines default settings for axes. Properties defined under the"axis" property in the top-levelconfig object are applied toall axes.

    Additional property blocks can target more specific axis types based on the orientation ("axisX","axisY","axisLeft","axisTop", etc.), band scale type ("axisBand"), scale’s data type ("axisDiscrete","axisQuantitative", and"axisTemporal"), or both orientation and scale/data type (e.g.,"axisXTemporal"). For example, properties defined under the"axisBand" property will only apply to axes visualizing"band" scales.

    An axis configuration supports allaxis properties exceptposition,orient,format,values, andzindex. In addition, it also supports thedisable property:

    PropertyTypeDescription
    disableBoolean

    Disable axis by default.

    Note:

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

    • If an axis config has a style property, the style will have lower precedence than any of the axis config properties.

    • In summary, here is the precedence level order for each axis property (from the highest to the lowest):

      • Axis properties (axis.*)
      • Axis style (config.axis[axis.style].*)
      • Orientation and type based axis config (e.g.,config.axisXBand.*)
      • Type-based axis config (e.g.,config.axisBand.*)
      • Orientation-based axis config (config.axisX/Y.*)
      • General axis config (config.axis.*)
      • Style of orientation and type based axis config (e.g.,config.style[config.axisXBand.style].*)
      • Style of type-based axis config (e.g.,config.style[config.axisBand.style].*)
      • Style of orientation-based axis config (e.g.,config.style[config.axisX.style].*)
      • Style general axis config (config.style[config.axis.style].*)

    See also:Axis Labels Properties andguide-label style config (common styles for by axis,legend, andheader labels).


[8]ページ先頭

©2009-2025 Movatter.jp