Axes & Gridlines

Customized axis and gridline marks can be used in addition to standard scale attributes such as xAxis, yGrid, etc. Just add data!

Loading Example... ⏳

Specification

JavaScript

import * as vg from "@uwdata/vgplot";

export default vg.plot(
  vg.gridY({strokeDasharray: "0.75 2", strokeOpacity: 1}),
  vg.axisY({anchor: "left", tickSize: 0, dx: 38, dy: -4, lineAnchor: "bottom"}),
  vg.axisY({
    anchor: "right",
    tickSize: 0,
    tickPadding: 5,
    label: "y-axis",
    labelAnchor: "center"
  }),
  vg.axisX({label: "x-axis", labelAnchor: "center"}),
  vg.gridX(),
  vg.ruleY([0]),
  vg.xDomain([0, 100]),
  vg.yDomain([0, 100]),
  vg.xInsetLeft(36),
  vg.marginLeft(0),
  vg.marginRight(35),
  vg.width(680)
);

YAML

meta:
  title: Axes & Gridlines
  description: >
    Customized axis and gridline marks can be used in addition to standard
    scale attributes such as `xAxis`, `yGrid`, etc. Just add data!
plot:
- mark: gridY
  strokeDasharray: 0.75 2 # dashed
  strokeOpacity: 1 # opaque
- mark: axisY
  anchor: left
  tickSize: 0  # don't draw ticks
  dx: 38  # offset right
  dy: -4  # offset up
  lineAnchor: bottom  # draw labels above grid lines
- mark: axisY
  anchor: right
  tickSize: 0
  tickPadding: 5
  label: y-axis
  labelAnchor: center
- mark: axisX
  label: x-axis
  labelAnchor: center
- mark: gridX
- mark: ruleY
  data: [0]
xDomain: [0, 100]
yDomain: [0, 100]
xInsetLeft: 36
marginLeft: 0
marginRight: 35
width: 680

JSON

{
  "meta": {
    "title": "Axes & Gridlines",
    "description": "Customized axis and gridline marks can be used in addition to standard scale attributes such as `xAxis`, `yGrid`, etc. Just add data!\n"
  },
  "plot": [
    {
      "mark": "gridY",
      "strokeDasharray": "0.75 2",
      "strokeOpacity": 1
    },
    {
      "mark": "axisY",
      "anchor": "left",
      "tickSize": 0,
      "dx": 38,
      "dy": -4,
      "lineAnchor": "bottom"
    },
    {
      "mark": "axisY",
      "anchor": "right",
      "tickSize": 0,
      "tickPadding": 5,
      "label": "y-axis",
      "labelAnchor": "center"
    },
    {
      "mark": "axisX",
      "label": "x-axis",
      "labelAnchor": "center"
    },
    {
      "mark": "gridX"
    },
    {
      "mark": "ruleY",
      "data": [
        0
      ]
    }
  ],
  "xDomain": [
    0,
    100
  ],
  "yDomain": [
    0,
    100
  ],
  "xInsetLeft": 36,
  "marginLeft": 0,
  "marginRight": 35,
  "width": 680
}