Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 
Active Participant

Blog Series

Episode 1: Data Measures & Dimensions
Episode 2: Changing ColorsEpisode 3: Axes
Episode 4: Chart Title & LegendEpisode 5: Tooltips
Episode 6: Data LabelsEpisode 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.


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.

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

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

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

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


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.

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

This gives the following result:

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 to choose my custom colors. You can try it out too. There are also several other color choosing tools like Color Brewer, Coolors etc.

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! :smile: