0

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?

Stewart Stephens
  • 27
  • 4

1 Answers1

1

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

Ivan Nejezchleb
  • 151
  • 3
  • The `guid3` and `guid4` turned out to be the code for the colors coming from the project-defined custom palette. I was able to get that color palette (https://help.gooddata.com/display/doc/Importing+Custom+Color+Palettes) and specify it in the component (https://sdk.gooddata.com/gooddata-ui/docs/next/chart_config.html#Custom-color-palette) to get the color mapping to work. – Stewart Stephens Jan 28 '19 at 19:53