How to enable labels for axis and Full extent for slider on Chart Widget in Web App Builder?

RehanChaudhary — Wed, 02 Nov 2022 18:49:59 GMT

I am using a chart widget to show time series data in my application created through web app builder . It looks like this currently.

When i open the widget the slider only shows up to 4 values and there are no labels on the x axis and y axis. I want that whenever the widget is opened the slider should have the full extent and labels should also be there. I was able to do it with Infographic widget which looks like this :

I tried changing a lot of settings for chart widget within the conf.json file of my app but nothing worked. Here's how both widgets look like in the conf.json file of my app :

"Chart Widget"

{ "name": "Chart", "version": "2.21", "uri": "widgets/Chart/Widget", "config": { "charts": [{ "url": "https://portale/server/rest/services/Hosted/service1/FeatureServer/0", "filter": { }, "description": "my data", "symbol": { }, "webMapLayerId": null, "mode": "feature", "name": "Time Sereies", "highLightColor": "#ff0000", "types": [{ "type": "line", "display": { "colors": ["#eb7b3a", "#febf29", "#72ad4c", "#9c4618", "#987214", "44682e"], "showHorizontalAxis": true, "showVerticalAxis": true, "showLegend": true } }], "labelField": "hours", "valueFields": ["f80kt", "f21bi", "f74bt", "f54bl", "f51bf", "f73fw", "f72fi", "f24fl", "f78gw", "f68hb", "f77hf", "f64ks", "f70mb", "f52ng", "f79su", "f13st", "f17sm", "f27ta", "f20ve", "f61wb", "f82hf"], "sortOrder": { "isLabelAxis": true, "isAsc": true } }] }, "index": 3, "id": "widgets_Chart_Widget_37", "label": "Time Series Charts" }

Infographic Widget

{ "name": "Infographic", "version": "2.21", "uri": "widgets/Infographic/Widget", "config": { "layout": { "definition": [{ "type": "column", "isClosable": true, "reorderEnabled": true, "title": "", "width": 100, "content": [{ "type": "stack", "isClosable": true, "reorderEnabled": true, "title": "", "activeItemIndex": 0, "height": 15.034420289855072, "content": [{ "type": "component", "isClosable": true, "componentName": "jimu grid", "componentState": { "id": "1477573229130813-1" }, "reorderEnabled": true, "title": "jimu grid", "id": "1477573229130813-1" }] }, { "type": "stack", "isClosable": true, "reorderEnabled": true, "title": "", "activeItemIndex": 0, "height": 62.93746645195921, "content": [{ "type": "component", "isClosable": true, "componentName": "jimu grid", "componentState": { "id": "1477573229130813-2" }, "reorderEnabled": true, "title": "jimu grid", "id": "1477573229130813-2" }] }, { "type": "stack", "isClosable": true, "reorderEnabled": true, "title": "", "activeItemIndex": 0, "height": 22.028113258185726, "width": 59.15915915915916, "content": [{ "type": "component", "isClosable": true, "componentName": "jimu grid", "componentState": { "id": "1477573229130813-3" }, "reorderEnabled": true, "title": "jimu grid", "id": "1477573229130813-3" }] }] }] }, "dijits": [{ "id": "1477573229130813-1", "type": "text", "visible": true, "config": { "background": { "backgroundColor": "#FFF", "alignment": { "horizontal": "center", "vertical": "middle" }, "link": "" }, "font": { "font": { "fontFamily": "Arial", "bold": false, "italic": false, "underline": false }, "fontSize": 16, "textColor": "#282828" }, "text": "TITLE OF THE INFOGRAPHIC" } }, { "id": "1477573229130813-2", "type": "chart", "visible": true, "config": { "data": { "mode": "feature", "type": "line", "clusterField": "objectid", "valueFields": ["f80kt", "f21bi", "f74bt"], "sortOrder": { "isAsc": true, "field": "objectid" } }, "display": { "backgroundColor": "#ffffff", "seriesStyle": { "type": "series", "styles": [{ "style": { "color": ["#fbe66a"] }, "name": "f80kt", "label": "80KT" }, { "style": { "color": ["#f29157"] }, "name": "f21bi", "label": "21BI" }, { "style": { "color": ["#c8501d"] }, "name": "f74bt", "label": "74BT" }] }, "legend": { "textStyle": { "color": "#000000", "fontSize": 12 }, "show": true }, "displayRange": "ALL", "xAxis": { "textStyle": { "color": "#000000", "fontSize": 12 }, "show": true, "name": "n", "nameTextStyle": { "color": "#000000" }, "format": { "digitSeparator": false } }, "yAxis": { "textStyle": { "color": "#000000", "fontSize": 12 }, "show": true, "name": "h", "nameTextStyle": { "color": "#000000" }, "format": { "type": "float", "digitSeparator": true } }, "tooltip": { "confine": true, "trigger": "item" }, "marks": {} } } }, { "id": "1477573229130813-3", "type": "text", "visible": true, "config": { "background": { "backgroundColor": "#FFF", "alignment": { "horizontal": "center", "vertical": "top" }, "link": "" }, "font": { "font": { "fontFamily": "Arial", "bold": false, "italic": false, "underline": false }, "fontSize": 12, "textColor": "#282828" }, "text": "Description: additional information about this infographic." } }], "name": "line", "wid": "1477573229130813", "dataSource": { "dataSourceType": "DATA_SOURCE_FEATURE_LAYER_FROM_MAP", "name": "SO2", "layerId": "SO2_7276", "useSelection": true, "filterByExtent": "on" } }, "index": 8, "id": "widgets_Infographic_Widget_59" }

What setting of Chart Widget should i change to enable labels of axis and full extent of slider?

topic How to enable labels for axis and Full extent for slider on Chart Widget in Web App Builder? in ArcGIS Web AppBuilder Questions

How to enable labels for axis and Full extent for slider on Chart Widget in Web App Builder?