Forum Discussion

i1's avatar
i1
Frequent Visitor
8 years ago

use theme json to disable chart gridlines

Hi,  I would like to know if there is a way how to set up the theme json so that horizontal gridlines in column charts are not displayed by default.   i.e. I think that i need to know the string...
Need Help
Tips and Tricks
Anonymous's avatar
Anonymous
Not applicable
5 years ago

I'm unable to get this to work. I'm not super familiar with JSON, though, so struggling to pinpoint what I'm doing wrong in my specific theme. I noticed "color" and "solid" were missing quotes...is the rest of the syntax correct?

Anonymous's avatar
Anonymous
Not applicable
5 years ago

Hi Anonymous ,

 

Below is the part of the full code I have for this chart. If you have a current JSON, it can be complicated to understand where to place the code due to missing , or [ or }. The piece of code below is to append to an existing JSON file. If you have issues to append it or create a new one, let me know.

Basically, if you want (or do not want) the grid on/off by default, you need to change to true or false below argument "gridlineShow": true = always on false = always off

"valueAxis": [{
    "show": true,
    "position": "Right",
    "axisScale": "Linear",
    "start": 0,
    "end": 10,
    "labelColor": { "solid": { "color": "#01B8AA"}},
    "fontSize": 14,
    "fontFamily": "Courier New",
    "labelDisplayUnits": "0",
    "labelPrecision": "Auto",
    "showAxisTitle": true,
    "axisStyle": "showTitleOnly",
    "color": { "solid": { "color": "01B8AA"}},
    "titleText": "",
    "titleFontSize": 12,
    "titleFontFamily": "Courier New",
    "gridlineShow": true,
    "gridlineColor": { "solid": { "color": "#01B8AA"}},
    "gridlineThickness": 2,
    "gridlineStyle": "dashed"
}],

 

 

"columnChart": {
			"*": {
				"general": [{
					"responsive": true
				}],
				"categoryAxis": [{
					"show": true,
					"position": "Right",
					"labelColor": { "solid": { "color": "#01B8AA"}},
					"fontSize": 12,
					"fontFamily": "Segoe UI",
					"preferredCategoryWidth": 30,
					"maxMarginFactor": 28,
					"innerPadding": 22,
					"concatenateLabels": true,
					"showAxisTitle": true,
					"axisStyle": "showTitleOnly",
					"titleColor": { "solid": { "color": "#01B8AA"}},
					"titleText": "",
					"titleFontSize": 12,
					"titleFontFamily": "Segoe UI"
				}]

 

 
Cheers

  • Anonymous's avatar
    Anonymous
    Not applicable
    5 years ago

    Woohoo! Thank you Anonymous! After bashing my head against brackets, braces and commas I got this to work 🙂 Thanks so much for your help! In case it benefits anyone to see where this fell in my file:

     

     

     

    {
	"name": "TestTheme",
	"dataColors": [
		"#73B761",
		"#4A588A",
		"#ECC846",
		"#CD4C46",
		"#71AFE2",
		"#8D6FD1",
		"#EE9E64",
		"#95DABB",
		"#8FC581",
		"#6E79A1",
		"#F0D36B",
		"#D7706B",
		"#8DBFE8",
		"#A48CDA",
		"#F1B183",
		"#AAE1C9",
		"#568949",
		"#384268",
		"#B19635",
		"#9A3935",
		"#5583AA",
		"#6A539D",
		"#B3774B",
		"#70A48C",
		"#3A5C31",
		"#252C45",
		"#766423",
		"#672623",
		"#395871",
		"#473869",
		"#774F32",
		"#4B6D5E"
	],
	"background": "#FFFFFF",
	"foreground": "#333333",
	"tableAccent": "#0F1934",
	"visualStyles": {
		"*": {
			"*": {
				"border": [
					{
						"color": {
							"solid": {
								"color": "#CCCCCC"
							}
						},
						"show": true,
						"radius": 7
					}
				],
				"outspacePane": [
					{
						"backgroundColor": {
							"solid": {
								"color": "#FFFFFF"
							}
						},
						"transparency": 0
					}
				],
				"visualTooltip": [
					{
						"titleFontColor": {
							"solid": {
								"color": "#FFFFFF"
							}
						},
						"valueFontColor": {
							"solid": {
								"color": "#FFFFFF"
							}
						}
					}
				],
				"visualHeader": [
					{
						"foreground": {
							"solid": {
								"color": "#666666"
							}
						}
					}
				],
				"background": [
					{
						"color": {
							"solid": {
								"color": "#FFFFFF"
							}
						}
					}
				]
			}
		},
		"columnChart": {
			"*": {
				"general": [
					{
						"responsive": true
					}
				],
				"categoryAxis": [
					{
						"show": true,
						"concatenateLabels": false,
						"showAxisTitle": true,
						"axisStyle": "showTitleOnly",
						"titleText": ""
					}
				],
				"valueAxis": [
					{
						"show": true,
						"labelDisplayUnits": "0",
						"labelPrecision": "0",
						"showAxisTitle": true,
						"axisStyle": "showTitleOnly",
						"titleText": "",
						"gridlineShow": false,
						"gridlineThickness": 2,
						"gridlineStyle": "solid"
					}
				]
			}
		},
		"page": {
			"*": {
				"background": [
					{
						"transparency": 100,
						"color": {
							"solid": {
								"color": "#FFFFFF"
							}
						}
					}
				],
				"outspace": [
					{
						"transparency": 0
					}
				]
			}
		}
	},
	"bad": "#CD4C46",
	"neutral": "#ECC846",
	"good": "#73B761",
	"minimum": "#FFFFFF",
	"center": "#ECC846",
	"maximum": "#73B761",
	"textClasses": {
		"title": {
			"fontFace": "'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif",
			"color": "#666666",
			"fontSize": 8
		},
		"callout": {
			"fontSize": 27,
			"color": "#353433"
		},
		"label": {
			"fontSize": 9,
			"color": "#777777"
		},
		"header": {
			"fontFace": "'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif",
			"fontSize": 9
		}
	},
	"foregroundNeutralSecondary": "#999999"
}

     

     

     

    • Anonymous's avatar
      Anonymous
      Not applicable
      5 years ago

      Glad that it helped! 

      You know, I was struggling a lot with this as well but then I started editing the JSON files using Visual Studio and it makes it much easier to recognize where the errors are as the tool itself is giving you warnings and hints. Also, if you decide to use it, add an extension for JSON. I use one called JSON by ZainChen, helps a lot while dealing with this type of files.

       

      Cheers!