This video explains how to add colours to your custom visual for Power BI. This is video #11 of the Power BI Custom Visual Development Fundamentals series, please check the playlist below for the set.

Video Transcript

Okay, so in this video we’re gonna look at how to add colours to your custom bar chart.

For the sake of the example, we’re going to paint each column with its own distinct colour.

Now in a real-world scenario, you will likely use a single colour per series of data, but, to just show you how this works, a colour per is bar far more useful.

Doing this is very easy and it only takes three steps.

First, we’re going to go back and update our data point.

If you recall from previous videos, each data points in this chart, really maps to a single bar in the chart, so that’s the element we want to affect.

So to do that, we’re gonna add a new property called, well, colour.

This will be a string and it will hold your typical hexadecimal colour codes you see in any other kind of web programming.

Okay, so now we update the data point class, we need to fill the actual data point items with their respective colors.

To do that, we need to go all the way to the getViewModel function.

You’ll notice in fact, that Visual Studio is already complaining about something here.

And correct because we just added a new property to the data point, so we have to fill up here when creating a new data point object.

That’s a thumbs up for typescript.

So anyway, let’s fix this by adding the colour to each data point.

colour: this.host.colorPalette.getColor(categories.values[i]).value

Okay, so what we’re doing here is asking for some help from power bi.

host.colorPallete grants us access to the color theme that power bi is currently using.

This allows us to keep our colors consistent with whatever theme the report designer has decided to use.

In addition to that, the getColor function can take any string and associate that string with a theme color.

This works pretty much a global dictionary of name-to-color and this what allows different visuals to magically use the same color for the same bit of information, across an entire report.

In this case, we are requesting power bi to give us a specific color for each specific category name we provide.

This will make the chart look very cheerful, but in a more complex visual, you will usually request a different color per series and not per single data point.

Anyway, now that the view model is all setup, all we need is to render those data points accordingly.

To do that, let’s get back to the rendering, right to the bit where we are setting attributes on each bar.

So what we want to now, is, instead of adding a regular html attribute, we want to add a CSS style rule instead.

So to do that, we can use to the style function of the D3 bars object, and provide a json object with the CSS properties we want set.

To set the fill color of a rectangle SVG object, we just need to add a fill style here, a give it whatever colour the current data point has.

fill: d => d.colour

And that’s it, nothing to it.

Let’s save the project, let pbiviz do its thing and let’s see how the visual looks like now.

And there you have it, one very cheerful bar chart.

Thank you for watching and if you found this useful, remember to thumbs and join the notification squad so you’re the first to know about new content.

In next the video in this series, we’ll look at how to make those bars clickable so you can interact and filter other visuals in the report.

See ya next time.