Charts

Line and area charts allow the user to click on a data point to see the value. The chart below shows how the tooltip appears.

However, it can be difficult to gauge where the actual value is on the horizontal and vertical axes. Using the “crosshair” keyword in the tag will enable a horizontal and vertical line that makes it easier for the user to see the value in relation to the chart. The color of the crosshair also shows which value is selected.

The “crosshair” keyword will by default enable a line for both the horizontal and vertical axis. The “crosshair” property can also use the value “horizontal” or “vertical” to limit the line to the respective axis.

Charts presentation style will display as many reasonably-sized charts as possible on each device size. By default, each chart is of size “small”, which means that the chart will use 1/3 of the available space in each dimension on large screens.

On medium-sized devices, the charts will use 1/2 of the available space.

The smallest devices will display only one chart at a time.

The user is able to change the size of the charts using the context menu in the top right corner of each chart. “Large” is only available on large devices, and “Medium” is only available on moderately sized devices and tablets.

The developer is also capable of specifying the default size for each chart by adding the keywords “medium” or “large”. Suppose that the Orders controller has manually specified charts matching those that have been automatically created. The highlighted tags below will specify the default sizes for those charts.

Upon regenerating the app and refreshing the page, notice that the default sizes have been applied. The first chart is of “medium” size and now takes 2/3s of the screen on large devices.

The “large” fourth chart takes the whole screen.