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.
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).
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.
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 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.
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! 🙂