Forum Discussion
An array of colour values
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
- Anonymous7 years ago
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.
3 Replies
- AnonymousNot applicable
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-pSuper User
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
- AnonymousNot applicable
Thanks for the info Daniel. Will be looking into that this afternoon.
Thanks
Mason