123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257 |
- /**
- * Gray theme for Highcharts JS
- * @author Torstein Honsi
- */
- 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: 0,
- 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: {
- nullColor: '#444444'
- },
- 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)',
- background2: 'rgb(70, 70, 70)',
- dataLabelsColor: '#444',
- textColor: '#E0E0E0',
- maskColor: 'rgba(255,255,255,0.3)'
- };
- // Apply the theme
- var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
|