Help editing axes in Hub chart

[Trippetoe]

John Gravois‌ and Tom Wayson‌ - i would greatly appreciate some guidance when working on Cedar charts. I am trying to update the axes on a JSON chart in our Hub app. The chart is type Bar and draws as desired, except that there is no Y-axis label and the X-axis labels are draw at a -45 angle.  I want to add the Y-axis label and have the x-axis labels displayed at 90 degrees. 

I have followed the examples describe at this esri link in the JSON specification section and the examples at ember-cli-cedar, but i cant seem to change either the content of the Y-axis label or the rotation of the x-axis labels.

Based on the esri docs, i have added the content below to the 'bar' chart example at ember-cli-cedar:

"overrides": {
   "legend": {
      "enabled": true
   },
   "backgroundColor": "#E6E6FA",
   "backgroundAlpha": 1,
   "categoryAxis": {
      "labelRotation": -90
   }
}

the background color changes and the legend appears, but the axis label does not rotate.  I have tried the following code in both the ember-cli-cedar playground (nested in the 'overrides' and as a standalone element) and the amCharts CodePen.  It works in the CodePen but not in the cedar playground.  

"xAxes": [{
 "type": "CategoryAxis",
 "dataFields": {
 "category": "country"
 },
"renderer": {
 "labels": {
 "rotation": -90,
 "verticalCenter": "middle",
 "horizontalCenter": "left"
 }
 }
}],

I've tried similar things with setting the Y-axis label but have had the same general luck - doesn't work in Cedar; works in amCharts Code Pen.  Any thoughts on how to change the contents of the Y-Axis label and the rotation of the x-axis labels?

Thank you

[Anonymous User]

gave it a shot as well - couldn't get the axis to tilt. Will look into it!

[JohnGravois]

i don't know anything about rotating labels, but i was definitely able to display and customize the X and Y axis labels in the ember-cli-cedar playground.

{
  "type": "bar",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Number_of_SUM",
      "query": {
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [
          {
            "statisticType": "sum",
            "onStatisticField": "Number_of",
            "outStatisticFieldName": "Number_of_SUM"
          }
        ]
      }
    }
  ],
  "series": [
    {
      "category": {
        "field": "Type",
        "label": "custom"
      },
      "value": {
        "field": "Number_of_SUM",
        "label": "also custom"
      },
      "source": "Number_of_SUM"
    }
  ]
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[Trippetoe]

John Gravois‌ thanks for the sample.  Any idea on how to set the label on the chart defined by the JSON below?  I want the y label to to be 'Number of trips'.....I can use the ember-cli-cedar page (and HUB) to draw the chart, but there is no Y axis label.  And i can't figure out how to force one to show up. Or is there a better way to configure the chart?

Thank you.

