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 |
Greetings!
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.
REMOVING TITLE AND/OR LEGEND
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.
ADDING TITLE AND/OR LEGEND
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", margin.top * 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:
- SAP Managed Tags:
