gray.js 6.5 KB

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