{
	"type": "bar",
	"datasets": [{
			"url": "https://services2.arcgis.com/McQ0OlIABe29rJJy/ArcGIS/rest/services/mode_share_from_ACS_2017/FeatureServer/0",
			"name": "auto",
			"query": {
				"where": "NOT(County = '4-county') AND Mode = 'Auto'",
				"orderByFields": "Trips_SUM DESC",
				"groupByFieldsForStatistics": "County",
				"outStatistics": [{
					"statisticType": "sum",
					"onStatisticField": "Trips",
					"outStatisticFieldName": "Trips_SUM"
				}]
			},
			"join": "County"
		},
		{
			"url": "https://services2.arcgis.com/McQ0OlIABe29rJJy/ArcGIS/rest/services/mode_share_from_ACS_2017/FeatureServer/0",
			"name": "carpool",
			"query": {
				"where": "NOT(County = '4-county') AND Mode = 'Carpool ride share'",
				"orderByFields": "Trips_SUM DESC",
				"groupByFieldsForStatistics": "County",
				"outStatistics": [{
					"statisticType": "sum",
					"onStatisticField": "Trips",
					"outStatisticFieldName": "Trips_SUM"
				}]
			},
			"join": "County"
		},
		{
			"url": "https://services2.arcgis.com/McQ0OlIABe29rJJy/ArcGIS/rest/services/mode_share_from_ACS_2017/FeatureServer/0",
			"name": "bike",
			"query": {
				"where": "NOT(County = '4-county') AND Mode = 'Bike'",
				"orderByFields": "Trips_SUM DESC",
				"groupByFieldsForStatistics": "County",
				"outStatistics": [{
					"statisticType": "sum",
					"onStatisticField": "Trips",
					"outStatisticFieldName": "Trips_SUM"
				}]
			},
			"join": "County"
		},
		{
			"url": "https://services2.arcgis.com/McQ0OlIABe29rJJy/ArcGIS/rest/services/mode_share_from_ACS_2017/FeatureServer/0",
			"name": "walk",
			"query": {
				"where": "NOT(County = '4-county') AND Mode = 'Walk'",
				"orderByFields": "Trips_SUM DESC",
				"groupByFieldsForStatistics": "County",
				"outStatistics": [{
					"statisticType": "sum",
					"onStatisticField": "Trips",
					"outStatisticFieldName": "Trips_SUM"
				}]
			},
			"join": "County"
		},
		{
			"url": "https://services2.arcgis.com/McQ0OlIABe29rJJy/ArcGIS/rest/services/mode_share_from_ACS_2017/FeatureServer/0",
			"name": "transit",
			"query": {
				"where": "NOT(County = '4-county') AND Mode = 'Transit'",
				"orderByFields": "Trips_SUM DESC",
				"groupByFieldsForStatistics": "County",
				"outStatistics": [{
					"statisticType": "sum",
					"onStatisticField": "Trips",
					"outStatisticFieldName": "Trips_SUM"
				}]
			},
			"join": "County"
		}
	],
	"series": [{
			"category": {
				"field": "County",
				"label": "County"
			},
			"value": {
				"field": "Trips_SUM",
				"label": "Car"
			},
			"source": "auto",
			"group": true
		},
		{
			"category": {
				"field": "County",
				"label": "County"
			},
			"value": {
				"field": "Trips_SUM",
				"label": "Carpool"
			},
			"source": "carpool",
			"group": true
		},
		{
			"category": {
				"field": "County",
				"label": "County"
			},
			"value": {
				"field": "Trips_SUM",
				"label": "Bicycle"
			},
			"source": "bike",
			"group": true
		},
		{
			"category": {
				"field": "County",
				"label": "County"
			},
			"value": {
				"field": "Trips_SUM",
				"label": "Walk"
			},
			"source": "walk",
			"group": true
		},
		{
			"category": {
				"field": "County",
				"label": "County"
			},
			"value": {
				"field": "Trips_SUM",
				"label": "Transit"
			},
			"source": "transit",
			"group": true
		}
	],
	"style": {
		"colors": [
			"#283250",
			"#2c5e79",
			"#448c96",
			"#7abaa9",
			"#a1cebe"
		]
	}
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[BenStoltz · Accepted solution]

Hey Tom Rippetoe‌, sorry for the slow response. There is this oversight with multi-series charts regarding having x/y axis titles. It can work if you use overrides however, for example adding:

“overrides”: {
“valueAxes”: [{
“title”: “Your title here”
}]
}‍‍‍‍‍‍‍‍‍‍

Annoyingly, no idea why the labelRotation is not working. Will definitely look into it.

[TomWayson]

FWIW, I've opened an issue to be able to do this w/o `overrides`: definition should provide a way to specify or override default axis labels · Issue #464 · Esri/cedar... 

[KrystalPhaneuf2]

Wondering if this has been addressed yet.  I'm trying to either rotate or not show the x axis/category labels at all.  Having the issue where it's not showing all labels due to there being too many to fit.

[DanielSchatt]

I'm having the same issue (trying to label axes with a multiple series chart).  I tried Ben's method above using overrides.  The x-axis was labeled from the categoryAxis setting but not the y-axis from the valueAxis setting.  Is there a problem with my syntax?  Thanks!

var datasets = [
{
   "data": table,
   "name": "water elevation series"
}
];
				   
var series = [
{
   "category": {"field": "timeTable"},
   "value": {"field": "waterElevationTable", "label": "Water elevation (feet"},
   "source": "water elevation series"
},
{
   "category": {"field": "timeTable"},
   "value": {"field": "landElevationTable", "label": "Land elevation (feet)"},
   "source": "water elevation series"
}
];
				   
var overrides = {
   "categoryAxis": {"title": "Time (hours)"},
   "valueAxis": {"title": "Elevation (feet)"}
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