# Vega + Sankey Diagram Color Change

**URL:** https://discuss.elastic.co/t/vega-sankey-diagram-color-change/191106
**Category:** Kibana
**Tags:** vega
**Created:** [July 17, 2019, 11:03pm UTC](https://discuss.elastic.co/t/vega-sankey-diagram-color-change/191106 "2019-07-17T23:03:16Z")
**Posts on this page:** 1
**Showing post:** 3

<div class="post-metadata">

### Author: ![astv](https://avatars.discourse-cdn.com/v4/letter/a/d6d6ee/32.png) [@astv](https://discuss.elastic.co/u/astv)
#### Post date: [July 19, 2019, 11:44pm UTC](https://discuss.elastic.co/t/vega-sankey-diagram-color-change/191106/3 "2019-07-19T23:44:05Z")

</div>

In the marks array, find the code for the text mark (shown below,) and add a fill property with the color you want, i.e. "fill": {"value": "red"}. I've added it to the code below for illustration.

My code may be a bit different from the version you linked to in your post, but this should point you in the right direction.

Astrit

```
{
  "type": "text",
  "from": {"data": "groups"},
  "interactive": false,
  "encode": {
    "update": {
      "x": {
        "signal": "scale('x', datum.stack) + (datum.rightLabel ? bandwidth('x') + 8 : -8)"
      },
      "yc": {
        "signal": "(datum.scaledY0 + datum.scaledY1)/2"
      },
      "align": {
        "signal": "datum.rightLabel ? 'left' : 'right'"
      },
      "baseline": {"value": "middle"},
      "fontWeight": {"value": "bold"},
      "fill": {"value": "red"},
      "text": {
        "signal": "abs(datum.scaledY0-datum.scaledY1) > 13 ? datum.grpId : ''"
      }
    }
  }
}
```

---

_[View the full topic](https://discuss.elastic.co/t/vega-sankey-diagram-color-change/191106)._