Custom Legend Label Text

[Moritz Beber]

Dear all,

I'm slightly confused as to how to define custom text for the entries in the legend. If I add the following to the http://trifacta.github.io/vega/editor/ 'stocks' example:

"legends": [
    {
      "fill": "color",
      "offset": 0,
      "title": "My Title",
      "properties": {},
      "values": [
        "a",
        "b",
        "c",
        "d",
        "e"
      ]
    }
  ],

then the text changes as expected but the colors change! The documentation also says: "Custom text can be defined using the "text" property for labels" but I don't know how.

Thank you for your input,

Moritz

[Jakub Dundalek]

Hi,

you are trying to assign the same colors (range) to different labels (domain). You need to create a new scale for that. Add this to the "scales" section:

{

      "name": "labelcolor", "type": "ordinal", "range": "category10", "domain": ["Microsoft", "Amazon", "IBM", "Google", "Apple"] 

}

And then use the custom legend like this:

"legends": [

    {

      "fill": "labelcolor",

      "offset": 0,

      "title": "My Title",

      "properties": {},

      "values": [

        "Google",

        "Apple",

        "Amazon",

        "IBM",

        "Microsoft"

      ]

    }

  ],

Jakub

[Moritz Beber]

Thank you for pointing this out to me.

On Tuesday, 29 April 2014 20:08:11 UTC+2, Jakub Dundalek wrote:

Hi,

you are trying to assign the same colors (range) to different labels (domain). You need to create a new scale for that. Add this to the "scales" section:

{

      "name": "labelcolor", "type": "ordinal", "range": "category10", "domain": ["Microsoft", "Amazon", "IBM", "Google", "Apple"] 

}

And then use the custom legend like this:

"legends": [

    {

      "fill": "labelcolor",

      "offset": 0,

      "title": "My Title",

      "properties": {},

      "values": [

        "Google",

        "Apple",

        "Amazon",

        "IBM",

        "Microsoft"

      ]

    }

  ],

It was actually sufficient to reference the newly created scale in legends, i.e.,

  "legends": [
    {
      "fill": "legendcolor"
    }
  ],

and if I changed those values I'd have the same problem again, of course.

Thank you again!