Gridlines in a bar chart - hide the category axis gridlines

OL Connect Professional Designer
1

Hi - I have a stacking bar chart. I want to hide the highlighted gridlines below. I tried using ‘gridAlpha’: 0 and ‘gridColor’: #FFFFFF in the CategoryAxis section of the graph and it does nothing. I tried changing the color lines to white and it does nothing. My code is below also. I have tried everything that I can think of. I can do on a regular bar chart where I am not stacking the data. Please help!!

image

function Graph(field, title, color) {
	this.field = field;
	this.title = title;
	this.color = color;
}

function getCopy(sourceArray, index) {
	let source = sourceArray[index % sourceArray.length];
	let target = {};
	for (let prop in source) {
		target[prop] = source[prop];
	}
	return target;
}

if (results.length) {

	var chartData = [];

	chartData.push({
		'value_label': "0%",
		'values_1': record.fields['DefPpt0'],
		'values_2': record.fields['AE_DefPpt0']
	});
	chartData.push({
		'value_label': "1%",
		'values_1': record.fields['DefPpt1'],
		'values_2': record.fields['AE_DefPpt1']
	});
	chartData.push({
		'value_label': "2%",
		'values_1': record.fields['DefPpt2'],
		'values_2': record.fields['AE_DefPpt2']
	});
	chartData.push({
		'value_label': "3%",
		'values_1': record.fields['DefPpt3'],
		'values_2': record.fields['AE_DefPpt3']
	});
	chartData.push({
		'value_label': "4%",
		'values_1': record.fields['DefPpt4'],
		'values_2': record.fields['AE_DefPpt4']
	});
	chartData.push({
		'value_label': "5%",
		'values_1': record.fields['DefPpt5'],
		'values_2': record.fields['AE_DefPpt5']
	});
	chartData.push({
		'value_label': "6%",
		'values_1': record.fields['DefPpt6'],
		'values_2': record.fields['AE_DefPpt6']
	});
	chartData.push({
		'value_label': "7%",
		'values_1': record.fields['DefPpt7'],
		'values_2': record.fields['AE_DefPpt7']
	});
	chartData.push({
		'value_label': "8%",
		'values_1': record.fields['DefPpt8'],
		'values_2': record.fields['AE_DefPpt8']
	});
	chartData.push({
		'value_label': "9%",
		'values_1': record.fields['DefPpt9'],
		'values_2': record.fields['AE_DefPpt9']
	});
	chartData.push({
		'value_label': "10%",
		'values_1': record.fields['DefPpt10'],
		'values_2': record.fields['AE_DefPpt10']
	});
	chartData.push({
		'value_label': "11%",
		'values_1': record.fields['DefPpt11'],
		'values_2': record.fields['AE_DefPpt11']
	});
	chartData.push({
		'value_label': "12%",
		'values_1': record.fields['DefPpt12'],
		'values_2': record.fields['AE_DefPpt12']
	});
	chartData.push({
		'value_label': "13%",
		'values_1': record.fields['DefPpt13'],
		'values_2': record.fields['AE_DefPpt13']
	});
	chartData.push({
		'value_label': "14%",
		'values_1': record.fields['DefPpt14'],
		'values_2': record.fields['AE_DefPpt14']
	});
	chartData.push({
		'value_label': ">15%",
		'values_1': record.fields['DefPpt15'],
		'values_2': record.fields['AE_DefPptOVER14']
	});

	var config = {
		type: "serial",
		categoryField: "value_label",
		rotate: false,
		dataProvider: chartData,
		graphs: [{
				"valueField": "values_1",
				"type": "column",
				"fillAlphas": 1,
				"fillColors": "#232c68",
				"lineThickness": 0
			},
			{
				"valueField": "values_2",
				"type": "column",
				"fillAlphas": 1,
				"fillColors": "#6da141",
				"lineThickness": 0
			}
		],
		"valueAxes": [{
			"id": "ValueAxis-1",
			"stackType": "regular",
			"title": ""
		}],
		"categoryAxis": [{
			"id": "CategoryAxis-1",
			"gridAlpha": 0.0
		}]
	};

	results.attr('data-amchart', JSON.stringify(config));

}
2

Hi @ahaddad,

valueAxes is an array, but categoryAxis is an object.

You’ll need to remove the square brackets:

categoryAxis: {
	id: "CategoryAxis-1",
	gridAlpha: 0
}

(Note that quotes around property names are not needed here.)

2 Likes
3

OMG - I drove myself crazy for two days!!! Thank you so much!