# Can I define the color of each value in Kibana visualization by assigning it specific RGB?

**URL:** <https://discuss.elastic.co/t/can-i-define-the-color-of-each-value-in-kibana-visualization-by-assigning-it-specific-rgb/261401>\
**Category:** Kibana\
**Created:** [January 18, 2021, 9:59am UTC](https://discuss.elastic.co/t/can-i-define-the-color-of-each-value-in-kibana-visualization-by-assigning-it-specific-rgb/261401 "2021-01-18T09:59:52Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shalhevet](https://avatars.discourse-cdn.com/v4/letter/s/d6d6ee/32.png) [@Shalhevet](https://discuss.elastic.co/u/Shalhevet)\
**Post date:** [January 18, 2021, 9:59am UTC](https://discuss.elastic.co/t/can-i-define-the-color-of-each-value-in-kibana-visualization-by-assigning-it-specific-rgb/261401/1 "2021-01-18T09:59:52Z")

</div>

hi,  
I have a data set which includes x and y position of each measurement, and its corresponding RGB.  
is there a way to Visualize it with Kibana?  
This is actually a heat map where each point has x and y values, but the color of each point is set by a given RGB.  
thanks.

---

<div class="post-metadata">

**Author:** ![Marta\_Bondyra](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marta_bondyra/32/102122_2.png) [@Marta\_Bondyra](https://discuss.elastic.co/u/Marta_Bondyra)\
**Post date:** [January 18, 2021, 11:13am UTC](https://discuss.elastic.co/t/can-i-define-the-color-of-each-value-in-kibana-visualization-by-assigning-it-specific-rgb/261401/2 "2021-01-18T11:13:05Z")

</div>

Hi @Shalhevet, to my knowledge the only option would be to use Vega visualization. It's not trivial though.

---

<div class="post-metadata">

**Author:** ![Shalhevet](https://avatars.discourse-cdn.com/v4/letter/s/d6d6ee/32.png) [@Shalhevet](https://discuss.elastic.co/u/Shalhevet)\
**Post date:** [January 18, 2021, 12:05pm UTC](https://discuss.elastic.co/t/can-i-define-the-color-of-each-value-in-kibana-visualization-by-assigning-it-specific-rgb/261401/3 "2021-01-18T12:05:24Z")

</div>

Thank you for the prompt response!  
I have never used Vega visualization..  
how would you recommend me to start?

---

<div class="post-metadata">

**Author:** ![Marta\_Bondyra](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marta_bondyra/32/102122_2.png) [@Marta\_Bondyra](https://discuss.elastic.co/u/Marta_Bondyra)\
**Post date:** [January 18, 2021, 3:53pm UTC](https://discuss.elastic.co/t/can-i-define-the-color-of-each-value-in-kibana-visualization-by-assigning-it-specific-rgb/261401/4 "2021-01-18T15:53:28Z")

</div>

I'd go through the tutorials Vega provides on their page ([https://vega.github.io/vega-lite/tutorials/getting\_started.html](https://vega.github.io/vega-lite/tutorials/getting_started.html)) and then check out sample data examples in kibana.  
A simple example of reading colors from the data is here [Vega chart for matrix stats (correlation) split!](https://discuss.elastic.co/t/vega-chart-for-matrix-stats-correlation-split/226238)  
An example of quite advanced heatmap in kibana: [Vega chart for matrix stats (correlation) split!](https://discuss.elastic.co/t/vega-chart-for-matrix-stats-correlation-split/226238)

---

<div class="post-metadata">

**Author:** ![Shalhevet](https://avatars.discourse-cdn.com/v4/letter/s/d6d6ee/32.png) [@Shalhevet](https://discuss.elastic.co/u/Shalhevet)\
**Post date:** [January 26, 2021, 9:44am UTC](https://discuss.elastic.co/t/can-i-define-the-color-of-each-value-in-kibana-visualization-by-assigning-it-specific-rgb/261401/5 "2021-01-26T09:44:34Z")

</div>

I thought maybe using a simpler chart of scatterplot and then just color each value by its corresponding color from 'rgb' field. however it is not working.

```auto
        {
      $schema: https://vega.github.io/schema/vega-lite/v2.json
      mark: {type: "square", filled: true, size: 400}
      data: {
      data: "table"
        url: {
          %context%: true
          index: my*
          body: {
          size: 10000
            _source: ["X Location", "Y Location", "rgb"]
          }
        }
        format: {property: "hits.hits"}
      }
      encoding: {
        x: {
          field: _source.X Location
          type: quantitative
          axis: {title: "X Location"}
        }
        y: {
          field: _source.Y Location
          type: quantitative
          axis: {title: "Y Location"}
        }
        color: {
      field: _source.rgb
      type: nominal
      legend: {title: "rgb"}
      scale: {
        domain: [data: "table", field: "rgb"]
        range: [data: "table", field: "rgb"]
      }
    }

```

I based it on the following example code:

```auto
color{
    field: _source.ME
      tipe: nominal
      legend: {title: "ME"}
      scale: {
        domain: ["ME1", "ME2", "ME3", "ME4"]
        range: ["rgb(0,0,255)", "rgb(0,255,0)", "rgb(255,0,0)", "rgb(0,0,0)"]
}
}

```

---

<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 23, 2021, 9:44am UTC](https://discuss.elastic.co/t/can-i-define-the-color-of-each-value-in-kibana-visualization-by-assigning-it-specific-rgb/261401/6 "2021-02-23T09:44:43Z")

</div>

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