cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
fatdog Frequent Visitor
Frequent Visitor

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

Accepted Solutions
fatdog Frequent Visitor
Frequent Visitor

Re: An array of colour values

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.

3 REPLIES 3
fatdog Frequent Visitor
Frequent Visitor

Re: An array of colour values

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.

dm-p Established Member
Established Member

Re: An array of colour values

Hi @fatdog 

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

fatdog Frequent Visitor
Frequent Visitor

Re: An array of colour values

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

 

Thanks

Mason

Helpful resources

Announcements
Back to School Contest

Back to School Contest

Engage and empower students with Power BI!

MBAS Gallery

Watch Sessions On Demand!

Continue your learning in our online communities.

Summit Australia 2019

Summit Australia 2019

Travel to Melbourne and network with thousands of peers!

PBI Community Highlights

PBI Community Highlights

Check out what's new in the Power BI Community!

Top Ideas
Users Online
Currently online: 28 members 817 guests
Please welcome our newest community members: