gray.js 6.5 KB

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