> 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

![Configure Line Chart Widget](/files/dAD8Y136fgyHWtLWhMzM)

**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

![Configure Line Chart Widget](/files/JQZ8PcQIe4lovSVBXAvC)

![Configure Line Chart Widget](/files/cjxlVoXWTNUsayuCb5b0)

#### Source <a href="#source" id="source"></a>

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 \<account\_id> 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. 
```

![Configure Line Chart Widget](/files/eocaX1EidhGF9LbCT0H5)

**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.

![Configure Line Chart Widget](/files/F2s6WXOIgVnjUnUo4ahh)

#### Event Handling

Line Chart widget does not support any event.

#### Examples <a href="#examples" id="examples"></a>

Here, data in below format published on configured topic, will appear as shown in image.

#### 1. XY Line Chart <a href="#undefined" id="undefined"></a>

```
// 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.
```

![XY Line Chart Example](/files/OuEGmimfEdFnfTP4O5tA)

#### 2. Timeseries Line Chart <a href="#id-2.-stacked-bar-chart" id="id-2.-stacked-bar-chart"></a>

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. 
```

![Timeseries Line Chart Example](/files/EMjg8iJi4cN7HvgXsmhG)