Chart Styling Changes for the Application

The style of the Chart by default and the Inform charts can be styled to meet your needs. The changes will flow through to the main application and also to m.html as well. 

Go to Builder site and click on Chart Properties

There is a new Module called "Chart Properties". It is available to all Builders.

When the Module Opens, click on "Create New"

Name the Chart Property. It is important to name it clearly as you need to differentiate between different layouts


You can set the properties for any of the chart types, including width and fill. Using the Line Chart as an example, see how the chart updates depending on the Line Chart settings

Change the width, size and fill to meet your needs

Ensure you set the Borders on the Area and Bar Charts, note these will not be highlighted effectively unless you go for less that 225 for Transparency

Carefully set the Bar and Area chart settings to reflect the type of data you will be showing. Note that the transparency is from 225 (saturated) to 0 (none), and you can see the difference in the border saturation and the transparenc of the fill in the second chart in the images shown here.

Customise each Type of chart according to your needs then click Save

The name will appear in the Chart Properties Collection List and can be opened and edited

One of the Chart Properties Collections can be applied to the entire site. Only the Site Owner can make this change on the Application Details.

There is the ability to select the Default Chart Properties setting, and the list of previously created charts will appear for selection

Select the desired one and click "Update Application"

Now ALL Charts that have a Chart by Default or an In Form Chart in them will display with these Chart settings

Note that while a chart layout might look OK on the Builder, it may not look OK on the main application with live data (as shown in the image above)

Test alternate layouts to ensure the charts display the data well

The example shows that a different layout has been applied.

Create the layout that best suits the data. Note that some Bar widths may be smaller change with data across multiple years if all data is selected to be graphed.

An example on m.html


Add your comment

E-Mail me when someone replies to this comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.