CODEWITHSUNDEEP
d3.jsbar-chartvegavega-lite
Peter Nsanze
Peter Nsanze

Reputation: 69

Vega-lite bar chart space between bars

D3 newbie. How I adjust the spacing between bars in vega-lite bar chart and override the default? binSpacing I think only works on histograms. See code below. I'll want to adjust colour of text and font family too... But am having trouble finding it in the docs.

   {
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "width": 1200,
  "height": 900,
  "data": {
    "url": "data/seattle-weather.csv"
  },
  "mark": "bar",
  "encoding": {

    "x": {
      "aggregate": "count",
      "type": "quantitative"
    },

    "size": {
      "value": 40



    },
    "y": {
      "field": "date",
      "type": "temporal",
      "timeUnit": "month",
      "axis": {
        "title": "Regions"
      }
    },

    "color": {
      "field": "weather",
      "type": "nominal",
      "scale": {
        "domain": [
          "0-20 days",
          "21-27 days",
          ">28 days"
        ],
        "range": [
          "red",
          "orange",
          "green"
        ]
      },
      "legend": {
        "title": "Case Ageing"
      }
    }
  }
}

Upvotes: 1

Views: 4443

Answers (1)

timelyportfolio
timelyportfolio

Reputation: 6579

I can understand your confusion. It seems there are three questions:

  1. How do I change bin width for histograms? This is documented here. If you have trouble with a reproducible example, I will be happy to help.
  2. How do I adjust the spacing of the bars? This is controlled by padding, paddingInner and paddingOuter all documented at the encoding level and at the config level. You might be having trouble since you are setting size manually with "size": {"value": 40}, but I am guessing this is a remnant from experimenting. Here is a working spec from this gist. You can play with paddingOuter, paddingInner, or add padding to apply to both inner and outer.
  3. How do I change font styling? See this gist.

Upvotes: 3

Related Questions