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


In this episode of our mini blog series on modifying existing extensions, we will go through how we can add or remove our title or legend in a chart. We've already mentioned as part of our Best Practices for Visualization Extensions, to have your title and legend checked when you create your visualization extension project in Web IDE.


Typically, if you go to the flow.js file in the Web IDE project, you should find the following code snippets for title and legend. If you want to remove them, you can just comment them out by highlighting the lines and pressing Ctrl + / on your keyboard.


A simple way to have the title and legend back is by "un-commenting" out the code snippet above in flow.js

However, in some extension projects, the title and legend code snippets may not be there at all. In this case, it is easier to add or append your own title and legend to the chart using SVG and D3.js

Append a Title

Just add the following D3 code snippet in render.js after you've rendered all of your other elements:

vis.append("text") .attr("x", width/2) .attr("y", * 2) .attr("class", "companyname_viz_ext_myextensionname_title") .text("My Custom Title");

Then go to default.css and add the following styling:

.companyname_viz_ext_myextensionname_title{ font-size: 32px; font-family: Sans-Serif; fill: #000; }

Make sure your class names are the same.

This should give you:

This can be applied to any extension.

Append a Legend

Similarly, we can append a legend to the chart as well. By appending it using D3 SVG elements. You can either go to flow.js and paste the following code snippet for including a legend:

var legendElement = sap.viz.extapi.Flow.createElement({ id: "sap.viz.chart.elements.ColorLegend", name: "Legend", dimensionIndex: [1] }); flow.addElement({ "element": legendElement, "propertyCategory": "legend", "place": "right" });

Or you can render one yourself. Take the sample code:

from lumira-extension-viz/render.js at master · SAP/lumira-extension-viz · GitHub

We get:

You can also write your own code using D3.js and append your own custom legends.

Next in our Lumira viz extension tweaking mini blog series: Tooltips!

Good luck on customizing your charts!! :smile: