Skip to Content

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

Hello there!

Welcome to episode 3 of our mini blog series on modifying existing extensions to cater to your requirements. In this blog, we will cover how you can modify the axes of a chart (with axes, of course). This is not applicable to charts without axes. If you have a chart that has no axes and you would like to add them, please refer to the D3.js library documentation on how to add axes to a chart: SVG Axes · mbostock/d3 Wiki · GitHub

Here we will focus on how to modify a chart with already existing axes.

For most charts with axes, the axes ticks will have been defined according to the domains and ranges of the data measures and dimensions. We will not be touching these. Most of our extensions have been developed to enable automatic axes tick definitions depending on the data domains and ranges. We encourage that future extensions developed follow the same principle and avoid hard-coding axes labels and ticks to make the charts more flexible with different datasets.

Now what we really want to do is change the way the axes look. An example extension I will use here is the Extended Bubble Matrix. Let’s look at the different options we have for modifying axes attributes:

COLORED AXES

For example, if we want a colored X-Axis, we can go to the default.css file under the /style folder in the Web IDE project where we have copied all the source code from GitHub, for the particular extension you want to modify. In our example, we will go to where the axes have been styled in the default.css file.

3a.PNG

We currently have black colored axes. Let’s say we want to change our axes to a steel blue color:

3b.PNG

3c.PNG

Now let’s say we want a red X- Axis and a green Y-Axis. In our example code, the attributes for both axes have been combined. We can separate them and style them as follows:

3e.PNG

From this, we get the following outcome:

3d.PNG

THICK AXES


Now let’s say we want thicker axes. Add the following line of code to where the axes are styled:

3f.PNG

You can define any width you want in pixels. If you want it thicker, you can go higher. If you want it thinner, you can go lower. Width pixels can also be defined as decimal values like 0.5px etc.

3g.PNG

Let’s apply this thickness to our previously colored axes.

3h.PNG


DOTTED AXES


This isn’t a very common attribute and does not look too easy to read on a chart either. However, if you do happen to have a chart where it may be applicable, you can add the following line to the styling function:

3i.PNG

This is what we get:

3j.PNG

Or with our previously formatted axes, we get:

3k.PNG


AXES LABEL STYLE

Moving over to the axes labels, go to the section of the CSS that defines the styling of the text:

3l.PNG

Now modify that with this code:

3m.PNG

And we get:

3n.PNG

Again, you can have unique styling for the labels of individual axes.

There are so many ways in which you can style the axes of your charts. Explore your imagination and creativity and see what you can do, and how you can tweak your own stuff!

Please feel free to reach out to me if you have any questions about this.

Next in our Lumira viz extension tweaking mini blog series: Chart title & legend!

Happy fixising (axis-fixing)! 🙂

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply