gray.js 4.3 KB

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