Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
7 years ago
Solved

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

  • Anonymous's avatar
    Anonymous
    7 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

  • Anonymous's avatar
    Anonymous
    Not 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-p's avatar
      dm-p
      Super 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

      • Anonymous's avatar
        Anonymous
        Not applicable

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

         

        Thanks

        Mason