CODEWITHSUNDEEP
vega-litevega
Denys
Denys

Reputation: 333

Vega lite, reduce amount of labels on the x-axis

I need to reduce amount of x-axis labels because now you can see what is going on: enter image description here

Is it possible to adjust the step on the x-axis? I didn't find it in the documentation. In my case, it automatically counts by 200, I would like to control this.

This is my data:

data = [ { name: 'Email Invite', value: 6200, tooltip: 'Total raised by Email Invite: $6200' }, { name: 'Text Invite', value: 1000, }, { name: 'Extra Features', value: 1800, }, { name: 'Snap Store', value: 2400, }, { name: 'Social Media', value: 4100, }, ]

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

Thanks in advance!

Upvotes: 1

Views: 499

Answers (1)

davidebacci
davidebacci

Reputation: 30174

This is controlled by tick attributes.

You can set a "tickCount", "tickMinStep" or even the values themselves via "values".

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

Upvotes: 1

Related Questions