CODEWITHSUNDEEP
vega
wobbily_col
wobbily_col

Reputation: 11891

Vega, is it pssible to have duplicate labels in the x axis

I am trying to replace some charts generated with Google Charts API using Vega.

It is a simple bar chart with 5 columns, and I previously had the x axis labels showing the actual numbers.

enter image description here

When I try doing this with Vega, it would merge the duplicate numbers into one column.

enter image description here

Here is the json used for the vega version (its more or less a cut and paste of the quickstart examples with the data values changed).

{
    "scales": [
        {
            "range": "width", 
            "type": "ordinal", 
            "name": "x", 
            "domain": {
                "field": "data.x", 
                "data": "table"
            }
        }, 
        {
            "range": "height", 
            "name": "y", 
            "domain": {
                "field": "data.y", 
                "data": "table"
            }, 
            "nice": true
        }
    ], 
    "axes": [
        {
            "scale": "x", 
            "type": "x"
        }, 
        {
            "scale": "y", 
            "type": "y", 
            "ticks": 3
        }
    ], 
    "height": 80, 
    "padding": {
        "top": 10, 
        "bottom": 20, 
        "right": 10, 
        "left": 30
    }, 
    "width": 200, 
    "marks": [
        {
            "from": {
                "data": "table"
            }, 
            "type": "rect", 
            "properties": {
                "hover": {
                    "fill": {
                        "value": "red"
                    }
                }, 
                "update": {
                    "fill": {
                        "value": "steelblue"
                    }
                }, 
                "enter": {
                    "y": {
                        "field": "data.y", 
                        "scale": "y"
                    }, 
                    "x": {
                        "field": "data.x", 
                        "scale": "x"
                    }, 
                    "y2": {
                        "scale": "y", 
                        "value": 0
                    }, 
                    "width": {
                        "band": true, 
                        "scale": "x", 
                        "offset": -1
                    }
                }
            }
        }
    ], 
    "data": [
        {
            "values": [ 
                { "y": 7,"x": 7 }, 
                { "y": 7,"x": 7 }, 
                { "y": 7,"x": 7 }, 
                { "y": 6,"x": 6 }, 
                { "y": 0,"x": 0 }, 
                { "y": 0,"x": 0 }
            ], 
            "name": "table"
        }
    ]
}

Upvotes: 0

Views: 350

Answers (1)

Iain Dillingham
Iain Dillingham

Reputation: 625

You should ensure that each object in the values array has a unique value for the x-axis. This makes sense: otherwise, how would a user know what each bar referred to? If you wish to label each bar with its corresponding value, then you should use a text mark. See the grouped bar example for guidance.

Upvotes: 1

Related Questions