HoemIversen
Posts: 2
Joined: Sun Sep 25, 2016 12:45 am

Questions about color in highcharts cloud

Dear forum, I hope you can help me out. I am new to highcharts - and I am attempting to visualize some data for an open access scientific article.

Here is an example of a graph: http://cloud.highcharts.com/show/arifez

Now, what I would like to do - that I have not been able to - is to have INDIVIDUAL colors for each of the abbreviations below the graph (representing different political parties) - as per now they are all "grey" - and lumped together for each "set".

Is it possible to resolve this?

All the best,
HoemIversen
pawel_d
Posts: 1910
Joined: Thu Jun 02, 2016 10:28 am

Re: Questions about color in highcharts cloud

Hi HoemIversen,

Could you send the code of your chart?

Regards.
Paweł Dalek
Highcharts Developer
HoemIversen
Posts: 2
Joined: Sun Sep 25, 2016 12:45 am

Re: Questions about color in highcharts cloud

For sure - here is the code for the example I linked to above:

Code: Select all

var options = {
	"chart": {
		"type": "column"
	},
	"plotOptions": {
		"series": {
			"colorByPoint": true
		}
	},
	"colors": [
		"#7cb5ec",
		"#ff0000",
		"#90ed7d",
		"#f7a35c",
		"#8085e9",
		"#f15c80",
		"#e4d354",
		"#2b908f",
		"#f45b5b",
		"#91e8e1"
	],
	"title": {
		"text": "Figur 1 Ikke-konfronterende bidrag: Partier"
	},
	"yAxis": {
		"title": {
			"text": "%"
		}
	},
	"xAxis": {
		"type": "category"
	},
	"series": [
		{
			"index": 0,
			"name": "R",
			"data": [
				[
					"NRK 2005",
					null
				],
				[
					"TV2 2005",
					null
				],
				[
					"NRK 2009",
					null
				],
				[
					"TV2 2009",
					null
				],
				[
					"NRK 2013",
					41
				],
				[
					"TV2 2013",
					25
				]
			]
		},
		{
			"index": 1,
			"name": "MDG",
			"data": [
				[
					"NRK 2005",
					null
				],
				[
					"TV2 2005",
					null
				],
				[
					"NRK 2009",
					null
				],
				[
					"TV2 2009",
					null
				],
				[
					"NRK 2013",
					40
				],
				[
					"TV2 2013",
					20
				]
			]
		},
		{
			"index": 2,
			"name": "SV",
			"data": [
				[
					"NRK 2005",
					9
				],
				[
					"TV2 2005",
					11
				],
				[
					"NRK 2009",
					16
				],
				[
					"TV2 2009",
					4
				],
				[
					"NRK 2013",
					38
				],
				[
					"TV2 2013",
					20
				]
			]
		},
		{
			"index": 3,
			"name": "Ap",
			"data": [
				[
					"NRK 2005",
					17
				],
				[
					"TV2 2005",
					15
				],
				[
					"NRK 2009",
					11
				],
				[
					"TV2 2009",
					13
				],
				[
					"NRK 2013",
					29
				],
				[
					"TV2 2013",
					null
				]
			]
		},
		{
			"index": 4,
			"name": "Sp",
			"data": [
				[
					"NRK 2005",
					22
				],
				[
					"TV2 2005",
					10
				],
				[
					"NRK 2009",
					19
				],
				[
					"TV2 2009",
					5
				],
				[
					"NRK 2013",
					21
				],
				[
					"TV2 2013",
					22
				]
			]
		},
		{
			"index": 5,
			"name": "V",
			"data": [
				[
					"NRK 2005",
					20
				],
				[
					"TV2 2005",
					6
				],
				[
					"NRK 2009",
					16
				],
				[
					"TV2 2009",
					13
				],
				[
					"NRK 2013",
					17
				],
				[
					"TV2 2013",
					15
				]
			]
		},
		{
			"index": 6,
			"name": "KrF",
			"data": [
				[
					"NRK 2005",
					18
				],
				[
					"TV2 2005",
					10
				],
				[
					"NRK 2009",
					11
				],
				[
					"TV2 2009",
					14
				],
				[
					"NRK 2013",
					27
				],
				[
					"TV2 2013",
					18
				]
			]
		},
		{
			"index": 7,
			"name": "H",
			"data": [
				[
					"NRK 2005",
					13
				],
				[
					"TV2 2005",
					7
				],
				[
					"NRK 2009",
					10
				],
				[
					"TV2 2009",
					13
				],
				[
					"NRK 2013",
					21
				],
				[
					"TV2 2013",
					33
				]
			]
		},
		{
			"index": 8,
			"name": "FrP",
			"data": [
				[
					"NRK 2005",
					12
				],
				[
					"TV2 2005",
					5
				],
				[
					"NRK 2009",
					9
				],
				[
					"TV2 2009",
					22
				],
				[
					"NRK 2013",
					26
				],
				[
					"TV2 2013",
					13
				]
			]
		}
	]
};
pawel_d
Posts: 1910
Joined: Thu Jun 02, 2016 10:28 am

Re: Questions about color in highcharts cloud

Hi HoemIversen,

A gray color of an element of the legend happens because you set colorByPoint property to true. It results in a different color of each point of series. There is a solution to this problem. You can create additional empty series, link and stack each to corresponding existing series, and instead of setting colorByPoint property in plotOptions, set it inside each non empty series. Although I think that this will decrease readability of the charts. It would be better not to use colorByPoint, then each series would have its own color, like in the second example below.

Example:
https://jsfiddle.net/d_paul/n7gn3phf/3/
https://jsfiddle.net/d_paul/n7gn3phf/4/

Regards.
Paweł Dalek
Highcharts Developer

Return to “Highcharts Cloud”