Search code examples
gooddata

Specifying color mapping in react components

Using the new "Colors" section of the analytical designer, I can specify custom colors to use for my insight:

enter image description here

When I get my visualization object, this comes through with properties that look like this:

"colorMapping": [
    {
        "id": "fdda26a33ca048f28bc702f047c04d73",
        "color": {
            "type": "guid",
            "value": "guid3"
        }
    },
    {
        "id": "893b13af5d064ec5ba57f82ea3241bbe",
        "color": {
            "type": "guid",
            "value": "guid4"
        }
    }
]

Passing that into the config section of the react component props results in some console errors (item.predicate is not a function in color.js:219). It seems to me that the color map values aren't coming through correctly when I get the visualization object.

Is there any way to get the custom color values and set them in the react component props?

Solution

  • If you use Visualization component consuming URI of existing visualization, it will automatically use this color mapping from visualization object so no extra config is needed. If you use explicit components like BarChart or so, you need to transform colorMapping into form of so called predicates. For more info please read Gooddata.UI documentation and provide also colorPallete config. Hope this helps