v7.0

E-Chart Customization

Wyn Enterprise allows you to customize your E-Charts as per your unique requirements using the JavaScript (JS) Code. A few example use cases are illustrated in this help article.

To create the following scenarios, navigate to the dashboard designer, select an E-Chart, and from the Inspector Panel click on the Custom ECharts Option property. Use the Custom ECharts Option popup to insert your JS Code.

Column EChart

In this example scenario, a column EChart is customized using the following JavaScript code to display the maximum values of the Sum of Unit Price and Sum of Unit Cost of a product line with axis line labels,

option.xAxis.axisLabel.show = true
option.xAxis.inverse=false
option.xAxis.axisLine.lineStyle.type = "dashed"
option.xAxis.axisLabel.fontFamily= "Chilanka"
option.xAxis.axisLabel.fontSize=15
option.xAxis.axisLabel.rotate = 90
option.xAxis.splitArea.show = true
option.yAxis.axisLabel.show = true
option.yAxis.inverse=false
option.yAxis.position = "right"
option.yAxis.axisTick.show = false
option.axisPointer.show= true
option.axisPointer.lineStyle.type = "solid"
option.axisPointer.lineStyle.width = 3
option.legend.show = true
option.legend.orient = "horizontal"
option.legend.textStyle.fontFamily="Comic Sans MS"
option.legend.left = "center"
option.legend.top = "top"
option.legend.textStyle.overflow = "show"
option.dataZoom[0].orient="vertical"
option.dataZoom[0].end=754124
option.dataZoom[0].height=500
console.log(option)
return option

Pie EChart

In this example scenario a pie EChart is customized using the following JavaScript code to display the labels with specific colors, positioning them around data points, adjust the item opacity, define the start angle, and apply emphasis effects like shadow,

option.series[0].label.show = true
option.series[0].label.color="#125478"
option.series[0].label.position = "around"
option.series[0].data[0].name = "Camping"
option.series[0].itemStyle.opacity=0.3
option.series[0].startAngle=120
option.series[0].labelLine.show= true
option.series[0].labelLine.lineStyle.width=1
option.series[0].emphasis.itemStyle.shadowBlur=10
option.series[0].emphasis.itemStyle.shadowOffsetX= 0,
option.series[0].emphasis.itemStyle.shadowColor = 'rgba(0, 0, 0, 0.5)'
option.series[0].radius="50%"
option.legend.textStyle.overflow = "show"
option.legend.textStyle.width = 152
option.legend.textStyle.fontSize = 16
console.log(option)
return option

Line EChart

In this example scenario, a line EChart is customized using the following JavaScript code to configure the visual effects like the appearance of the chart by adjusting the x-axis, y-axis, series (distinct ones), axis pointers, legend, and data zoom. Configuration settings in the code include styling the axis labels, setting line styles and symbols, legend settings, and data zoom settings.

option.xAxis.axisLabel.show = true
option.xAxis.inverse=false
option.xAxis.axisLine.lineStyle.type = "dashed"
option.xAxis.axisLabel.fontFamily= "Chilanka"
option.xAxis.axisLabel.fontSize=15
option.xAxis.axisLabel.rotate = 120
option.xAxis.splitArea.show = true
option.yAxis.axisLabel.show = true
option.yAxis.inverse=false
option.yAxis.position = "right"
option.yAxis.axisTick.show = false
option.series[0].lineStyle.type="dashed"
option.series[0].lineStyle.width=3
option.series[0].symbol="rectangle"
option.series[0].label.show=true
option.series[0].label.fontFamily="Comic Sans MS"
option.series[0].markPoint.label.fontFamily="Comic Sans MS"
option.series[0].markPoint.label.fontSize=20
option.series[1].lineStyle.type="dotted"
option.series[1].lineStyle.width=3
option.series[1].symbol="triangle"
option.series[1].label.show=true
option.series[1].label.fontFamily="Comic Sans MS"
option.series[1].markPoint.label.fontFamily="Arial"
option.series[1].markPoint.label.fontSize=20
option.axisPointer.show= true
option.axisPointer.lineStyle.type = "solid"
option.axisPointer.lineStyle.width = 3
option.legend.show = true
option.legend.orient = "horizontal"
option.legend.textStyle.fontFamily="Comic Sans MS"
option.legend.left = "center"
option.legend.top = "top"
option.legend.textStyle.overflow = "show"
option.dataZoom[0].orient="vertical"
option.dataZoom[0].end=754124
option.dataZoom[0].height=500
console.log(option)
return option

Radar EChart

In this example scenario, a radar EChart is customized using the following JavaScript code to modify the legend text style, item style, and width. The radar chart is configured with a specific radius, axis name appearance, line styles, and indicators. For the series, a dashed line style, a rectangular symbol, and data labels with connecting lines are configured.

option.legend.textStyle.overflow = "show"
option.legend.textStyle.width = 152
option.legend.textStyle.fontSize = 16
option.legend.itemStyle.borderWidth=5
option.legend.itemStyle.borderType="dotted"
option.legend.itemStyle.borderColor="#ERFF"
option.series[0].lineStyle.type="dashed"
option.series[0].symbol="rectangle"
option.series[0].symbolSize=20
option.series[0].label.show=true
option.series[0].labelLine.show=true
option.series[0].labelLine.lineStyle.width=10
option.radar.radius=200
option.radar.axisName.show=true
option.radar.axisName.color="#674733"
option.radar.axisName.fontSize=18
option.radar.axisLine.lineStyle.width=5
option.radar.axisLine.lineStyle.type="dashed"
option.radar.nameGap=20
option.radar.splitLine.lineStyle.type="dashed"
option.radar.splitLine.show=false
option.radar.splitArea.show=true
option.radar.indicator[1].name="Golf"
console.log(option)
return option

