| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257 | /** * Gray theme for Highcharts JS * @author Torstein Hønsi */Highcharts.theme = {	colors: ["#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee", "#ff0066", "#eeaaee",		"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],	chart: {		backgroundColor: {			linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },			stops: [				[0, 'rgb(96, 96, 96)'],				[1, 'rgb(16, 16, 16)']			]		},		borderWidth: 0,		borderRadius: 15,		plotBackgroundColor: null,		plotShadow: false,		plotBorderWidth: 0	},	title: {		style: {			color: '#FFF',			font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'		}	},	subtitle: {		style: {			color: '#DDD',			font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'		}	},	xAxis: {		gridLineWidth: 0,		lineColor: '#999',		tickColor: '#999',		labels: {			style: {				color: '#999',				fontWeight: 'bold'			}		},		title: {			style: {				color: '#AAA',				font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'			}		}	},	yAxis: {		alternateGridColor: null,		minorTickInterval: null,		gridLineColor: 'rgba(255, 255, 255, .1)',		minorGridLineColor: 'rgba(255,255,255,0.07)',		lineWidth: 0,		tickWidth: 0,		labels: {			style: {				color: '#999',				fontWeight: 'bold'			}		},		title: {			style: {				color: '#AAA',				font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'			}		}	},	legend: {		itemStyle: {			color: '#CCC'		},		itemHoverStyle: {			color: '#FFF'		},		itemHiddenStyle: {			color: '#333'		}	},	labels: {		style: {			color: '#CCC'		}	},	tooltip: {		backgroundColor: {			linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },			stops: [				[0, 'rgba(96, 96, 96, .8)'],				[1, 'rgba(16, 16, 16, .8)']			]		},		borderWidth: 0,		style: {			color: '#FFF'		}	},	plotOptions: {		series: {			shadow: true		},		line: {			dataLabels: {				color: '#CCC'			},			marker: {				lineColor: '#333'			}		},		spline: {			marker: {				lineColor: '#333'			}		},		scatter: {			marker: {				lineColor: '#333'			}		},		candlestick: {			lineColor: 'white'		}	},	toolbar: {		itemStyle: {			color: '#CCC'		}	},	navigation: {		buttonOptions: {			symbolStroke: '#DDDDDD',			hoverSymbolStroke: '#FFFFFF',			theme: {				fill: {					linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },					stops: [						[0.4, '#606060'],						[0.6, '#333333']					]				},				stroke: '#000000'			}		}	},	// scroll charts	rangeSelector: {		buttonTheme: {			fill: {				linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },				stops: [					[0.4, '#888'],					[0.6, '#555']				]			},			stroke: '#000000',			style: {				color: '#CCC',				fontWeight: 'bold'			},			states: {				hover: {					fill: {						linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },						stops: [							[0.4, '#BBB'],							[0.6, '#888']						]					},					stroke: '#000000',					style: {						color: 'white'					}				},				select: {					fill: {						linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },						stops: [							[0.1, '#000'],							[0.3, '#333']						]					},					stroke: '#000000',					style: {						color: 'yellow'					}				}			}		},		inputStyle: {			backgroundColor: '#333',			color: 'silver'		},		labelStyle: {			color: 'silver'		}	},	navigator: {		handles: {			backgroundColor: '#666',			borderColor: '#AAA'		},		outlineColor: '#CCC',		maskFill: 'rgba(16, 16, 16, 0.5)',		series: {			color: '#7798BF',			lineColor: '#A6C7ED'		}	},	scrollbar: {		barBackgroundColor: {				linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },				stops: [					[0.4, '#888'],					[0.6, '#555']				]			},		barBorderColor: '#CCC',		buttonArrowColor: '#CCC',		buttonBackgroundColor: {				linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },				stops: [					[0.4, '#888'],					[0.6, '#555']				]			},		buttonBorderColor: '#CCC',		rifleColor: '#FFF',		trackBackgroundColor: {			linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },			stops: [				[0, '#000'],				[1, '#333']			]		},		trackBorderColor: '#666'	},	// special colors for some of the demo examples	legendBackgroundColor: 'rgba(48, 48, 48, 0.8)',	legendBackgroundColorSolid: 'rgb(70, 70, 70)',	dataLabelsColor: '#444',	textColor: '#E0E0E0',	maskColor: 'rgba(255,255,255,0.3)'};// Apply the themevar highchartsOptions = Highcharts.setOptions(Highcharts.theme);
 |