Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Preassigned colors for multiple line charts

See original GitHub issue

I would like to set the color for each of the chart externally.

I try to do make a scale which is array of available colors like :

{
    "name": "color",
    "type": "ordinal",
    "range": [
            '#84C9CB',
            '#8A3EC3',
            '#C3587E',
            '#097D8A',
            '#98F76D',
            '#54AD38',
            '#EC1055'
     ]
}

then in marks, I have set it as :

"marks": [
          {
            "type": "group",
            "clip": true,
            "from": {
              "facet": {
                "name": "series",
                "data": "table",
                "groupby": "PointId"
              }
            },
            "marks": [
              {
                "type": "line",
                "from": {"data": "series"},
                "encode": {
                  "enter": {
                    "x": {"scale": "xscale", "field": "TimeStamp"},
                    "y": {"scale": "yscale", "field": "Value"},
                    "stroke": {"scale": "PointId", "field": "PointId"},
                    "strokeWidth": {"value": 2}
                  },
                  "update": {
                    "x": {"scale": "xscale", "field": "TimeStamp"},
                    "y": {"scale": "yscale", "field": "Value"},
                    "strokeWidth": {"value": 2},
                    "stroke": {"signal": "colorupdate"}
                  },
                  "select": {
                    "strokeWidth": {
                      "value": 3
                    }
                  },
                  "hover": {
                    "fillOpacity": {"value": 0.5}
                  }
                }
              }
            ]
          }
        ]

Stroke value points to the signal:

{
    "name": "colorupdate",
    "update": "scale('color', 'PointId % 6')" // point id is id of the group and 6 is length of color array. There should be better way for array.length in Vega but again I am no expert in Vega.
},

This same formula is used externally for items selected for chart: 'color = [‘PointId’] % color.length

For some reason, and I am no expert in Vega, same color shows for all charts…

Issue Analytics

State:
Created 5 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

2reactions

jheercommented, Apr 13, 2018

If you need to debug a signal expression, you can use the warn function to print debugging output to the browser’s JavaScript console. For more, see the documentation at https://vega.github.io/vega/docs/expressions/#warn

1reaction

jheercommented, Apr 11, 2018

Hi! 'PointId % 6' is a string, so you are always applying your color scale to a string constant. Also, signals compute values, not functions, so referencing "colorupdate" in your encoder will only provide a constant.

Try using the following for your stroke color encoder. The contained expression will then get evaluated for each data point being visualized.

{
  "stroke": {"signal": "scale('color', datum.PointId % 6)"}
}

p.s. There is also a length(array) function for getting the length of an array. For example length(range('color')). All expression functions are documented here: https://vega.github.io/vega/docs/expressions/