- Getting Started
- Administration Guide
-
User Guide
- An Introduction to Wyn Enterprise
- Document Portal for End Users
- Data Governance and Modeling
- Working with Resources
- Working with Reports
-
Working with Dashboards
- Dashboard Designer
- Dashboard Templates
- Selecting a Dataset
- Data Attributes
- Dashboard Scenarios
- Component Templates
- 3D Scene
- Explorer
- Visualization Wizard
- Data Analysis and Interactivity
- Dashboard Appearance
- Preview Dashboard
- Export Dashboard
- Dashboard Lite Viewer
- Using Dashboard Designer
- Animating Dashboard Components
- View and Manage Documents
- Understanding Wyn Analytical Expressions
- Section 508 Compliance
- Subscribe to RSS Feed for Wyn Builds Site
- Developer Guide
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 optionPie 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 optionLine 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 optionRadar 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 optionBubble 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 optionCombined 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 optionFunnel 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 option3D 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