ECharts is a powerful open-source visualization library designed to create interactive and customizable charts. ECharts provides extensive customization options, allowing you to tailor the appearance and behavior of charts to fit specific requirements. With it, you can add new layers of customization to your widgets that simplify monitoring and better suit your users.
Note: Currently, only the Line Chart widget supports ECharts configuration. We’re working on adding this feature to more widgets.
Requirements
Ubidots Enterprise plans.
A widget that supports ECharts configuration.
1. Difference between ECharts configuration and Custom style
Looking to be as customizable and flexible as possible, Ubidots offers multiple options to modify the way widgets work and look. Apart from each widget’s native configuration options, there are two tools that allow you to thoroughly customize your widgets: ECharts configuration and the more traditional Custom style.
The simplest way to understand the difference between these two options is to think of widgets as paintings. While Custom style allows you to modify the frame and the canvas, ECharts configuration lets you customize the painting itself. For example, would you like your widget to have smoother corners or a transparent background? Use Custom Style. Would you like to, on the other hand, have thicker lines or smaller reference numbers on your Line Chart? Then use ECharts configuration.
2. How to use ECharts configuration
To use the ECharts configuration, just follow these steps:
Create or edit a widget that supports the ECharts feature*.
Go to its appearance tab.
Locate the “EChart configuration” option and open the editor.
Customize the widget by modifying the options of the JSON. Check out the ECharts’ docs to get a better understanding of all the configurable options available.
*Currently, only the Line Chart widget supports ECharts configuration. We’re working on adding this feature to more widgets.
3. Example
With the following JSON you can create a Line Chart like the one in the previous image. It’s an example that depicts how you can get thicker lines, bigger fonts, different tooltips, and modified split lines, among other things.
{
"yAxis": [
{
"type": "value",
"axisLine": {
"lineStyle": {
"color": "#000000"
}
},
"axisLabel": {
"color": "#000000",
"fontSize": 15
},
"splitLine": {
"lineStyle": {
"color": [
"#000000"
],
"opacity": 0.3
}
},
"min": "dataMin",
"max": "dataMax",
"name": "Default Y-axis",
"nameLocation": "center",
"nameGap": 70,
"nameTextStyle": {
"color": "#000000"
},
"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": "emptyCircle",
"barWidth": 40,
"markLine": {
"data": [
{
"name": "Average",
"type": "average",
"lineStyle": {
"color": "#f39c12",
"width": 3
}
}
]
},
"animation": true,
"itemStyle": {
"color": "#33c9dc",
"opacity": 0.8,
"borderColor": "#33c9dc"
},
"lineStyle": {
"color": "#33c9dc",
"width": 4
},
"markPoint": {
"data": [
{
"name": "Max",
"type": "max",
"symbol": "pin"
},
{
"name": "Min",
"type": "min",
"symbol": "pin"
}
]
},
"showSymbol": true,
"symbolSize": 8,
"yAxisIndex": 0,
"barMaxWidth": 40,
"connectNulls": true
}
],
"xAxis": [
{
"type": "time",
"name": "",
"nameLocation": "center",
"nameGap": 28,
"nameTextStyle": {
"color": "#000000"
},
"axisLabel": {
"color": "#000000",
"fontSize": 15
},
"axisLine": {
"lineStyle": {
"color": "#000000"
}
},
"splitLine": {
"lineStyle": {
"color": [
"#000000"
],
"opacity": 0.3
}
},
"axisTick": null,
"z": 2,
"show": false,
"minInterval": ""
}
],
"dataZoom": [
{
"show": true,
"filterMode": "none",
"xAxisIndex": 0,
"realtime": true,
"textStyle": {
"color": "#5E5E5E",
"fontSize": 11
},
"dataBackground": {
"areaStyle": {
"color": "#33c9dc"
}
},
"right": 45,
"left": 45
}
],
"legend": {
"itemHeight": 14,
"itemWidth": 25,
"pageIconColor": "#5E5E5E",
"pageIconInactiveColor": "#5E5E5E",
"pageTextStyle": {
"color": "#5E5E5E"
},
"textStyle": {
"color": "#000000",
"fontSize": 15
},
"top": 0,
"type": "scroll",
"show": true,
"itemGap": 10,
"padding": 5
},
"grid": {
"bottom": 60,
"containLabel": true,
"left": 60,
"right": 60,
"top": 10
},
"tooltip": {
"confine": true,
"trigger": "axis",
"show": true,
"axisPointer": {
"type": "cross",
"label": {
"backgroundColor": "#6a7985"
}
},
"borderColor": "#000000",
"borderWidth": 1,
"backgroundColor": "rgba(0,165,187,0.8)"
}
}