# Legend Color

**URL:** <https://discuss.elastic.co/t/legend-color/265308>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [February 24, 2021, 9:44am UTC](https://discuss.elastic.co/t/legend-color/265308 "2021-02-24T09:44:18Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![NourBM](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nourbm/32/84451_2.png) [@NourBM](https://discuss.elastic.co/u/NourBM)\
**Post date:** [February 24, 2021, 9:44am UTC](https://discuss.elastic.co/t/legend-color/265308/1 "2021-02-24T09:44:18Z")

</div>

Hello, I'm new with Kibana and Vega  
I want to customize the legend color in kibana: i need to make the color Green for the "Up" and Red for the "Down"  
Is this possible?

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [February 24, 2021, 1:38pm UTC](https://discuss.elastic.co/t/legend-color/265308/2 "2021-02-24T13:38:06Z")

</div>

Could you please share your [Vega Spec](https://www.elastic.co/guide/en/kibana/current/vega.html#asking-for-help-with-a-vega-spec) so someone can take a look?

---

<div class="post-metadata">

**Author:** ![NourBM](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nourbm/32/84451_2.png) [@NourBM](https://discuss.elastic.co/u/NourBM)\
**Post date:** [February 24, 2021, 1:50pm UTC](https://discuss.elastic.co/t/legend-color/265308/3 "2021-02-24T13:50:30Z")

</div>

```auto
{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {
        "a": "Java",
        "b": "working"
      },
      {
        "a": "Java",
        "b": "sleeping"
      },
      {
        "a": "Java",
        "b": "unknown"
      }
    ]
  },
  "mark": "circle",
  "encoding": {
    "x": {
      "field": "a",
      "type": "nominal"
    },
    "y": {
      "field": "b",
      "type": "nominal"
    },
    "color": {
      "field": "b",
      "type": "nominal"
    }
  },
  "config": {
    "range": {
      "category": {
        "scheme": "elastic"
      }
    },
    "mark": {
      "color": "#54B399"
    },
    "title": {
      "color": "#343741"
    },
    "style": {
      "guide-label": {
        "fill": "#69707d"
      },
      "guide-title": {
        "fill": "#343741"
      },
      "group-title": {
        "fill": "#343741"
      },
      "group-subtitle": {
        "fill": "#343741"
      }
    },
    "axis": {
      "tickColor": "#eef0f3",
      "domainColor": "#eef0f3",
      "gridColor": "#eef0f3"
    },
    "background": "transparent"
  },
  "width": "container",
  "height": "container",
  "autosize": {
    "type": "fit",
    "contains": "padding"
  }
}

```

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [February 24, 2021, 11:14pm UTC](https://discuss.elastic.co/t/legend-color/265308/4 "2021-02-24T23:14:25Z")

</div>

I don't see anything with `up` or `down` here.

---

<div class="post-metadata">

**Author:** ![NourBM](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nourbm/32/84451_2.png) [@NourBM](https://discuss.elastic.co/u/NourBM)\
**Post date:** [February 25, 2021, 6:04am UTC](https://discuss.elastic.co/t/legend-color/265308/5 "2021-02-25T06:04:33Z")

</div>

I changed them later to "sleeping" and "working" and "unknown" (according to data from metricbeat)

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [February 25, 2021, 12:13pm UTC](https://discuss.elastic.co/t/legend-color/265308/6 "2021-02-25T12:13:33Z")

</div>

You can add a scale and manually set the range and corresponding color like this.

```auto
    "color": {
      "field": "b",
      "type": "nominal",
      "scale": {
        "domain": ["working", "sleeping", "unknown"],
        "range": ["green", "orange", "red"]
      }
    }

```

---

<div class="post-metadata">

**Author:** ![NourBM](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nourbm/32/84451_2.png) [@NourBM](https://discuss.elastic.co/u/NourBM)\
**Post date:** [February 25, 2021, 4:20pm UTC](https://discuss.elastic.co/t/legend-color/265308/7 "2021-02-25T16:20:19Z")

</div>

that worked for me ! thank you

---

<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:** [March 25, 2021, 4:21pm UTC](https://discuss.elastic.co/t/legend-color/265308/8 "2021-03-25T16:21:17Z")

</div>

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