Colors matching in pivot table

#1

Hi guys, I’m using the property color.match to make some values consistent regarding to colors in different visualizations. My question is: Does the Pivot support this feature? What about the Slicer?

#2

Pivot does not support the color object as other charts do. However it supports custom cell formatting, which can be used to accomplish what you want, basically you can have a function like this one:

const formatter = {
    fields: ['category'],
    format: function (field, value) {
        // Match the values to color
        const map = {
          'pop': 'red',
          'opera': 'blue',
          'plays': 'green',
          'musicals': 'yellow'
        };

        return { 
          value: '',
          style: { 
            'margin-top': '10px;',
            'width': '10px',
            'height': '10px',
            'border-radius': '50%',
            'background-color': map[value] 
          }
        }
    }
}

and then inject that to your pivot like this

.set('cellFormat', formatter)
#3

Thanks so mucho @eduardo, I actually copy and pasted your code, modified the values and it worked. However I don’t understand why no value is returned? I mean here: value: ' ' . I’m asking since I’d like to get fancy and render other things like icons maybe if possible.

#4

For better understanding think that what you are returning is an html element, a div to be precise and the value property is the content of the div. In this case since you just need to display a color, you don’t need any content for the it, just the style to make it a circle with 10 pixels for width and height.

So whatever you return in the value property will be rendered within the div. If you want to display an image, you could return an img tag like <img src="path/to/my-image.jpg"> or an icon like <i class="search"></i> or any other valid html. Just make sure to style it in a proper way so your Pivot looks good.