gray.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. /**
  2. * Gray theme for Highcharts JS
  3. * @author Torstein Honsi
  4. */
  5. Highcharts.theme = {
  6. colors: ["#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee", "#ff0066", "#eeaaee",
  7. "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
  8. chart: {
  9. backgroundColor: {
  10. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  11. stops: [
  12. [0, 'rgb(96, 96, 96)'],
  13. [1, 'rgb(16, 16, 16)']
  14. ]
  15. },
  16. borderWidth: 0,
  17. borderRadius: 0,
  18. plotBackgroundColor: null,
  19. plotShadow: false,
  20. plotBorderWidth: 0
  21. },
  22. title: {
  23. style: {
  24. color: '#FFF',
  25. font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
  26. }
  27. },
  28. subtitle: {
  29. style: {
  30. color: '#DDD',
  31. font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
  32. }
  33. },
  34. xAxis: {
  35. gridLineWidth: 0,
  36. lineColor: '#999',
  37. tickColor: '#999',
  38. labels: {
  39. style: {
  40. color: '#999',
  41. fontWeight: 'bold'
  42. }
  43. },
  44. title: {
  45. style: {
  46. color: '#AAA',
  47. font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
  48. }
  49. }
  50. },
  51. yAxis: {
  52. alternateGridColor: null,
  53. minorTickInterval: null,
  54. gridLineColor: 'rgba(255, 255, 255, .1)',
  55. minorGridLineColor: 'rgba(255,255,255,0.07)',
  56. lineWidth: 0,
  57. tickWidth: 0,
  58. labels: {
  59. style: {
  60. color: '#999',
  61. fontWeight: 'bold'
  62. }
  63. },
  64. title: {
  65. style: {
  66. color: '#AAA',
  67. font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
  68. }
  69. }
  70. },
  71. legend: {
  72. itemStyle: {
  73. color: '#CCC'
  74. },
  75. itemHoverStyle: {
  76. color: '#FFF'
  77. },
  78. itemHiddenStyle: {
  79. color: '#333'
  80. }
  81. },
  82. labels: {
  83. style: {
  84. color: '#CCC'
  85. }
  86. },
  87. tooltip: {
  88. backgroundColor: {
  89. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  90. stops: [
  91. [0, 'rgba(96, 96, 96, .8)'],
  92. [1, 'rgba(16, 16, 16, .8)']
  93. ]
  94. },
  95. borderWidth: 0,
  96. style: {
  97. color: '#FFF'
  98. }
  99. },
  100. plotOptions: {
  101. series: {
  102. nullColor: '#444444'
  103. },
  104. line: {
  105. dataLabels: {
  106. color: '#CCC'
  107. },
  108. marker: {
  109. lineColor: '#333'
  110. }
  111. },
  112. spline: {
  113. marker: {
  114. lineColor: '#333'
  115. }
  116. },
  117. scatter: {
  118. marker: {
  119. lineColor: '#333'
  120. }
  121. },
  122. candlestick: {
  123. lineColor: 'white'
  124. }
  125. },
  126. toolbar: {
  127. itemStyle: {
  128. color: '#CCC'
  129. }
  130. },
  131. navigation: {
  132. buttonOptions: {
  133. symbolStroke: '#DDDDDD',
  134. hoverSymbolStroke: '#FFFFFF',
  135. theme: {
  136. fill: {
  137. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  138. stops: [
  139. [0.4, '#606060'],
  140. [0.6, '#333333']
  141. ]
  142. },
  143. stroke: '#000000'
  144. }
  145. }
  146. },
  147. // scroll charts
  148. rangeSelector: {
  149. buttonTheme: {
  150. fill: {
  151. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  152. stops: [
  153. [0.4, '#888'],
  154. [0.6, '#555']
  155. ]
  156. },
  157. stroke: '#000000',
  158. style: {
  159. color: '#CCC',
  160. fontWeight: 'bold'
  161. },
  162. states: {
  163. hover: {
  164. fill: {
  165. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  166. stops: [
  167. [0.4, '#BBB'],
  168. [0.6, '#888']
  169. ]
  170. },
  171. stroke: '#000000',
  172. style: {
  173. color: 'white'
  174. }
  175. },
  176. select: {
  177. fill: {
  178. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  179. stops: [
  180. [0.1, '#000'],
  181. [0.3, '#333']
  182. ]
  183. },
  184. stroke: '#000000',
  185. style: {
  186. color: 'yellow'
  187. }
  188. }
  189. }
  190. },
  191. inputStyle: {
  192. backgroundColor: '#333',
  193. color: 'silver'
  194. },
  195. labelStyle: {
  196. color: 'silver'
  197. }
  198. },
  199. navigator: {
  200. handles: {
  201. backgroundColor: '#666',
  202. borderColor: '#AAA'
  203. },
  204. outlineColor: '#CCC',
  205. maskFill: 'rgba(16, 16, 16, 0.5)',
  206. series: {
  207. color: '#7798BF',
  208. lineColor: '#A6C7ED'
  209. }
  210. },
  211. scrollbar: {
  212. barBackgroundColor: {
  213. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  214. stops: [
  215. [0.4, '#888'],
  216. [0.6, '#555']
  217. ]
  218. },
  219. barBorderColor: '#CCC',
  220. buttonArrowColor: '#CCC',
  221. buttonBackgroundColor: {
  222. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  223. stops: [
  224. [0.4, '#888'],
  225. [0.6, '#555']
  226. ]
  227. },
  228. buttonBorderColor: '#CCC',
  229. rifleColor: '#FFF',
  230. trackBackgroundColor: {
  231. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  232. stops: [
  233. [0, '#000'],
  234. [1, '#333']
  235. ]
  236. },
  237. trackBorderColor: '#666'
  238. },
  239. // special colors for some of the demo examples
  240. legendBackgroundColor: 'rgba(48, 48, 48, 0.8)',
  241. background2: 'rgb(70, 70, 70)',
  242. dataLabelsColor: '#444',
  243. textColor: '#E0E0E0',
  244. maskColor: 'rgba(255,255,255,0.3)'
  245. };
  246. // Apply the theme
  247. var highchartsOptions = Highcharts.setOptions(Highcharts.theme);