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.

219 lines
5.0 KiB

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