[{"id":"e0909540-8bde-4587-bb4d-02445746db2a","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"464b8e03-462d-4aed-8818-05d32ec3bf00","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"75b66fd4-b740-443d-bc6e-1782048b60a6","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"fd5d021d-0210-4d74-ba42-1a39ef14a385","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"a20f26ac-cd31-4e4d-9454-1e035b0f1587","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"7fce7040-1bb1-4a61-9fb7-2e19d569de50","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"f235557b-9781-471f-bf03-38bae6e3e953","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"c8c7b5d5-f5bd-4b68-a12f-3aae9804a844","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"dde44832-bb5c-45f3-8ebf-3badbc613cd9","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"a0c823ed-e22b-493b-aded-4d201c0fa480","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"2f064d57-b088-4bc5-a628-4e0d7e1a0c65","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"577a09da-dea1-42db-812f-4eeaa9274ece","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"0eb72dd3-8f8f-4039-93a8-500bbde2301e","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"3f2ea860-c764-43d8-ae3f-6e3b0314ce67","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"3604b8ce-1da0-413f-8274-7df0f7173573","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"f290406b-ced1-4c52-abad-979160a79f6b","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"d19bc9cd-ff53-4b0d-ab7e-a68c1497c4c6","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"ac046cee-82b9-4edf-a642-ae6d7cb21ebf","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"81eb70e8-f770-4384-9167-bc7c755ad052","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"1864834b-08ce-43f1-891b-c3cca6e04e95","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"f96cfec1-420c-4ca7-ab0a-cab482731073","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"d0dff477-9f56-483a-a9fc-cab648905b41","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"548568fe-dbd1-4da5-a489-d9b3edf75329","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"27658163-a479-432f-a192-dbed286beb3e","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"793a62d7-460d-4699-9304-edb2941268ac","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"8ddd80d5-886f-41b8-8e3f-f73aa8146c8d","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"43de3664-261b-4cf9-9945-fb519251f4c7","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"94759fce-692f-4779-b5f3-fce5c58f242c","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"2d6ebfad-f7d1-4cc5-8ba1-fdace3472056","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]}]
DEMO DOCS THEME EDITOR API
DOWNLOAD
(Showing Draft Content)

Chart Overlays

Overlays

In addition to geometrical shapes, such as columns, bars, or lines, that represent the data, a plot can contain additional items, called overlays, that represent the meta-information about the data. A typical example is a trendline that shows the linear regression of the data, as in the picture below.


image.png


You can add an overlay by selecting a plot and editing its Overlays collection in the Property Inspector.

All overlays has the following common properties:

  • Name – the name of the overlay

  • Type – the type of the overlay

  • Display – the Front value indicates that the overlay displays on the front side of the plot, the Back value indicates that the overlay displays on the back side of the plot

ActiveReportsJS chart supports several overlays types that we describe in detail below.

Reference lines

You can use Reference lines to display the data value at a given point. For example, the chart below has the reference line at the y-axis at the value that corresponds to the average sales amount for each sales channel.


image.png


A Reference line overlay exposes the following specific properties:

  • The Line Properties set the appearance of the reference line.

  • The Axis property specifies the axis with which the reference line is associated.

  • The Value property specifies the value of the reference line on the selected axis. You can use for static values.

  • The Field property specifies the data value on the selected axis that the reference line is associated with.

  • The Aggregate type property specifies the aggregation type that applies to the Field to calculate the value of the reference line.

  • The Legend Label property specifies the text that appears in the legend and associated with the reference line.

  • The Detail Level property specifies whether the reference line appears once per plot(Total) or once per detail encoding instance(Group).

Reference bands

You can use Reference bands to display a range of data values between given points. A Reference band overlay exposes the following specific properties:

  • The Line Properties and the Background Color set the appearance of the reference band.

  • The Axis property specifies the axis with which the reference band is associated.

  • The Start and End properties specify the start and the end values of the reference band on the selected axis. You can use for static values.

Linear trendlines

You can use Linear trendlines to display the best fit straight line that shows how data values increase or decrease at a steady rate. For example, the chart below has a linear trendline that shows the trend of the sales amount over three consecutive years.


image.png


A Linear trendline overlay exposes the following specific properties:

  • The Line Properties set the appearance of the trendline.

  • The Intercept property specifies the point where the trendline should cross the Y axis. You can use it for static values.

  • The Forward Forecast Period and the Backward Forecast Period properties specifies the number of data points for which the trendline extends forward and backwards relative to the last and the first data values, respectively.

  • The Field property specifies the data value with which the trendline is associated.

  • The Legend Label property specifies the text that appears in the legend and associated with the trendline.

  • The Detail Level property specifies whether the trendline appears once per plot(Total) or once per detail encoding instance(Group).

Exponential trendlines

You can use Exponential trendlines to display the best fit exponential curve that illustrates how data values increase or decrease and then level out. This trendline can only be used with data values that are greater than zero. A Exponential trendline overlay exposes the same properties as the Linear trendline overlay.

Power trendlines

You can use Power trendlines to display the best fit curved line to compare measurements that increase at a specific rate. This trendline can only be used with data values that are greater than zero. A Power trendline overlay exposes the same properties as the Linear trendline overlay, except for the Intercept property.

Logarithmic trendlines

You can use Logarithmic trendlines to display the best fit exponential curve that illustrates how data values increase or decrease and then level out. A Logarithmic trendline overlay exposes the same properties as the Linear trendline overlay, except for the Intercept property.

Polynomial trendlines

You can use Polynomial trendlines to display a best fit a curved line illustrating fluctuations in data values. For example, the chart below has a polynomial trendline that shows the trend of the sales amount over months.


image.png


A Polynomial trendline overlay exposes the same properties as the Linear trendline overlay. The Order property that has valid values from 2 to 6 indicates the complexity of the equation that defines the polynomial trendline.

Fourier series trendlines

You can use Fourier series trendlines to display a best fit Fourier Series line that illustrates fluctuations in data values. A Fourier series trendline overlay exposes the same properties as the Linear trendline overlay. The Order property that has valid values from 2 to 6 indicates the complexity of the equation that defines the Fourier series trendline.

Moving average trendlines

You can use Moving average trendlines to display a line that smooths out fluctuations in data values to show a pattern or trend more clearly.


ActiveReportsJS supports the following moving average trendline types:

A Moving average trendline overlays expose the following properties.

  • The Line Properties set the appearance of the trendline.

  • The Field property specifies the data value with which the trendline is associated.

  • The Legend Label property specifies the text that appears in the legend and associated with the trendline.

  • The Detail Level property specifies whether the trendline appears once per plot(Total) or once per detail encoding instance(Group).

  • The Period property that has valid values from 2 to the amount of data values indicates the number of data points used to calculate the moving average.

For example, the chart below has a simple moving average trendline with Period = 2 that shows the trend of the sales amount over months.


image.png