You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

213 lines
3.4 KiB

9 years ago
  1. /**
  2. * Dark theme for Highcharts JS
  3. * @author Torstein Honsi
  4. */
  5. // Load the fonts
  6. Highcharts.createElement('link', {
  7. href: '//fonts.googleapis.com/css?family=Unica+One',
  8. rel: 'stylesheet',
  9. type: 'text/css'
  10. }, null, document.getElementsByTagName('head')[0]);
  11. Highcharts.theme = {
  12. colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
  13. "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
  14. chart: {
  15. backgroundColor: {
  16. linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
  17. stops: [
  18. [0, '#2a2a2b'],
  19. [1, '#3e3e40']
  20. ]
  21. },
  22. style: {
  23. fontFamily: "'Unica One', sans-serif"
  24. },
  25. plotBorderColor: '#606063'
  26. },
  27. title: {
  28. style: {
  29. color: '#E0E0E3',
  30. textTransform: 'uppercase',
  31. fontSize: '20px'
  32. }
  33. },
  34. subtitle: {
  35. style: {
  36. color: '#E0E0E3',
  37. textTransform: 'uppercase'
  38. }
  39. },
  40. xAxis: {
  41. gridLineColor: '#707073',
  42. labels: {
  43. style: {
  44. color: '#E0E0E3'
  45. }
  46. },
  47. lineColor: '#707073',
  48. minorGridLineColor: '#505053',
  49. tickColor: '#707073',
  50. title: {
  51. style: {
  52. color: '#A0A0A3'
  53. }
  54. }
  55. },
  56. yAxis: {
  57. gridLineColor: '#707073',
  58. labels: {
  59. style: {
  60. color: '#E0E0E3'
  61. }
  62. },
  63. lineColor: '#707073',
  64. minorGridLineColor: '#505053',
  65. tickColor: '#707073',
  66. tickWidth: 1,
  67. title: {
  68. style: {
  69. color: '#A0A0A3'
  70. }
  71. }
  72. },
  73. tooltip: {
  74. backgroundColor: 'rgba(0, 0, 0, 0.85)',
  75. style: {
  76. color: '#F0F0F0'
  77. }
  78. },
  79. plotOptions: {
  80. series: {
  81. dataLabels: {
  82. color: '#B0B0B3'
  83. },
  84. marker: {
  85. lineColor: '#333'
  86. }
  87. },
  88. boxplot: {
  89. fillColor: '#505053'
  90. },
  91. candlestick: {
  92. lineColor: 'white'
  93. },
  94. errorbar: {
  95. color: 'white'
  96. }
  97. },
  98. legend: {
  99. itemStyle: {
  100. color: '#E0E0E3'
  101. },
  102. itemHoverStyle: {
  103. color: '#FFF'
  104. },
  105. itemHiddenStyle: {
  106. color: '#606063'
  107. }
  108. },
  109. credits: {
  110. style: {
  111. color: '#666'
  112. }
  113. },
  114. labels: {
  115. style: {
  116. color: '#707073'
  117. }
  118. },
  119. drilldown: {
  120. activeAxisLabelStyle: {
  121. color: '#F0F0F3'
  122. },
  123. activeDataLabelStyle: {
  124. color: '#F0F0F3'
  125. }
  126. },
  127. navigation: {
  128. buttonOptions: {
  129. symbolStroke: '#DDDDDD',
  130. theme: {
  131. fill: '#505053'
  132. }
  133. }
  134. },
  135. // scroll charts
  136. rangeSelector: {
  137. buttonTheme: {
  138. fill: '#505053',
  139. stroke: '#000000',
  140. style: {
  141. color: '#CCC'
  142. },
  143. states: {
  144. hover: {
  145. fill: '#707073',
  146. stroke: '#000000',
  147. style: {
  148. color: 'white'
  149. }
  150. },
  151. select: {
  152. fill: '#000003',
  153. stroke: '#000000',
  154. style: {
  155. color: 'white'
  156. }
  157. }
  158. }
  159. },
  160. inputBoxBorderColor: '#505053',
  161. inputStyle: {
  162. backgroundColor: '#333',
  163. color: 'silver'
  164. },
  165. labelStyle: {
  166. color: 'silver'
  167. }
  168. },
  169. navigator: {
  170. handles: {
  171. backgroundColor: '#666',
  172. borderColor: '#AAA'
  173. },
  174. outlineColor: '#CCC',
  175. maskFill: 'rgba(255,255,255,0.1)',
  176. series: {
  177. color: '#7798BF',
  178. lineColor: '#A6C7ED'
  179. },
  180. xAxis: {
  181. gridLineColor: '#505053'
  182. }
  183. },
  184. scrollbar: {
  185. barBackgroundColor: '#808083',
  186. barBorderColor: '#808083',
  187. buttonArrowColor: '#CCC',
  188. buttonBackgroundColor: '#606063',
  189. buttonBorderColor: '#606063',
  190. rifleColor: '#FFF',
  191. trackBackgroundColor: '#404043',
  192. trackBorderColor: '#404043'
  193. },
  194. // special colors for some of the
  195. legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
  196. background2: '#505053',
  197. dataLabelsColor: '#B0B0B3',
  198. textColor: '#C0C0C0',
  199. contrastTextColor: '#F0F0F3',
  200. maskColor: 'rgba(255,255,255,0.3)'
  201. };
  202. // Apply the theme
  203. Highcharts.setOptions(Highcharts.theme);