Bubble EChart

In this example scenario, a bubble EChart is customized using the following JavaScript code to set the x-axis at the top with a dashed line, axis labels with Comic Sans MS font, and data zoom orientation and height. The legend is styled horizontally with Comic Sans MS font, positioned at the center on the top, and configured for overflow display.

option.xAxis.position="top"
option.xAxis.axisLine.lineStyle.type="dashed"
option.xAxis.axisLine.lineStyle.width=2
option.xAxis.position="top"
option.xAxis.axisLabel.overflow="show"
option.xAxis.axisLabel.fontFamily="Comic Sans MS"
option.xAxis.axisLabel.fontSize=10
option.xAxis.axisLabel.rotate=90
option.xAxis.axisTick.alignWithLabel=false
option.yAxis.axisLine.lineStyle.type="dashed"
option.yAxis.inverse=false
option.yAxis.position="right"
option.dataZoom[0].orient="vertical"
option.dataZoom[0].end=754124
option.dataZoom[0].height=500
option.axisPointer.show=true
option.axisPointer.type="shadow"
option.legend.show = true
option.legend.orient = "horizontal"
option.legend.textStyle.fontFamily="Comic Sans MS"
option.legend.left = "center"
option.legend.top = "top"
option.legend.textStyle.overflow = "show"
return option

Combined EChart

In this example scenario, a combined EChart is customized using the following JavaScript code to style the x-axis with a dashed line, positioning at the top, and customizing the labels with Comic Sans MS font. The first y-axis has a dashed line, and the second y-axis has an inverted direction. Data zoom is oriented vertically with specific end and height values. The axis pointer is enabled with a shadow effect.

option.xAxis.axisLine.lineStyle.type="dashed"
option.xAxis.axisLine.lineStyle.width=2
option.xAxis.position="top"
option.xAxis.axisLabel.overflow="show"
option.xAxis.axisLabel.fontFamily="Comic Sans MS"
option.xAxis.axisLabel.fontSize=17
option.xAxis.axisTick.alignWithLabel=false
option.yAxis[0].axisLine.lineStyle.type="dashed"
option.yAxis[0].inverse=false
option.yAxis[1].inverse=true
option.dataZoom[0].orient="vertical"
option.dataZoom[0].end=754124
option.dataZoom[0].height=500
option.axisPointer.show=true
option.axisPointer.type="shadow"
return option

Funnel EChart

In this example scenario, a funnel EChart is customized using the following JavaScript code to set the opacity of series items, limit the maximum size of the series, align the funnel to the right, specify the name of the first data point, and customize the labels. Additionally, the code adjusts the legend properties, including orientation, item size, and text style.

option.series[0].itemStyle.opacity=0.2
option.series[0].maxSize="50%"
option.series[0].funnelAlign="right"
option.series[0].data[0].name ="Camping"
option.series[0].gap=5
option.series[0].label.show=true
option.series[0].label.position="around"
option.series[0].label.fontFamily='Comic Sans MS'
option.series[0].labelLine.show=true
option.series[0].labelLine.lineStyle.width=5
option.series[0].labelLayout.hideOverlap=false
option.legend.orient ="horizontal"
option.legend.itemWidth=10
option.legend.itemHeight=10
option.legend.textStyle.overflow="show"
option.legend.textStyle.fontFamily="Comic Sans MS"
option.legend.left = "center"
option.legend.top = "top"
console.log(option)
return option

3D Column EChart

In this example scenario a 3D column EChart is customized using the following JavaScript code to adjust the x-axis properties such as line style, label rotation, split lines, and axis name. The y-axis position is set to the right with a customized line style and the y-axis name is specified. Legend properties are customized for orientation, position, and text styling. The axis pointer is enabled with a shadow effect and the snapping feature is disabled.

option.xAxis.inverse=false
option.xAxis.axisLine.lineStyle.width =5
option.xAxis.axisLine.lineStyle.type="dashed"
option.xAxis.axisLabel.hideOverlap=false
option.xAxis.axisLabel.overflow="show"
option.xAxis.axisLabel.rotate=90
option.xAxis.splitLine.show=true
option.xAxis.splitLine.lineStyle.width=2.5
option.xAxis.splitArea.show=true
option.xAxis.axisLabel.fontFamily="Comic Sans MS"
option.xAxis.name ="Product Line"
option.xAxis.nameLocation="center"
option.xAxis.nameGap=120
option.xAxis.nameRotate=90
option.yAxis.position="right"
option.yAxis.axisLine.lineStyle.type="dashed"
option.yAxis.name ="Unit Price"
option.yAxis.nameLocation="center"
option.yAxis.nameGap=120
option.yAxis.splitArea.show=true
option.yAxis.axisLabel.fontFamily="Comic Sans MS"
option.legend.orient="horizontal"
option.legend.top="top"
option.legend.left="center"
option.legend.textStyle.overflow="show"
option.axisPointer.show=true
option.axisPointer.type="shadow"
option.axisPointer.snap=false
return option