# 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:** 4
**Page:** 1
### Author:  [@jeremy.smith](https://discuss.elastic.co/u/jeremy.smith)
#### Post date: [July 17, 2019, 11:03pm UTC](https://discuss.elastic.co/t/vega-sankey-diagram-color-change/191106/1 "2019-07-17T23:03:16Z")
Hello All,
I followed the example for the Sankey Diagram from the Elastic Blog Post [[Kibana/Vega Sankey Post.](https://www.elastic.co/blog/sankey-visualization-with-vega-in-kibana) ] .
We use a dark theme and I can't seem to find where to update the color of the text. I was able to adjust the color of the text on the Axes; what I'm attempting to do is change the color of the "country codes" [from the example] to something other than Black.
Thanks.
FYI: Couldn't post the vega due to character limitations.
---
### Author:  [@Marius\_Dragomir](https://discuss.elastic.co/u/Marius_Dragomir)
#### Post date: [July 18, 2019, 4:58pm UTC](https://discuss.elastic.co/t/vega-sankey-diagram-color-change/191106/2 "2019-07-18T16:58:02Z")
You could try and use this example as a guide:
> [@Vega plugin:Changing color and size of the labels](https://discuss.elastic.co/t/vega-plugin-changing-color-and-size-of-the-labels/128847):
>
> Hello, Is it possible to change the laben size and/or color? I am using Vega plugin. Here is the screenshot of my diagram. and the query is { "$schema": "[https://vega.github.io/schema/vega-lite/v2.json](https://vega.github.io/schema/vega-lite/v2.json)", "description": "A bar chart that directly encodes color names in the data.", "data": { "values": [ {"customer":"A", "@timestamp": 7, "state": "red"}, {"customer":"A", "@timestamp": 5, "state": "green"}, {"customer":"B", "@timestamp": 6, "state": "green"}, {"customer…
---
### Author:  [@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")
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 : ''"
}
}
}
}
```
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [August 16, 2019, 11:44pm UTC](https://discuss.elastic.co/t/vega-sankey-diagram-color-change/191106/4 "2019-08-16T23:44:06Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.