Skip to Content
Author's profile photo Annie Thornton

Tweak Existing Lumira Viz Extensions – Episode 2: Changing Colors

Blog Series

Episode 1: Data Measures & Dimensions
Episode 2: Changing Colors Episode 3: Axes
Episode 4: Chart Title & Legend Episode 5: Tooltips
Episode 6: Data Labels Episode 7: Adding Images

Related Links: Overview: SAP Lumira Extensions | Learn how | Viz Gallery I | Viz Gallery II

Hey guys,

Continuing our series of mini blogs on how to “tweak” existing Lumira visualization extension charts, in this episode, we will deal with a simple but important aspect of many data visualization charts – colors!

Who doesn’t love a splash of color? Colors are fun, yet it is so important that we know where to use the right color and when! SAP Lumira comes with a bundle of different color palettes which we can configure and morph into our extensions. We can also create and use our own custom color palettes using the default in-built properties for visualization extensions in SAP Web IDE.

DEFAULT COLOR PALETTE:


The .colorPalette() property comes shipped in Web IDE viz extension templates. It allows you to use Lumira’s custom color palette, or even define your own palette.

2a.PNG

You can then declare a variable to use this color palette as its range of colors.

2b.PNG

And then use this ‘color’ variable where you style your appended chart elements, for example:

2c.PNG

In this sample extension (a bubble chart), this is what it will look like:

2d.PNG

You can see the custom color palette used for each data point (bubble).

CUSTOM COLOR PALETTE:

If you want to redefine this default color palette, you can skip the first part of code where we declared the coloPalette variable and retrieved the default custom color palette property.

We can redefine our colors in the second part. Here I will use various shades of green.

2e.PNG

We can similarly include this ‘color’ variable in the function where we style the data points:

2c.PNG

This gives the following result:

2f.PNG

Isn’t that nice? You can now change the colors in your chart and play around with your options. You can choose any color you want (albeit wisely).

I’ve used http://www.color-hex.com/ to choose my custom colors. You can try it out too. There are also several other color choosing tools like Color Brewer, Coolors etc.

2g.PNG

Hope this was helpful in recoloring your extension. Please feel free to reach out to me if you have any questions about this.

Watch out for the next episode in our Lumira viz extension tweaking mini blog series: Axes!

Happy coloring! 🙂

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.