Deneb Spec

bulletchartwithban.json

{
  "data": {"name": "dataset"},
  
  "vconcat": [
    {
      "mark": {
        "type": "text",
        "fontSize": 40,
        "align": "left",
        "baseline": "top",
        "dy": 20,
        "fontWeight": "bold"
      },
      "encoding": {
        "text": {
          "field": "Actual",
          "type": "quantitative",
          "format": "$,.0f"
        },
        "color": {"expr": "pbicolor(3)"}
      }
    },
    {  "width": "275",
      "encoding": {
        "x": {
          "type": "quantitative",
          "scale": {"nice": false},
          "title": null,
           "axis": {
            "orient": "bottom", 
            "offset": 30, 
            "domain": "true", 
            "domainColor": "darkgray", 
            "ticks": "true"
          }
        },
        "y": {"type": "nominal"},
        "tooltip": [
          {"field": "Actual"},
          {"field": "Budget"},
          {"field": "Projection"}
        ]
      },
      "layer": [
        {
          "width": 250, 
          "autosize": {
            "type": "fit", 
            "contains": "padding"},
          "mark": {
            "type": "bar",
            "cornerRadiusEnd": 8,
            "color": {
              "expr": "pbiColor(4, .6)"
            },
            "size": 60
          },
          "encoding": {
            "x": {"field": "Budget"}
          }
        },
        {
          "mark": {
            "type": "bar",
            "cornerRadiusEnd": 8,
            "color": {
              "expr": "pbiColor(4)"
            },
            "size": 40
          },
          "encoding": {
            "x": {"field": "Actual"}
          }
        },
        {
          "mark": {
            "type": "tick",
            "height": 68,
            "thickness": 5,
            "opacity": 1,
            "color": {
              "expr": "pbiColor(4,-.5)"
            }
          },
          "encoding": {
            "x": {"field": "Projection"}
          }
        }
      ]
    },
    {
      "name": "LEGEND",
      "height": 18,
      "data": {
        "values": [
          {
            "legend_id": 1,
            "legend_size": 1,
            "legend_label": "Budget"
          },
          {
            "legend_id": 2,
            "legend_size": 1,
            "legend_label": "Actual"
          },
          {
            "legend_id": 3,
            "legend_size": 1,
            "legend_label": "Projected"
          }
        ]
      },
      "mark": {
        "type": "arc",
        "radius": 0
      },
      "encoding": {
        "theta": {
          "field": "legend_size",
          "type": "quantitative"
        },
        "color": {
          "field": "legend_label",
          "type": "nominal",
          "scale": {
            "domain": [
              "Budget",
              "Actual",
              "Projected"
            ],
            "range": [
              {"expr": "pbiColor(4, .6)"},
              {"expr": "pbiColor(4)"},
              {"expr": "pbiColor(4,-.5)"}
            ]
          },
          "legend": {
            "orient": "bottom",
            "direction": "horizontal",
            "title": null,
            "offset": -5,
            "dx": 30,
            "labelColor": "#333333",
            "labelFont": "Segoe UI",
            "labelFontSize": 14,
            "symbolSize": 200,
            "symbolType": "circle"
          }
        }
      }
    }
  ]
}

config.json

{
  "view": {"stroke": "transparent"},
  "font": "Segoe UI",
  "arc": {},
  "area": {
    "line": true,
    "opacity": 0.6
  },
  "bar": {},
  "line": {
    "strokeWidth": 3,
    "strokeCap": "round",
    "strokeJoin": "round"
  },
  "path": {},
  "point": {"filled": true, "size": 75},
  "rect": {},
  "shape": {},
  "symbol": {
    "strokeWidth": 1.5,
    "size": 50
  },
  "text": {
    "font": "Segoe UI",
    "fontSize": 30,
    "fill": "#605E5C"
  },
  "axis": {
    "ticks": false,
    "grid": false,
    "domain": false,
    "labelColor": "#605E5C",
    "labelFontSize": 12,
    "titleFont": "Segoe UI, wf_standard-font, helvetica, sans-serif",
    "titleColor": "#252423",
    "titleFontSize": 16,
    "titleFontWeight": "normal"
  },
  "axisQuantitative": {
    "tickCount": 3,
    "grid": true,
    "gridColor": "#C8C6C4",
    "gridDash": [1, 5],
    "labelFlush": false
  },
  "axisX": {"labelPadding": 5},
  "axisY": {"labelPadding": 10},
  "header": {
    "titleFont": "Segoe UI, wf_standard-font, helvetica, arial, sans-serif",
    "titleFontSize": 16,
    "titleColor": "#252423",
    "labelFont": "Segoe UI",
    "labelFontSize": 13,
    "labelColor": "#605E5C"
  },
  "legend": {
    "titleFont": "Segoe UI",
    "titleFontWeight": "bold",
    "titleColor": "#605E5C",
    "labelFont": "Segoe UI",
    "labelFontSize": 13,
    "labelColor": "#605E5C",
    "symbolType": "circle",
    "symbolSize": 75
  },
  "concat": {"spacing": 10}
}