An array of colour values

[Anonymous]

Hi all,

Sorry if this is a dumb question, but I have been unable to find an example, or solution anywhere.

I am creating a custom visual where I have svg images floating around on the visual. I need to have each image have its own individual colour (and size – but that will be a question for another time 🙂

I want an array of colours that I can iterate through and assign to the “fill=” of the shape. I was hoping something along these lines might work:

I have tried all sorts like this, but cannot get anything to work. What is the best way to approach this?

Thanks in advance

[Anonymous · Accepted solution]

Hi all,

Got this to work…

Added this array to the class Visual:

Pushed colours: ””, to the properties of the svg in the HTMLElement

And in my drawSVG method:

Now I need to find a better way of getting a list of colours into the array.

Thanks for looking.

[dm-p]

Hi @Anonymous 

The host object in the visual constructor exposes an ISandboxExtendedColorPalette property named colorPalette. This extends IColorPalette, which has a method named getColor. You can pass in a value to this to allocate a colour from your theme's palette for the specificed value. IIRC  this has up to 240 entries before repeating from the beginning but it can be inspected by doing a console.log on it to confirm the array length.

Alternatively, you can take a look at powerbi-visuals-utils-colorutils but the overhead is slightly higher than grabbing it stright from the constructor.

Quite a few visuals use it already so there are a number of open source examples to refer to. In one of my visuals, I'm assigning to a class property here, and using/assigning it here. It's also in Microsoft's sample bar chart repo if you need a simpler example.

Hopefully this helps you out!

Good luck,

Daniel

[Anonymous]

Thanks for the info Daniel. Will be looking into that this afternoon.

Thanks

Mason