Rotating Text In The Text Widget

[intapiuser]

Dashboarding Need 

Often, we would need to beautify our dashboard in a logical sense and will have the need to rotate the text. Especially when we group our metrics horizontally, every row area will represent one group. To label each row, having a text that is rotated by 90 degree will make more visual sense than to have normal text. 

Challenge

In Sisense’s text widget, we don’t have the native functionality to rotate text. So, we need to get some alternative ways to perform that.

Solution

The alternate solution would be to use the script editor of the widget.

To rotate the text, first, we need to get the DIV id of the of the widget’s text area. Right click the text area of the text widget, select ‘Inspect‘ (Google Chrome) which opens up the developer tools. In that Developer tool window, use the ‘selection tool’ to select the text area of the text widget.

Now, make a note of the DIV id. Here, in the example, the DIV id is “editor-3”. Paste the following script in the widget script editor and click ‘Save’. Now refresh the widget.

widget.on("ready", function() {

$( "div[id=editor-3]" ).css("transform","rotate(-90deg)");

})

Note: Replace editor-3 with whatever is the id of the DIV in your text widget. It will mostly be the string “editor-” followed by a number based on the number of your widget (Sisense version 7.x)

After pasting the code, the dashboard will look like the following.