In this article you will learn how to add Heading to any chart or tabular report with the ability to customize it. Now, Open the tabular report or visualization where you want to add Label, add the javascript code as shown. Text can be defined in that javascript. Here we have used a “Step Chart”. You can also used other charts like bar chart, bubble chart, area spline chart, spline chart, and so on.
Default View of a Chart
Javascript Code :
hi_container.set("postExecution", function () {
$('#main').prepend('<div class="subheading"><h3>Sub-Heading</h3></div>');
$('#main').prepend('<div class="heading"><h2>Heading</h2></div>');
}); // you can customize heading and subheading
In Javascript code you can customize the text content for heading. Also, you can use CSS code for defining font-color, font-size, text-alignment so on.
CSS Code :
.heading{
text-align : center; // alignment is customizable
color: green; // color is customizable
font-size: 20px; // font size is customizable
}
.subheading{
text-align : center;
color: green;
font-size: 20px;
}
How to apply a Javascript and CSS code
When you edit any existing or create report, you will be in Adhoc report edit page. Then, go to Custom tab, click script to Inject a Javascript Code and to apply CSS code click Style button.
After applying the code the output will be
In addition, you can add other CSS and Javascripts code for more customizations. Currently, the customization is applied on a chart also you can follow same steps to apply it on a Table and Cross-Tab.
For more info, contact us at demo@helicalinsight.com