Vega + Sankey Diagram Color Change

Elastic Stack Kibana
1

Hello All,

I followed the example for the Sankey Diagram from the Elastic Blog Post [ Kibana/Vega Sankey Post. ] .

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.

2

You could try and use this example as a guide:

3

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 : ''"
      }
    }
  }
}
4

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