# Color in vega bar charts

**URL:** <https://discuss.elastic.co/t/color-in-vega-bar-charts/261739>\
**Category:** Kibana\
**Created:** [January 21, 2021, 8:06am UTC](https://discuss.elastic.co/t/color-in-vega-bar-charts/261739 "2021-01-21T08:06:27Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pranusha119](https://avatars.discourse-cdn.com/v4/letter/p/47e85d/32.png) [@Pranusha119](https://discuss.elastic.co/u/Pranusha119)\
**Post date:** [January 21, 2021, 8:06am UTC](https://discuss.elastic.co/t/color-in-vega-bar-charts/261739/1 "2021-01-21T08:06:27Z")

</div>

I want to give color of the bars by using the 'v' field which consists the hexcode of color.

I gave it using datum.v (mentioned in below code)

```auto
{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28, "v": "#000000"}, {"a": "B", "b": 55,"v": "#000000"}, {"a": "C", "b": 43, "v": "#CD5C5C"},
      {"a": "D", "b": 91, "v": "#FFA07A"}, {"a": "E", "b": 81, "v": "#FFA07A"}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
    "y": {"field": "b", "type": "quantitative"},
    "color": {
        "value": "datum.v"
        
      }
  }
}

```

Output:

![image](https://us1.discourse-cdn.com/elastic/original/3X/1/0/10bdb968e95277b1904ac060db1d47390679fcb3.png)

It didn't work, may I know if there are any other ways through which I can give color of the bars using the hexcode in 'v' field.

---

<div class="post-metadata">

**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\
**Post date:** [January 21, 2021, 8:25am UTC](https://discuss.elastic.co/t/color-in-vega-bar-charts/261739/2 "2021-01-21T08:25:30Z")

</div>

This works for me:

```auto
{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28, "v": "#000000"}, {"a": "B", "b": 55,"v": "#000000"}, {"a": "C", "b": 43, "v": "#CD5C5C"},
      {"a": "D", "b": 91, "v": "#FFA07A"}, {"a": "E", "b": 81, "v": "#FFA07A"}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
    "y": {"field": "b", "type": "quantitative"},
    "color": {
        "field": "v"
      }
  }
}

```

 ![Screenshot 2021-01-21 at 09.24.57](https://us1.discourse-cdn.com/elastic/original/3X/8/b/8b32e25db29f261979cbab1aff627f599ab9d0a5.png)

---

<div class="post-metadata">

**Author:** ![Pranusha119](https://avatars.discourse-cdn.com/v4/letter/p/47e85d/32.png) [@Pranusha119](https://discuss.elastic.co/u/Pranusha119)\
**Post date:** [January 21, 2021, 8:30am UTC](https://discuss.elastic.co/t/color-in-vega-bar-charts/261739/3 "2021-01-21T08:30:12Z")

</div>

Hi @flash1293

I want the colors that are used in field 'v' for example #000000 is black, I want A and B bars to be black in color.

---

<div class="post-metadata">

**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\
**Post date:** [January 21, 2021, 8:40am UTC](https://discuss.elastic.co/t/color-in-vega-bar-charts/261739/4 "2021-01-21T08:40:16Z")

</div>

Ah, gotcha.

Try this:

```auto
{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28, "v": "#000000"},
      {"a": "B", "b": 55, "v": "#000000"},
      {"a": "C", "b": 43, "v": "#CD5C5C"},
      {"a": "D", "b": 91, "v": "#FFA07A"},
      {"a": "E", "b": 81, "v": "#FFA07A"}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
    "y": {"field": "b", "type": "quantitative"},
    "color": {"field": "v", "type": "nominal", "scale": null}
  }
}

```

 ![Screenshot 2021-01-21 at 09.39.41](https://us1.discourse-cdn.com/elastic/original/3X/f/1/f104cc34bd813b9ac0054f78272b266d32e1c71d.png)

---

<div class="post-metadata">

**Author:** ![Pranusha119](https://avatars.discourse-cdn.com/v4/letter/p/47e85d/32.png) [@Pranusha119](https://discuss.elastic.co/u/Pranusha119)\
**Post date:** [January 22, 2021, 7:28am UTC](https://discuss.elastic.co/t/color-in-vega-bar-charts/261739/5 "2021-01-22T07:28:55Z")

</div>

Thank you @flash1293

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [February 19, 2021, 7:29am UTC](https://discuss.elastic.co/t/color-in-vega-bar-charts/261739/6 "2021-02-19T07:29:08Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.