Vega Lite Conditional Grid Format

Question

This is my settings for y axis

        field: 'a',
        "type": "nominal",
        axis: {
          title: null,
          labelFontSize: 10,
          labelColor: '#94A3B8',
          ticks: false,
          domain: false,
          gridColor: "#E2E8F0",
          labelPadding: 16,
          labelOffset: 3,
          grid: true,
          bandPosition: -0.35,
        },
        scale: {
          paddingInner: 0.4,
          paddingOuter: 0.2,
        },
      }

You can se there is 'bandPosition: -0.35', i need that to center horizontal columns

Because without 'bandPosition: -0.35' i get this

But with 'bandPosition: -0.35' i got additional line at the very top which, as it were, stuck to the top line of the entire chart

So i am wondering is there a way to remove that additional line, actually this line belongs to the first column (Email Invite) but because of 'bandPosition: -0.35' it went to the top and was visible. In general, i need to remove the line that belongs my first column.

Full spec:

  private specVertical: VisualizationSpec = {
    $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
    description: 'bar-chart',
    "config": {
      "style": {
        "cell": {
          stroke: "#E2E8F0"
        }
      }
    },
    data: {
      "values": []
    },
    "mark": {"type": "bar"},
    encoding: {
      x: {
        field: 'b',
        type: 'quantitative',
        axis: {
          labels: true,
          labelAngle: 0,
          title: null,
          labelFontSize: 10,
          labelColor: '#94A3B8',
          ticks: false,
          domain: false,
          gridColor: "#E2E8F0",
          labelPadding: 10,
          grid: true,
        },
        scale: {
          paddingInner: 0.2,
          paddingOuter: 0.1,
        },
        sort: { field: 'c' }
      },
      y: {
        field: 'a',
        "type": "nominal",
        axis: {
          title: null,
          labelFontSize: 10,
          labelColor: '#94A3B8',
          ticks: false,
          domain: false,
          gridColor: "#E2E8F0",
          labelPadding: 16,
          labelOffset: 3,
          grid: true,
          bandPosition: -0.33,
        },
        scale: {
          paddingInner: 0.4,
          paddingOuter: 0.2,
        },
      },
      color: {field: 'c', scale: {range: [`${this.color}`]}, legend: null},
      tooltip: {field: 'd', type: 'ordinal'}
    },
    width: "container",
    height: +this.height
  };

tickBand:center doesn't do anything in my case because this is a default value, all is like in second screenshot.

bandPosition can be negative as far as i can see, because if it is positive it moves the lines down the graph, but I need it up.

I managed to achieve that there is only one line on top, but I did it simply by changing the value of the bandPosition from -0.35 to -0.33. In fact, now there are just two lines on top that are superimposed on each other, but it is not noticeable to the user.

But this magic number (bandPosition: -0.33) keeps me awake -).

Thank you in advance!

Answer 1

Can you try using tickBand:center instead of bandPosition?

https://vega.github.io/vega-lite/docs/axis.html#ticks

I think bandPosition should be between 0 and 1 too.

EDIT

You can change individual colours using conditional formatting.

In the example below, I have highlighted the line you're talking about in red.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Bar chart with text labels. Set domain to make the frame cover the labels.",
  "data": {
    "values": [
      {"a": "A", "b": 28},
      {"a": "B", "b": 55},
      {"a": "C", "b": 13},
      {"a": "D", "b": 30}
    ]
  },
  "width": 500,
  "height": 400,
  "encoding": {
    "y": {
      "field": "a",
      "type": "nominal",
      "axis": {
        "title": null,
        "labelFontSize": 10,
        "labelColor": "#94A3B8",
        "ticks": false,
        "domain": false,
        "gridColor": {
          "condition": {"test": {"field": "index", "equal": 0}, "value": "red"},
          "value": "#E2E8F0"
        },
        "labelPadding": 16,
        "labelOffset": 3,
        "grid": true,
        "bandPosition": -0.37
      },
      "scale": {"paddingInner": 0.4, "paddingOuter": 0.2}
    },
    "x": {
      "field": "b",
      "type": "quantitative",
      "scale": {"domain": [0, 60]},
      "axis": {"grid": false, "domain": false}
    }
  },
  "layer": [{"mark": {"type": "bar", "stroke": "white", "strokeWidth": 10}}]
}

Changing this to transparent or blank should solve your problem.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Bar chart with text labels. Set domain to make the frame cover the labels.",
  "data": {
    "values": [
      {"a": "A", "b": 28},
      {"a": "B", "b": 55},
      {"a": "C", "b": 13},
      {"a": "D", "b": 30}
    ]
  },
  "width": 500,
  "height": 400,
  "encoding": {
    "y": {
      "field": "a",
      "type": "nominal",
      "axis": {
        "title": null,
        "labelFontSize": 10,
        "labelColor": "#94A3B8",
        "ticks": false,
        "domain": false,
        "gridColor": {
          "condition": {"test": {"field": "index", "equal": 0}, "value": "transparent"},
          "value": "#E2E8F0"
        },
        "labelPadding": 16,
        "labelOffset": 3,
        "grid": true,
        "bandPosition": -0.37
      },
      "scale": {"paddingInner": 0.4, "paddingOuter": 0.2}
    },
    "x": {
      "field": "b",
      "type": "quantitative",
      "scale": {"domain": [0, 60]},
      "axis": {"grid": false, "domain": false}
    }
  },
  "layer": [{"mark": {"type": "bar", "stroke": "white", "strokeWidth": 10}}]
}