In my previous Geek Tweaks, I had blogged about Tweaking SAP Lumira client for performance. Check it out if you have not read it. In this post we will be discussing about customizing visualization properties in SAP Lumira.

“Geeks do not stick to defaults”

Note: Try them at your own risk.

It is well known that SAP Lumira offers a lot of visualization options like bar chart, stacked charts, various version of pie chart etc.. However, there are moments when we wish there was a way to modify chart properties like color, font, etc.

Geektip: We hate limitations & try to break them with our Geek Tweaks. ONLY for geeks.

Identifying the chart canvas

  1. Enable the debug mode in SAP Lumira.
  2. Modify the ini by adding -Dhilo.cef.frame.debug=true and editing -Dhilo.cef.cache.enabled to false.

Voila! You will now be able to debug the visuals from inside the Visualize pane.

Let’s open one chart type, BestRunCorp, for sample. It has a stacked column chart and a dual axis line chart. By default, the stacked column chart comes in blue color and the line chart in a fixed color, we will now modify the colors.

Geektip: We hate whirlwinds. Smartcuts are our way. Shortcuts are so 1990, right?

Finding chart class

  1. Right clicking anywhere outside the visualization and debug the chart extension.
  2. Select ‘Show DevTools’.

This opens up the DevTools where you can find the source of the page.

Open dev  tools in SAP Lumira

Open dev tools in SAP Lumira

 

This is quite similar to Chrome Developer tools. You can navigate around the code to find the corresponding elements and the class associated with them.

Geektip: We make the unknown, known. Well, almost.

The easy way

Feeling a code rush? Well, unlike the Developer tools in Chrome, we cannot select the element to see its corresponding HTML code. We need to publish our dataset to SAP Lumira cloud and view it in a browser.

Dev tools in SAP Lumira cloud

Dev tools in SAP Lumira cloud

We can now see all the elements and the corresponding code. You can apply the CSS you need locally and try out how it comes.

SAP Lumira uses SAPUI5 for rendering the chart and also the colors of the chart are embedded inline which you can find by examining this piece of code.

Code for the chart in SAPUI5

Code for the chart in SAPUI5

Geektip: The neo-geek isn’t retro at all. We’re cool. We’re trendy!

Applying CSS

One of the best things about CSS is the ability to override properties. In this case, we are going to override the default property of elements with our custom properties. After skimming the code, I found the things I needed to change. This is the bare skeleton style

.v-datapoint {
}
.v-bound {
}
.v-axis1 .v-lines {
}
.v-axis2 .v-lines {
}

We are modifying the color of the bar in the chart and also the line. I am applying the color in .v-datapoint and both the v-axis classes

.v-datapoint {
fill:#C08255;
}
.v-bound {
fill:#0FF;
}
.v-axis1 .v-lines {
stroke:#FB8547;
}
.v-axis2 .v-lines {
stroke:#FDEC68;
}

Changing the Title

For the fonts-geeks out there, SAP Lumira offers Open Sans’, Arial, Helvetica, sans-serif, for any reason you want to change it, do so by changing the font in the CSS.

.v-title {
font-family: Franklin Gothic Medium,Franklin Gothic,ITC Franklin Gothic,Arial,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 15.4px; color:#25354A;
}
.v-label {
font-family: Franklin Gothic Medium,Franklin Gothic,ITC Franklin Gothic,Arial,sans-serif; font-style: normal;
}
.viz-axis-title {
fill:#857B5D;
}

Packing all together

Now that we have the CSS, let us bring it into SAP Lumira. We need to make an extension with this CSS and install it inside SAP Lumira. Keep the render function clean and paste the CSS inside the style and pack the extension.  I have packed an extension and installed that inside SAP Lumira. Here is how it now looks like.

Chart before and after extension

Chart before and after extension

Chart before and after extension

Chart before and after extension

The extension can be installed on the SAP Lumira server to achieve the similar results. Build your own template styles for SAP Lumira based on the above methods.

This is just a start, lot more can be done with the magic of CSS and SAP Lumira. Feel free to share your templates or CSS in the comments section.

Happy geeking! Happy tweaking!

Learn More

Subscribe to our Newsletter

5600 Tennyson Pkwy
Suite 120
Plano TX 75024.

+1 888-227-2794

+1 972-232-2233

+1 888-227-7192

solutions@visualbi.com