# Vega scatterplot with specific color to each value

**URL:** <https://discuss.elastic.co/t/vega-scatterplot-with-specific-color-to-each-value/262268>\
**Category:** Kibana\
**Created:** [January 26, 2021, 6:58pm UTC](https://discuss.elastic.co/t/vega-scatterplot-with-specific-color-to-each-value/262268 "2021-01-26T18:58:50Z")\
**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 26, 2021, 6:58pm UTC](https://discuss.elastic.co/t/vega-scatterplot-with-specific-color-to-each-value/262268/1 "2021-01-26T18:58:51Z")

</div>

I have an index in which each document has ‘X Location’ field, ‘Y Location’ field and ‘rgb’ field.  
The ‘rgb’ field contains rgb values of string format rgb(x,y,z).  
I would like to visualize the data, and I tried to make a scatter plot of ‘Y Location’ vs. ‘X Location’, and then color each value by its corresponding color from 'rgb' field. however it is not working.  
I used the code below.  
any ideas?

```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 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:** ![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 27, 2021, 1:34pm UTC](https://discuss.elastic.co/t/vega-scatterplot-with-specific-color-to-each-value/262268/2 "2021-01-27T13:34:46Z")

</div>

This might be similar to [Color in vega bar charts](https://discuss.elastic.co/t/color-in-vega-bar-charts/261739/3) but I'm not 100% sure (in that case you just have to specify `scale: null`.

To make it easier to follow, could you export the spec with data inlined by

- for 7.10: Going to "Inspect" in the top right, switch "Requests" to "Vega debug", select the "spec" tab and copy the result
- for older versions: follow these instructions: [https://gist.github.com/nyurik/736c34970ba3c32f3fe3d45d66719b3e](https://gist.github.com/nyurik/736c34970ba3c32f3fe3d45d66719b3e)

---

<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 28, 2021, 10:38am UTC](https://discuss.elastic.co/t/vega-scatterplot-with-specific-color-to-each-value/262268/4 "2021-01-28T10:38:18Z")

</div>

This encoding works for me:

```auto
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", scale: null}
  }

```

---

<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 28, 2021, 10:45am UTC](https://discuss.elastic.co/t/vega-scatterplot-with-specific-color-to-each-value/262268/5 "2021-01-28T10:45:53Z")

</div>

WOW!  
It is working perfectly, thank you!  
can I add tooltips, so for each point i will be able to present data of another field in the index?  
eg:  
x location 100  
y location 200  
group: blue

---

<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 28, 2021, 10:59am UTC](https://discuss.elastic.co/t/vega-scatterplot-with-specific-color-to-each-value/262268/6 "2021-01-28T10:59:06Z")

</div>

That should be possible, check out the tooltip configuration here: [https://vega.github.io/vega-lite/docs/tooltip.html#data](https://vega.github.io/vega-lite/docs/tooltip.html#data)

---

<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 25, 2021, 10:59am UTC](https://discuss.elastic.co/t/vega-scatterplot-with-specific-color-to-each-value/262268/7 "2021-02-25T10:59:07Z")

</div>

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