> For the complete documentation index, see [llms.txt](https://docs.thingsup.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thingsup.io/widgets/line-chart-widget.md).
# Line Chart Widget
**General Setting**
User can change following things in Line Chart widget:
* Name for widget which will be used data reference. For Example, if widget name is 'Line Chart', then data of widget is referenced as Line Chart.data
* Show title - User can show/hide widget title
* Title Color
* Background Color
**Widget Setting**
In Widget Setting option, user can change following parameters:
* Show Grid - Enable to show grid inside the chart
* Show Legend - Enable to show chart legends
* X Legend - String value as a Legend for the X Axis
* Y Legend - String value as a Legend for the Y Axis
* Visible Points - Integer value to show maximum visible points on Chart
* Type - Two types of Line Chart are available
* XY Chart - It will take values from X Key and Y Keys configured below.
* Timeseries Chart - It will plot Y Keys configured against the timestamp data.
* Time Format - Two time format are supported. This are only considred in case of Timeseries chart.
* HH:mm:ss
* DD-MM-YYYY
* X Key - key parameter of JSON Object which will define X-Axis Data for Line Chart Widget.
* Y Keys - Key parameter of JSON Object which will define Y-Axis Data for Line Chart Widget.
* Show Grid X - Enable to show X Axis Grid Lines
* Show Grid Y - Enable to show Y Axis Grid Lines
#### Source
User can select a source mode as MQTT or Action.
**Using MQTT**
Here, to update data on Line Chart user can publish JSON object/array on given **data** MQTT topic. No need to provide \ while providing the MQTT topic. The JSON object will be as below.
```
// Example 1
// XY Line Chart is selected
[
{
"xData": "Div A",
"yData": 116,
"zData": 60
},
{
"xData": "Div B",
"yData": 86,
"zData": 40
},
{
"xData": "Div C",
"yData": 20,
"zData": 30
}
]
// here 'xData' is set as XKey and 'yData' and 'zData' are set as yKeys.
```
```
// Example
// Timeseries Line Chart is selected
{
"yData":116,
"zData":60
}
// here 'yData' and 'zData' are set as yKeys.
```
**Using Action**
Here, to update the Line Chart widget, output of the action should contain JSON object/array as given in above example. User can also update the widget either onLoad or periodically by providing refresh interval.
#### Event Handling
Line Chart widget does not support any event.
#### Examples
Here, data in below format published on configured topic, will appear as shown in image.
#### 1. XY Line Chart
```
// XY Line Chart is selected
[
{
"xData": "Div A",
"yData": 116,
"zData": 60
},
{
"xData": "Div B",
"yData": 86,
"zData": 40
},
{
"xData": "Div C",
"yData": 20,
"zData": 30
}
]
// here 'xData' is set as XKey and 'yData' and 'zData' are set as yKeys.
```
#### 2. Timeseries Line Chart
Here, point on chart will get plot at the time it is received from configured source.
```
// Timeseries Line Chart is selected
{
"yData":116,
"zData":60
}
// here 'yData' and 'zData' are set as yKeys.
```
