# Line Chart
The Line Chart widget includes several options to display and customize data visualizations in your application. Color, time span, and aggregation method are some of the options available in this widget.
For a basic overview of the widget, visit [this article](https://help.ubidots.com/en/articles/2596623-line-chart-and-double-axis-widgets), which covers the basics of setting up a Line Chart widget.
This section covers only the advanced features of the Line Chart widget.
## ECharts configuration
{% hint style="warning" %}
This option is only available to Enterprise users.
{% endhint %}
[ECharts](https://echarts.apache.org/en/index.html) is a powerful open-source visualization library designed to create interactive and customizable charts. ECharts provides extensive customization options that let you tailor the appearance and behavior of charts to fit specific requirements. With it, you can add new layers of customization to your widgets, simplify monitoring, and better support your users' needs.
The Line Chart widget is built on top of the ECharts library. This gives users access to all features provided by the library through the **ECharts configuration** option in the **APPEARANCE** tab:
After you click the option, a large drawer opens from the left and shows the [ECharts options JSON](https://echarts.apache.org/en/option.html#title). It maps all fields available in the UI and also provides an editing environment where users can take full advantage of the [Line](https://echarts.apache.org/en/option.html#series-line) and [Bar](https://echarts.apache.org/en/option.html#series-bar) series types.
{% hint style="info" %}
All fields exposed through the UI are mapped bidirectionally. This means that if you make a change in the UI, it is reflected in the ECharts options JSON, and vice versa.
{% endhint %}
### Valid placeholders
The following are valid placeholders that you can use at the device or variable level.
#### Device
Access via `device.`
```
id
name
label
description
context
context.
context._icon
context._color
context._config
context._config.
context._config..key
context._config..text
context._config..type
context._config..value
context._device_type
context._location_type
context._device_type_id
context._location_fixed
context._location_fixed.lat
context._location_fixed.lng
icon
color
```
#### Variable
Access via `variable.`
```
id
name
label
description
unit
icon
color
```
## Examples
The examples below use the ECharts configuration option to produce the results shown. Without this advanced option, you cannot get the same visualization using only the fields available in the UI.
### Area boundaries
This example creates colored areas in the widget that act as boundaries, making it easier to see whether the data is within expected ranges. Red indicates an alarm, while green and orange indicate safe and warning values, respectively.
This is the ECharts JSON for a single variable. You need to adjust the [`series[0].markArea.data`](https://echarts.apache.org/en/option.html#series-line.markArea.data) values so the limits reflect your specific needs and data behavior:
JSON example
```json
{
"yAxis": [
{
"type": "value",
"axisLine": {
"lineStyle": {
"color": "#5e5e5e40"
}
},
"axisLabel": {
"color": "#5E5E5E",
"fontSize": 11
},
"splitLine": {
"lineStyle": {
"color": [
"#5e5e5e"
],
"opacity": 0.1
}
},
"min": 5,
"max": 30,
"name": "",
"nameLocation": "center",
"nameGap": 70,
"nameTextStyle": {
"color": "#5E5E5E"
},
"position": "left",
"show": true,
"offset": 0,
"gridIndex": 0
}
],
"series": [
{
"z": 0,
"name": "{{variable.name}} [{{variable.unit}}] ({{device.name}})",
"step": false,
"type": "line",
"stack": null,
"symbol": null,
"smooth": true,
"markArea": {
"data": [
[
{
"label": {
"show": true,
"color": "red",
"position": "insideLeft",
"formatter": "Alarm"
},
"yAxis": 25,
"itemStyle": {
"color": "rgba(255, 173, 177, 0.4)"
}
},
{
"yAxis": 99
}
],
[
{
"yAxis": 24,
"itemStyle": {
"color": "rgba(252, 158, 7, 0.4)"
}
},
{
"yAxis": 25
}
],
[
{
"label": {
"show": true,
"color": "green",
"position": "insideLeft",
"formatter": "Normal"
},
"yAxis": 15,
"itemStyle": {
"color": "rgba(204, 255, 153, 0.4)"
}
},
{
"yAxis": 24
}
],
[
{
"yAxis": 14,
"itemStyle": {
"color": "rgba(252, 158, 7, 0.4)"
}
},
{
"yAxis": 15
}
],
[
{
"label": {
"show": true,
"color": "red",
"position": "insideLeft",
"formatter": "Alarm"
},
"yAxis": 14,
"itemStyle": {
"color": "rgba(255, 173, 177, 0.4)"
}
},
{
"yAxis": -99
}
]
],
"itemStyle": {
"color": "rgba(255, 173, 177, 0.4)"
}
},
"markLine": {},
"animation": false,
"itemStyle": {
"color": "#465676",
"opacity": 0.8,
"borderColor": "#465676"
},
"lineStyle": {
"color": "#465676",
"width": 2
},
"showSymbol": false,
"symbolSize": 8,
"yAxisIndex": 0,
"connectNulls": true
}
],
"xAxis": [
{
"type": "time",
"name": "",
"nameLocation": "center",
"nameGap": 28,
"nameTextStyle": {
"color": "#A4A5A7"
},
"axisLabel": {
"color": "#5E5E5E",
"fontSize": 11
},
"axisLine": {
"lineStyle": {
"color": "#5e5e5e40"
}
},
"splitLine": {
"lineStyle": {
"color": [
"#5E5E5E"
],
"opacity": 0.1
}
},
"axisTick": null,
"z": 2
}
],
"dataZoom": [
{
"show": true,
"filterMode": "none",
"xAxisIndex": 0,
"realtime": false,
"textStyle": {
"color": "#5E5E5E",
"fontSize": 11
},
"dataBackground": {
"areaStyle": {
"color": "#5E5E5E"
}
},
"right": 45,
"left": 45
}
],
"legend": {
"itemHeight": 7,
"itemWidth": 15,
"pageIconColor": "#5E5E5E",
"pageIconInactiveColor": "#5E5E5E",
"pageTextStyle": {
"color": "#5E5E5E"
},
"textStyle": {
"color": "#5E5E5E"
},
"top": 0,
"type": "scroll",
"show": true
},
"grid": {
"bottom": 60,
"containLabel": true,
"left": 60,
"right": 60,
"top": 10
},
"tooltip": {
"confine": true,
"trigger": "axis"
}
}
```
### Color-Coded Line Chart
This example shows a line chart where the line color changes dynamically based on the value of the data points.
You can set the color ranges by modifying each of the [pieces](https://echarts.apache.org/en/option.html#visualMap-piecewise.pieces) within the [visualMap](https://echarts.apache.org/en/option.html#visualMap) element in the following ECharts JSON:
Color-Coded Line Chart ECharts JSON
```json
{
"yAxis": [
{
"type": "value",
"axisLine": {
"lineStyle": {
"color": "#5e5e5e40"
}
},
"axisLabel": {
"color": "#5E5E5E",
"fontSize": 11
},
"splitLine": {
"lineStyle": {
"color": [
"#5e5e5e"
],
"opacity": 0.1
}
},
"min": "dataMin",
"max": "dataMax",
"name": "Humidity",
"nameLocation": "center",
"nameGap": 70,
"nameTextStyle": {
"color": "#5E5E5E"
},
"position": "left",
"show": true,
"offset": 0,
"gridIndex": 0
}
],
"series": [
{
"z": 0,
"name": "{{variable.name}} [{{variable.unit}}] ({{device.name}})",
"step": false,
"type": "line",
"stack": null,
"symbol": null,
"markLine": {},
"animation": false,
"itemStyle": {
"color": "{{variable.color}}",
"opacity": 0.8,
"borderColor": "{{variable.color}}"
},
"showSymbol": false,
"symbolSize": 8,
"yAxisIndex": 0,
"connectNulls": true
}
],
"xAxis": [
{
"type": "time",
"name": "Time",
"nameLocation": "center",
"nameGap": 28,
"nameTextStyle": {
"color": "#A4A5A7"
},
"axisLabel": {
"color": "#5E5E5E",
"fontSize": 11
},
"axisLine": {
"lineStyle": {
"color": "#5e5e5e40"
}
},
"splitLine": {
"lineStyle": {
"color": [
"#5E5E5E"
],
"opacity": 0.1
}
},
"axisTick": null,
"z": 2
}
],
"dataZoom": [
{
"show": true,
"filterMode": "none",
"xAxisIndex": 0,
"realtime": false,
"textStyle": {
"color": "#5E5E5E",
"fontSize": 11
},
"dataBackground": {
"areaStyle": {
"color": "#5E5E5E"
}
},
"right": 45,
"left": 45
}
],
"legend": {
"itemHeight": 7,
"itemWidth": 15,
"pageIconColor": "#5E5E5E",
"pageIconInactiveColor": "#5E5E5E",
"pageTextStyle": {
"color": "#5E5E5E"
},
"textStyle": {
"color": "#5E5E5E"
},
"top": 0,
"type": "scroll",
"show": false
},
"grid": {
"bottom": 60,
"containLabel": true,
"left": 60,
"right": 60,
"top": 10
},
"tooltip": {
"confine": true,
"trigger": "axis"
},
"visualMap": {
"show": false,
"top": 50,
"right": 10,
"pieces": [
{
"gt": 0,
"lte": 5,
"color": "#93CE07"
},
{
"gt": 5,
"lte": 10,
"color": "#FBDB0F"
},
{
"gt": 10,
"lte": 15,
"color": "#FC7D02"
},
{
"gt": 15,
"lte": 20,
"color": "#FD0100"
},
{
"gt": 20,
"lte": 25,
"color": "#AA069F"
},
{
"gt": 25,
"color": "#AC3B2A"
}
],
"outOfRange": {
"color": "#999"
}
}
}
```
### Color-Coded Area Line Chart
This example shows a line chart similar to the previous one. It maps the Y-axis value to a color and also colors the area under the chart:
Below is the configuration for this line chart. You can customize the colors and ranges for each of the [pieces](https://echarts.apache.org/en/option.html#visualMap-piecewise.pieces) within the [visualMap](https://echarts.apache.org/en/option.html#visualMap) as needed:
Color-Coded Area Line Chart JSON
```json
{
"yAxis": [
{
"type": "value",
"axisLine": {
"lineStyle": {
"color": "#5e5e5e40"
}
},
"axisLabel": {
"color": "#5E5E5E",
"fontSize": 11
},
"splitLine": {
"lineStyle": {
"color": [
"#5e5e5e"
],
"opacity": 0.1
}
},
"min": "dataMin",
"max": "dataMax",
"name": "Default Y-axis",
"nameLocation": "center",
"nameGap": 70,
"nameTextStyle": {
"color": "#5E5E5E"
},
"position": "left",
"show": true,
"offset": 0,
"gridIndex": 0,
"lineStyle": {
"color": "#5470C6",
"width": 3
}
}
],
"series": [
{
"z": 0,
"name": "{{variable.name}} [{{variable.unit}}] ({{device.name}})",
"step": false,
"type": "line",
"stack": null,
"symbol": null,
"markLine": {},
"animation": false,
"areaStyle": {},
"itemStyle": {
"color": "{{variable.color}}",
"opacity": 0.8,
"borderColor": "{{variable.color}}"
},
"lineStyle": {
"width": 2
},
"showSymbol": false,
"symbolSize": 8,
"yAxisIndex": 0,
"connectNulls": true
}
],
"xAxis": [
{
"type": "time",
"name": "",
"nameLocation": "center",
"nameGap": 28,
"nameTextStyle": {
"color": "#A4A5A7"
},
"axisLabel": {
"color": "#5E5E5E",
"fontSize": 11
},
"axisLine": {
"lineStyle": {
"color": "#5e5e5e40"
}
},
"splitLine": {
"lineStyle": {
"color": [
"#5E5E5E"
],
"opacity": 0.1
}
},
"axisTick": null,
"z": 2
}
],
"dataZoom": [
{
"show": true,
"filterMode": "none",
"xAxisIndex": 0,
"realtime": false,
"textStyle": {
"color": "#5E5E5E",
"fontSize": 11
},
"dataBackground": {
"areaStyle": {
"color": "#5E5E5E"
}
},
"right": 45,
"left": 45
}
],
"legend": {
"itemHeight": 7,
"itemWidth": 15,
"pageIconColor": "#5E5E5E",
"pageIconInactiveColor": "#5E5E5E",
"pageTextStyle": {
"color": "#5E5E5E"
},
"textStyle": {
"color": "#5E5E5E"
},
"top": 0,
"type": "scroll",
"show": false
},
"grid": {
"bottom": 60,
"containLabel": true,
"left": 60,
"right": 60,
"top": 10
},
"tooltip": {
"confine": true,
"trigger": "axis"
},
"visualMap": {
"show": false,
"type": "piecewise",
"pieces": [
{
"gt": 0,
"lt": 18,
"color": "#1e13e8 "
},
{
"gt": 18,
"lt": 22,
"color": "#e8dd13"
},
{
"gt": 22,
"lt": 26,
"color": "#e85a13"
},
{
"gt": 26,
"lt": 28,
"color": "#ed2005"
},
{
"gt": 28,
"color": "#ed2005"
}
],
"dimension": 1,
"seriesIndex": 0
}
}
```
## Animations
### Initial load animation
Set the initial load animation by adding the following attributes to the series:
```json
"animationDelay": ,
"animationEasing": "linear | cubicIn | cubicOut | cubicInOut | quadraticIn | quadraticOut | quadraticInOut | quarticIn | quarticOut | quarticInOut | sinusoidalIn | sinusoidalOut | sinusoidalInOut | exponentialIn | exponentialOut | exponentialInOut | bounceIn | bounceOut | bounceInOut | elasticIn | elasticOut | elasticInOut"
"animationDuration": ,
```
Initial Load Animation Line Chart JSON
```json
{
"yAxis": [
{
"type": "value",
"axisLine": {
"lineStyle": {
"color": "#5e5e5e40"
}
},
"axisLabel": {
"color": "#5E5E5E",
"fontSize": 11
},
"splitLine": {
"lineStyle": {
"color": [
"#5e5e5e"
],
"opacity": 0.1
}
},
"min": "dataMin",
"max": "dataMax",
"name": "Default Y-axis",
"nameLocation": "center",
"nameGap": 70,
"nameTextStyle": {
"color": "#5E5E5E"
},
"position": "left",
"show": true,
"offset": 0,
"gridIndex": 0
}
],
"series": [
{
"z": 0,
"name": "{{variable.name}} [{{variable.unit}}] ({{device.name}})",
"type": "line",
"markLine": {
"data": [
{
"name": "Avg",
"type": "average"
}
],
"symbol": "none"
},
"animation": true,
"itemStyle": {
"color": "{{variable.color}}",
"opacity": 0.8,
"borderColor": "{{variable.color}}"
},
"lineStyle": {
"color": "{{variable.color}}",
"width": 2
},
"showSymbol": false,
"symbolSize": 8,
"yAxisIndex": 0,
"connectNulls": true,
"animationDelay": 300,
"animationEasing": "easingName",
"animationDuration": 3000
}
],
"xAxis": [
{
"type": "time",
"name": "",
"nameLocation": "center",
"nameGap": 28,
"nameTextStyle": {
"color": "#A4A5A7"
},
"axisLabel": {
"color": "#5E5E5E",
"fontSize": 11
},
"axisLine": {
"lineStyle": {
"color": "#5e5e5e40"
}
},
"splitLine": {
"lineStyle": {
"color": [
"#5E5E5E"
],
"opacity": 0.1
}
},
"axisTick": null,
"z": 2
}
],
"dataZoom": [
{
"show": true,
"filterMode": "none",
"xAxisIndex": 0,
"realtime": true,
"textStyle": {
"color": "#5E5E5E",
"fontSize": 11
},
"dataBackground": {
"areaStyle": {
"color": "#5E5E5E"
}
},
"right": 45,
"left": 45
}
],
"legend": {
"itemHeight": 7,
"itemWidth": 15,
"pageIconColor": "#5E5E5E",
"pageIconInactiveColor": "#5E5E5E",
"pageTextStyle": {
"color": "#5E5E5E"
},
"textStyle": {
"color": "#5E5E5E"
},
"top": 0,
"type": "scroll",
"show": true
},
"grid": {
"bottom": 60,
"containLabel": true,
"left": 60,
"right": 60,
"top": 10
},
"tooltip": {
"confine": true,
"trigger": "axis",
"axisPointer": {
"type": "shadow"
}
}
}
```
### Data update animation
Set the animation shown when the data series updates by setting the following attributes:
```json
"animationDelayUpdate": ,
"animationEasingUpdate": "linear | cubicIn | cubicOut | cubicInOut | quadraticIn | quadraticOut | quadraticInOut | quarticIn | quarticOut | quarticInOut | sinusoidalIn | sinusoidalOut | sinusoidalInOut | exponentialIn | exponentialOut | exponentialInOut | bounceIn | bounceOut | bounceInOut | elasticIn | elasticOut | elasticInOut",
"animationDurationUpdate": ,
```
Data Update Line Chart JSON
```json
{
"yAxis": [
{
"type": "value",
"axisLine": {
"lineStyle": {
"color": "#5e5e5e40"
}
},
"axisLabel": {
"color": "#5E5E5E",
"fontSize": 11
},
"splitLine": {
"lineStyle": {
"color": [
"#5e5e5e"
],
"opacity": 0.1
}
},
"min": "dataMin",
"max": "dataMax",
"name": "Default Y-axis",
"nameLocation": "center",
"nameGap": 70,
"nameTextStyle": {
"color": "#5E5E5E"
},
"position": "left",
"show": true,
"offset": 0,
"gridIndex": 0
}
],
"series": [
{
"z": 0,
"name": "{{variable.name}} [{{variable.unit}}] ({{device.name}})",
"type": "line",
"markLine": {
"data": [
{
"name": "Avg",
"type": "average"
}
],
"symbol": "none"
},
"animation": true,
"itemStyle": {
"color": "{{variable.color}}",
"opacity": 0.8,
"borderColor": "{{variable.color}}"
},
"lineStyle": {
"color": "{{variable.color}}",
"width": 2
},
"showSymbol": false,
"symbolSize": 8,
"yAxisIndex": 0,
"connectNulls": true,
"animationDelay": 300,
"animationEasing": "easingName",
"animationDuration": 3000,
"animationDelayUpdate": 0,
"animationEasingUpdate": "easingName",
"animationDurationUpdate": 2000
}
],
"xAxis": [
{
"type": "time",
"name": "",
"nameLocation": "center",
"nameGap": 28,
"nameTextStyle": {
"color": "#A4A5A7"
},
"axisLabel": {
"color": "#5E5E5E",
"fontSize": 11
},
"axisLine": {
"lineStyle": {
"color": "#5e5e5e40"
}
},
"splitLine": {
"lineStyle": {
"color": [
"#5E5E5E"
],
"opacity": 0.1
}
},
"axisTick": null,
"z": 2
}
],
"dataZoom": [
{
"show": true,
"filterMode": "none",
"xAxisIndex": 0,
"realtime": true,
"textStyle": {
"color": "#5E5E5E",
"fontSize": 11
},
"dataBackground": {
"areaStyle": {
"color": "#5E5E5E"
}
},
"right": 45,
"left": 45
}
],
"legend": {
"itemHeight": 7,
"itemWidth": 15,
"pageIconColor": "#5E5E5E",
"pageIconInactiveColor": "#5E5E5E",
"pageTextStyle": {
"color": "#5E5E5E"
},
"textStyle": {
"color": "#5E5E5E"
},
"top": 0,
"type": "scroll",
"show": true
},
"grid": {
"bottom": 60,
"containLabel": true,
"left": 60,
"right": 60,
"top": 10
},
"tooltip": {
"confine": true,
"trigger": "axis",
"axisPointer": {
"type": "shadow"
}
}
}
```
## Data point custom icon
Set the following attributes in the data series:
```json
"showSymbol": true,
"symbol": "image://",
"symbolSize": ,
```
Data Point Custom Icon JSON
```json
{
"yAxis": [
{
"type": "value",
"axisLine": {
"lineStyle": {
"color": "#5e5e5e40"
}
},
"axisLabel": {
"color": "#5E5E5E",
"fontSize": 11
},
"splitLine": {
"lineStyle": {
"color": [
"#5e5e5e"
],
"opacity": 0.1
}
},
"min": "dataMin",
"max": "dataMax",
"name": "Default Y-axis",
"nameLocation": "center",
"nameGap": 70,
"nameTextStyle": {
"color": "#5E5E5E"
},
"position": "left",
"show": true,
"offset": 0,
"gridIndex": 0
}
],
"series": [
{
"z": 0,
"name": "{{variable.name}} [{{variable.unit}}] ({{device.name}})",
"type": "line",
"symbol": "image://https://cdn-icons-png.flaticon.com/512/4201/4201973.png",
"markLine": {
"data": [
{
"name": "Avg",
"type": "average"
}
],
"symbol": "none"
},
"animation": true,
"itemStyle": {
"color": "{{variable.color}}",
"opacity": 0.8,
"borderColor": "{{variable.color}}"
},
"lineStyle": {
"color": "{{variable.color}}",
"width": 2
},
"showSymbol": true,
"symbolSize": 20,
"yAxisIndex": 0,
"connectNulls": true
}
],
"xAxis": [
{
"type": "time",
"name": "",
"nameLocation": "center",
"nameGap": 28,
"nameTextStyle": {
"color": "#A4A5A7"
},
"axisLabel": {
"color": "#5E5E5E",
"fontSize": 11
},
"axisLine": {
"lineStyle": {
"color": "#5e5e5e40"
}
},
"splitLine": {
"lineStyle": {
"color": [
"#5E5E5E"
],
"opacity": 0.1
}
},
"axisTick": null,
"z": 2
}
],
"dataZoom": [
{
"show": true,
"filterMode": "none",
"xAxisIndex": 0,
"realtime": true,
"textStyle": {
"color": "#5E5E5E",
"fontSize": 11
},
"dataBackground": {
"areaStyle": {
"color": "#5E5E5E"
}
},
"right": 45,
"left": 45
}
],
"legend": {
"itemHeight": 7,
"itemWidth": 15,
"pageIconColor": "#5E5E5E",
"pageIconInactiveColor": "#5E5E5E",
"pageTextStyle": {
"color": "#5E5E5E"
},
"textStyle": {
"color": "#5E5E5E"
},
"top": 0,
"type": "scroll",
"show": true
},
"grid": {
"bottom": 60,
"containLabel": true,
"left": 60,
"right": 60,
"top": 10
},
"tooltip": {
"confine": true,
"trigger": "axis",
"axisPointer": {
"type": "shadow"
}
}
}
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://dev.ubidots.com/dashboards-and-widgets/line-chart.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.