layer3.vl

{
    "config": {
        "tick": {
            "thickness": 2
        }
    },
    "data": {
        "values": [
            {
                "measures": [
                    220,
                    270
                ],
                "markers": [
                    250
                ],
                "ranges": [
                    150,
                    225,
                    300
                ],
                "title": "Revenue"
            },
            {
                "measures": [
                    21,
                    23
                ],
                "markers": [
                    26
                ],
                "ranges": [
                    20,
                    25,
                    30
                ],
                "title": "Profit"
            },
            {
                "measures": [
                    100,
                    320
                ],
                "markers": [
                    550
                ],
                "ranges": [
                    350,
                    500,
                    600
                ],
                "title": "Order size"
            },
            {
                "measures": [
                    1000,
                    1650
                ],
                "markers": [
                    2100
                ],
                "ranges": [
                    1400,
                    2000,
                    2500
                ],
                "title": "New customers"
            },
            {
                "measures": [
                    3.2,
                    4.7
                ],
                "markers": [
                    4.4
                ],
                "ranges": [
                    3.5,
                    4.25,
                    5
                ],
                "title": "Satisfaction"
            }
        ]
    },
    "resolve": {
        "scale": {
            "x": "independent"
        }
    },
    "spec": {
        "layer": [
            {
                "mark": {
                    "color": "#eee",
                    "type": "bar"
                },
                "encoding": {
                    "x": {
                        "field": "ranges[2]",
                        "scale": {
                            "nice": false
                        },
                        "type": "quantitative",
                        "axis": {
                            "title": null
                        }
                    }
                }
            },
            {
                "mark": {
                    "color": "#ddd",
                    "type": "bar"
                },
                "encoding": {
                    "x": {
                        "field": "ranges[1]",
                        "type": "quantitative"
                    }
                }
            },
            {
                "mark": {
                    "color": "#ccc",
                    "type": "bar"
                },
                "encoding": {
                    "x": {
                        "field": "ranges[0]",
                        "type": "quantitative"
                    }
                }
            },
            {
                "mark": {
                    "color": "lightsteelblue",
                    "size": 10,
                    "type": "bar"
                },
                "encoding": {
                    "x": {
                        "field": "measures[1]",
                        "type": "quantitative"
                    }
                }
            },
            {
                "mark": {
                    "color": "steelblue",
                    "size": 10,
                    "type": "bar"
                },
                "encoding": {
                    "x": {
                        "field": "measures[0]",
                        "type": "quantitative"
                    }
                }
            },
            {
                "mark": {
                    "color": "black",
                    "type": "tick"
                },
                "encoding": {
                    "x": {
                        "field": "markers[0]",
                        "type": "quantitative"
                    }
                }
            }
        ]
    },
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "facet": {
        "row": {
            "field": "title",
            "header": {
                "labelAngle": 30,
                "title": null
            },
            "type": "ordinal"
        }
    },
    "description": "Bullet chart"
}