Components
charts

line-chart

9min

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.

Line Chart Preview
Line Chart Preview


Configuration options

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

  • title and subtitle - Name and a short description of your chart.
  • height and width - The parameters of the chart displayed (in pixels).

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

  • datalabels - isEnabled can be set to true or false
  • layout - options are:
    • area
    • area-gradient
    • line
  • name - The naming of the actual series.

xAxis

  • isFirstLabelHidden value is either true to hide the first label or false to display the first label. The property doesn't have to be defined, by default the first label is shown.
  • isFirstTickHidden value is either true/false. Set to true hides the whole axis.
  • isHidden value is either true/false.
  • isLastLabelHidden value is either true to hide the last label or false to display the last label. The property doesn't have to be defined, by default the last label are shown.
  • isLastTickHidden value is either true to hide the last line and label or false to display the last line and label. The property doesn't have to be defined, by default the last label and line are shown.
  • labels - Label of axis, a selection of different formats such as dateFormat, currency, unit, and signDisplay are available.
  • min and max - Minimum and maximum values that should be displayed on the x-axis.
  • minPadding - When no categories set, a 1% space is made on the left and right of the chart so the id doesn't start on the left or ends on the right edge exactly. The default is set to 0.02 (x-axis) and 0.05 (y-axis).
  • tickAmount - The number of ticks to display on the x-axis. The final amount doesn't have to be exactly the same number as you pass into it. Round up to 6 to give the chart a good set of numbers 0, 20, 40, 60, 80, 100. Set ticks to 3 will be honored and shows 0, 50, and 100.

yAxis

  • isFirstLabelHidden value is either true/false. Set to true hides the first label. The property doesn't have to be defined, by default the first label is shown.
  • isFirstTickHidden value is either true/false. Set to true hides the whole axis.
  • isHidden value is either true/false. Set to true the last label is hidden.
  • isLastLabelHidden value is either true to hide the last label and line or false to display the last label and line. The property doesn't have to be defined, by default the last label and line are shown.
  • isLastTickHidden value is either true to hide the last line and label or false to display the last line and label. The property doesn't have to be defined, by default the last label and line are shown.
  • labels - Label of axis, a selection of different formats such as currency, numberStyle, compactDisplay and notation is available.
  • minPadding - When no categories set, a 1% space is made on the left and right of the chart so the id doesn't start on the left or ends on the right edge exactly. The default is set to 0.02 (x-axis) and 0.05 (y-axis).
  • min and max - Minimum and maximum values that should be displayed on the y-axis.
  • tickAmount - The number of ticks to display on the x-axis. The final amount doesn't have to be exactly the same number as you pass into it. Round up to 6 to give the chart a good set of numbers 0, 20, 40, 60, 80, 100. Set ticks to 3 will be honored and shows 0, 50, and 100.

Considerations

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:
YAML

  • In the datasource specify the fields to be returned as a JSON object by using the jsonProperties in the datasource query as shown below:
YAML


Examples and code snippets 

Financial line-chart
Financial line-chart


The widget displays an annual overview of finances. The x-axis shows the months and the y-axis is the monetary amount. Thanks to number formatting, we can set any currency.

Examples: See the full example using static data in GitHub. See the full example using dynamic data in GitHub.

Datasources: See the full datasource for dynamic data in GitHub.



line-chart (static)
line-chart (dynamic)
datasources (dynamic)

Multiple series
Multiple series


The widget displays an annual overview of finances. The x-axis shows the months and the y-axis the monetary amount. Thanks to number formatting, we can set any currency.

Examples: See the full example using static data in GitHub. See the full example using dynamic data in GitHub.

Datasources in order series1 and series2: See the full datasource for dynamic data series 1 and series 2 in GitHub.

line-chart-multiple (static)
line-chart-mulitple (dynamic)
datasources (dynamic)


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.

Line chart with plot bands
Line chart with plot bands

line-chart-plotbands

Line-chart using expressions
Line-chart using expressions


In this example expressions are used to dertermine the min, max, and tickAmount of a line-chart . The x-axis shows the quarters and the y-axis the monetary amount using the format property to display the currency.

Examples: See the full code sample in GitHub.

Datasources See the datasource code sample in GitHub.

line-chart-multiple-dynamic
series2-dynamic




Updated 24 Jul 2024
Doc contributor
Did this page help you?
Yes
No