Line Chart
Overview
A line chart uses the Cartesian Coordinate System to display a series of values in an X, Y grid. The main components of a line chart are:
- Axes
- Series
- Legend
The Axes typically include an X axis and Y axis. Each Axis can include options to draw separator lines, tick marks, labels and more.
The Series defines the data elements to add to the chart. Each series can define its own color, geometry and various other options.
The Legend displays a small graphic indicating the color and shape of the series data points along with a label describing the data.
Complete documentation on Line Charts can be found at LiveCharts2.
Examples
Basic Line Chart
Component Definition
{
"type": "LineChart",
"chartStyle": {
"legendPosition": "Top"
},
"xAxes": [
{
"forceStepToMin": true,
"minStep": 1,
"axisStyle": {
"separatorsAtCenter": true,
"showSeparatorLines": true,
"separatorsPaint": {
"color": "DarkGray"
},
"padding": { "top": 10 }
},
"labels": ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
}
],
"yAxes": [
{
"minLimit": 0,
"maxLimit": 14,
"axisStyle": {
"separatorsAtCenter": true,
"showSeparatorLines": true,
"separatorsPaint": {
"color": "DarkGray"
},
"padding": { "right": 10 }
},
"labelStyle":{
"alignment": "Start"
}
}
],
"style": {
"layoutOptions": {
"height": 400
}
},
"defaultSeriesStyle": {
"geometryType": "Circle",
"lineSmoothness": 1,
"geometrySize": 6,
"legendSize": 8,
"geometryFill": {
"color": "White"
}
},
"series": [
{
"name": "@(monthsChart[0].name)",
"dataQuery": "monthsChart[0].values",
"style": {
"stroke": {
"color": "#4F5889",
"stroke": 2
},
"geometryStroke": {
"color": "#4F5889",
"stroke": 2
}
}
},
{
"name": "@(monthsChart[1].name)",
"dataQuery": "monthsChart[1].values",
"style": {
"stroke": {
"color": "#CE568C",
"stroke": 2
},
"geometryStroke": {
"color": "#CE568C",
"stroke": 2
}
}
}
]
}
Data
{
"monthsChart": [
{
"name": "Expenses",
"values": [11,6,13,3,4,11,9,6,8,8,13,12]
},
{
"name": "Sales",
"values": [1,2,3,2,5,6,7,6,6,4,7,9]
}
]
}
Area LineChart
Component Definition
{
"type": "LineChart",
"style": {
"layoutOptions": {
"height": 300
}
},
"chartStyle": {
"legendPosition": "Bottom"
},
"defaultSeriesStyle": {
"lineSmoothness": 1
},
"series": [
{
"name": "@(basicChart[0].name)",
"dataQuery": "basicChart[0].values",
"style": {
"fill": {
"gradient": {
"type": "linear",
"colors": ["#B457BD", "#CA5277"],
"direction": "TopToBottom"
}
}
}
},
{
"name": "@(basicChart[1].name)",
"dataQuery": "basicChart[1].values",
"style": {
"fill": {
"gradient": {
"type": "linear",
"colors": ["#656CF1", "#8CCCEE"],
"direction": "TopToBottom"
}
}
}
},
{
"name": "@(basicChart[2].name)",
"dataQuery": "basicChart[2].values",
"style": {
"fill": {
"gradient": {
"type": "linear",
"colors": ["#BBF468", "#ADF7BF"],
"direction": "TopToBottom"
}
}
}
}
]
}
Data
{
"basicChart": [
{
"name": "High",
"values": [7,9,8,9,11]
},
{
"name": "Med",
"values": [5,4,6,6,7]
},
{
"name": "Low",
"values": [2,3,3,4,3]
}
]
}
Schemas
LineChart
| key | type | required | description |
|---|---|---|---|
| type | string |
required | A string defining the component type as a LineChart. |
| title | string |
optional | An optional Title for the chart. Location, formatting and other settings for the title are set in the ChartStyle. |
| chartStyle | string or ChartStyle |
optional | Either a style identifier or a style object used to define various settings for the chart. |
| series | LineChartSeries[] |
optional | An array of LineChartSeries objects that define each data series to display in the chart. This value is not allowed if seriesQuery is defined. |
| seriesQuery | string |
optional | A JSONata query selecting the series data to display in the chart. The return value of the query must be an array of ChartSeries objects. This value is not allowed if series is defined. |
| seriesQueryStyles | LineChartSeriesStyle[] |
optional | An array of styles to use if using seriesQuery. Styles are applied in order and reused once exhausted. Required if seriesQuery is defined. |
| defaultSeriesStyle | string or LineChartSeriesStyle |
optional | Either a style identifier or a style object used to define default settings for all Series in the chart. Series styles can be overridden at the Series level in the chart definition. |
| xAxes | ChartAxis[] |
optional | An array of ChartAxis objects that will define the X axes of the chart. Typically, a chart only has a single X axis, but multiple axes are supported. |
| yAxes | ChartAxis[] |
optional | An array of ChartAxis objects that will define the Y axes of the chart. Typically, a chart only has a single Y axis, but multiple axes are supported. |
| gridRow | integer |
optional | The grid row to place the component. Only applicable when inside a GridV2 component. |
| gridColumn | integer |
optional | The grid column to place the component. Only applicable when inside a GridV2 component. |
| gridRowSpan | integer |
optional | The number of rows to span inside the grid. Only applicable when inside a GridV2 component. Default value is 1. |
| gridColumnSpan | integer |
optional | The number of columns to span inside the grid. Only applicable when inside a GridV2 component. Default value is 1. |
| rowWidth | float |
optional | A fixed width for the component inside the row. Only applicable when inside a RowV2 component. |
| rowRelativeWidth | float |
optional | A proportional width for the component inside the row. Only applicable when inside a RowV2 component. |
LineChartSeries
| key | type | required | description |
|---|---|---|---|
| name | string |
required | A string defining the name of the series. As with any other string, string substitution is possible with a JSONata query by using @(QUERY) syntax. |
| seriesData | ChartSeriesData[] |
optional | An array of ChartSeriesData objects that will define the data for the series. If defined, the dataQuery and labelQuery settings are ignored. |
| dataQuery | string |
optional | A JSONata query string that will be used to extract values for this data series. The return value of the query must be an array of floats or integers. |
| labelQuery | string |
optional | A JSONata query string that will be used to extract labels for this data series. The return value of the query must be an array of strings. |
| style | string or LineChartSeriesStyle |
optional | Either a style identifier or a style object used to define options for the series. For a more detailed explanation of the style system, see Styles. |
LineChartSeriesStyle
| key | type | required | description |
|---|---|---|---|
| fill | Paint |
optional | A Paint object that describes the fill color of the data series. |
| stroke | Paint |
optional | A Paint object that describes the stroke color and width of the data series. |
| showDataLabels | bool |
optional | If true, data labels will be drawn for each data point in the series. |
| dataLabelsStyle | string or ChartLabelStyle |
optional | Either a style identifier or a ChartLabelStyle object used to define the style for the series labels. |
| legendSize | number |
optional | The size of the legend for the series, in pixels. |
| dataPadding | Point |
optional | Sets the minimum distance from the edges of the series to the axis. Valid values are 0 to 1, where 0 is no padding and 1 is the max padding. |
| lineSmoothness | number |
optional | Defines the smoothness of chart lines. 0 is the most straight and 1 is the most curved. Default is 0. |
| geometryType | string |
optional | Defines the shape of data points on the line. Valid options are square and circle. |
| geometrySize | number |
optional | Sets the size of the data points in pixels. |
| geometryFill | Paint |
optional | A Paint object that describes the fill color of the data points in the series. |
| geometryStroke | Paint |
optional | A Paint object that describes the stroke color and width of the data points in the series |