Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

The ultimate Microsoft Fabric, Power BI, Azure AI & SQL learning event! Join us in Las Vegas from March 26-28, 2024. Use code MSCUST for a $100 discount. Register Now

Reply
Anonymous
Not applicable

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:

2019-07-11_16-13-13.png

 

 

 

 

 

 

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

Thanks in advance

1 ACCEPTED SOLUTION
Anonymous
Not applicable

Hi all,

Got this to work…

Added this array to the class Visual:

1.png

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

And in my drawSVG method:

2.png

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

Thanks for looking.

View solution in original post

3 REPLIES 3
Anonymous
Not applicable

Hi all,

Got this to work…

Added this array to the class Visual:

1.png

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

And in my drawSVG method:

2.png

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

Thanks for looking.

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





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




Anonymous
Not applicable

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

 

Thanks

Mason

Helpful resources

Announcements
Fabric Community Conference

Microsoft Fabric Community Conference

Join us at our first-ever Microsoft Fabric Community Conference, March 26-28, 2024 in Las Vegas with 100+ sessions by community experts and Microsoft engineering.