CODEWITHSUNDEEP
d3.jsbar-chartdata-visualizationvegavega-lite
JVM
JVM

Reputation: 994

How do I change color of a bar in Vega-lite Bar Chart?

I want to change the default blue color of a bar in a Vega-Lite bar chart. How can I do it? I am posting the json specification below:

{
 "data": {
 "values": [
  {"a":"A", "b":28}, {"a":"B", "b":55}, {"a":"C", "b":43},
  {"a":"D", "b":91}, {"a":"E", "b":81}, {"a":"F", "b":53},
  {"a":"G", "b":19}, {"a":"H", "b":87}, {"a":"I", "b":52}
 ]
 },
 "mark": "bar",
 "encoding": {
 "x": {bin:false, "type": "ordinal","field": "a"},
 "y": {"type": "quantitative","field": "b"}
 }
}

Thanks in advance.

Upvotes: 5

Views: 4991

Answers (1)

JVM
JVM

Reputation: 994

I found the answer to my own question. :) I was supposed to add a color key inside encoding block. Please see the updated code below:

{
 "data": {
 "values": [
  {"a":"A", "b":28}, {"a":"B", "b":55}, {"a":"C", "b":43},
  {"a":"D", "b":91}, {"a":"E", "b":81}, {"a":"F", "b":53},
  {"a":"G", "b":19}, {"a":"H", "b":87}, {"a":"I", "b":52}
 ]
},
 "mark": "bar",
 "encoding": {
 "x": {"type": "ordinal","field": "a"},
 "y": {"type": "quantitative","field": "b"},
 "color": {"value": "#ff9900"}
}
}

Upvotes: 7

Related Questions