line-chart
The component can display statistics related to data records represented in a line chart. This can show a single or multiple data series for comparative purposes and highlight specific regions or ranges on the chart to make it easier for users to interpret and analyze the data. Mostly used in jig.default or jig.list.
Some properties are common to all components, see Common component properties for a list and their configuration options.
Core structure | |
---|---|
series | data - values to be used in the chart. color - defines the color of the bar used in the chart. |
xAxis | categories to display on the x-axis. |
yAxis | min and max values that display on the y-axis. The max property doesn't have to be defined, in this case, it will automatically be calculated depending on your data. |
Other options | |
---|---|
chart |
|
legend | isHidden - The setting of a boolean value if the legend (naming of the series) should be displayed under the chart. |
plotBands | Use plotbands to highlight specific regions or ranges on the chart, making it easier for users to interpret and analyze the data. - The from and to properties define the area to be filled with color. Specify the range using the from and to properties with numeric values. - color sets the color of the band for the y-axis, choose a color from the provided color palette. |
plotOptions | series - Different properties available to manipulate the data shown in the bar such as width of columns, the interval between two points, option to hide markers. |
series |
|
xAxis |
|
yAxis |
|
The line-chart control expects a JSON object. Using a REST call can return data as text. To get the JSON object for the REST call there are two options:
- Add the $eval function to the expressions as shown below:
- In the datasource specify the fields to be returned as a JSON object by using the jsonProperties in the datasource query as shown below:
The chart shows an annual overview of finances. The x-axis shows the months and the y-axis is the monetary amount. The data points are easy to see as we used the plotBands property to add color. Single or multiple bands can be defined by adding the form, to and color properties.
Examples: See the full example using static data in GitHub.