Change the color of one category in a chart

let’s say you have a chart with a lot of categories, for example Google Analytics data per country

now let’s say you want to highlight only one country to see how it compare to the rest, it is possible using parameter

Define your Parameter

as of Sept 2020, you have to manually type the values, hopefully Google Data Studio add the option to get the values from an existing dataset.

Create a new dynamic calculated field

this is the interesting part of the blog, you can compare a dimension to a parameter using REGEX_MATCH πŸ™‚

if you select India for Example, the row for india will return India and anything else will be “Other”

Use custom Viz vega-lite

In google data studio by default the colors match the categories, in our case, we want to keep the level of details “Country”, but use the new field “Color_Selected” for ( wait for it …) colors πŸ™‚

luckily we have Vega/Vega-Lite custom viz.

it is a very powerful viz, literally you can define literaly any complex chart just by writing script the data is automatically mapped when you assign dimension and metrics, here is the script I am using

{
"$schema":"https://vega.github.io/schema/vega-lite/v4.0.2.json",
"mark":"line",
"encoding":{
"detail":{
"type":"nominal",
"field":"$dimension1"
},
"color":{
"type":"nominal",
"field":"$dimension2"
},
"y":{
"type":"quantitative",
"field":"$metric0",
"axis":{
"labels":false
}
},
"x":{
"type":"nominal",
"field":"$dimension0",
"axis":{
"labels":true
}
},
"tooltip":[
{
"type":"nominal",
"field":"$dimension0"
},
{
"type":"nominal",
"field":"$dimension1"
},
{
"type":"quantitative",
"field":"$metric0"
}
]
},
"height":600,
"width":1300
}

and here is the fields used from google analytics

and here is the final results, Link to the report

2 thoughts on “Change the color of one category in a chart”

  1. Thank you for this tips πŸ™‚ What’s the trick in Vega code to get the color right when you select the value of a parameter ?

    Like

    1. in vega, the color is controlled by this “color”: {“type”: “nominal”,”field”: “$dimension2”}, now all what we are doing is changing the value of Dimension2 which is Color_Select, which is controlled by the parameter

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s