dark-blue.js 4.2 KB

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