[]
v7.0
(Showing Draft Content)

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


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

Column E-Chart

In this example scenario, a column E-Chart 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 E-Chart

In this example scenario, a pie E-Chart is customized using the following JavaScript code to display the labels with specific colors, positioning them around data points, adjusting the item opacity, defining the start angle, and applying 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 E-Chart

In this example scenario, a line E-Chart 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 E-Chart

In this example scenario, a radar E-Chart 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 E-Chart

In this example scenario, a bubble E-Chart 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 E-Chart

In this example scenario, a combined E-Chart 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 E-Chart

In this example scenario, a funnel E-Chart 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 E-Chart

In this example scenario a 3D column E-Chart 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