dark-blue.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  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: { x1: 0, y1: 0, x2: 1, y2: 1 },
  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. symbolStroke: '#DDDDDD',
  133. hoverSymbolStroke: '#FFFFFF',
  134. theme: {
  135. fill: {
  136. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  137. stops: [
  138. [0.4, '#606060'],
  139. [0.6, '#333333']
  140. ]
  141. },
  142. stroke: '#000000'
  143. }
  144. }
  145. },
  146. // scroll charts
  147. rangeSelector: {
  148. buttonTheme: {
  149. fill: {
  150. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  151. stops: [
  152. [0.4, '#888'],
  153. [0.6, '#555']
  154. ]
  155. },
  156. stroke: '#000000',
  157. style: {
  158. color: '#CCC',
  159. fontWeight: 'bold'
  160. },
  161. states: {
  162. hover: {
  163. fill: {
  164. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  165. stops: [
  166. [0.4, '#BBB'],
  167. [0.6, '#888']
  168. ]
  169. },
  170. stroke: '#000000',
  171. style: {
  172. color: 'white'
  173. }
  174. },
  175. select: {
  176. fill: {
  177. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  178. stops: [
  179. [0.1, '#000'],
  180. [0.3, '#333']
  181. ]
  182. },
  183. stroke: '#000000',
  184. style: {
  185. color: 'yellow'
  186. }
  187. }
  188. }
  189. },
  190. inputStyle: {
  191. backgroundColor: '#333',
  192. color: 'silver'
  193. },
  194. labelStyle: {
  195. color: 'silver'
  196. }
  197. },
  198. navigator: {
  199. handles: {
  200. backgroundColor: '#666',
  201. borderColor: '#AAA'
  202. },
  203. outlineColor: '#CCC',
  204. maskFill: 'rgba(16, 16, 16, 0.5)',
  205. series: {
  206. color: '#7798BF',
  207. lineColor: '#A6C7ED'
  208. }
  209. },
  210. scrollbar: {
  211. barBackgroundColor: {
  212. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  213. stops: [
  214. [0.4, '#888'],
  215. [0.6, '#555']
  216. ]
  217. },
  218. barBorderColor: '#CCC',
  219. buttonArrowColor: '#CCC',
  220. buttonBackgroundColor: {
  221. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  222. stops: [
  223. [0.4, '#888'],
  224. [0.6, '#555']
  225. ]
  226. },
  227. buttonBorderColor: '#CCC',
  228. rifleColor: '#FFF',
  229. trackBackgroundColor: {
  230. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  231. stops: [
  232. [0, '#000'],
  233. [1, '#333']
  234. ]
  235. },
  236. trackBorderColor: '#666'
  237. },
  238. // special colors for some of the
  239. legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
  240. legendBackgroundColorSolid: 'rgb(35, 35, 70)',
  241. dataLabelsColor: '#444',
  242. textColor: '#C0C0C0',
  243. maskColor: 'rgba(255,255,255,0.3)'
  244. };
  245. // Apply the theme
  246. var highchartsOptions = Highcharts.setOptions(Highcharts.theme);