dark-blue.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  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. legend: {
  75. itemStyle: {
  76. font: '9pt Trebuchet MS, Verdana, sans-serif',
  77. color: '#A0A0A0'
  78. }
  79. },
  80. tooltip: {
  81. backgroundColor: 'rgba(0, 0, 0, 0.75)',
  82. style: {
  83. color: '#F0F0F0'
  84. }
  85. },
  86. toolbar: {
  87. itemStyle: {
  88. color: 'silver'
  89. }
  90. },
  91. plotOptions: {
  92. line: {
  93. dataLabels: {
  94. color: '#CCC'
  95. },
  96. marker: {
  97. lineColor: '#333'
  98. }
  99. },
  100. spline: {
  101. marker: {
  102. lineColor: '#333'
  103. }
  104. },
  105. scatter: {
  106. marker: {
  107. lineColor: '#333'
  108. }
  109. }
  110. },
  111. legend: {
  112. itemStyle: {
  113. color: '#CCC'
  114. },
  115. itemHoverStyle: {
  116. color: '#FFF'
  117. },
  118. itemHiddenStyle: {
  119. color: '#444'
  120. }
  121. },
  122. credits: {
  123. style: {
  124. color: '#666'
  125. }
  126. },
  127. labels: {
  128. style: {
  129. color: '#CCC'
  130. }
  131. },
  132. navigation: {
  133. buttonOptions: {
  134. backgroundColor: {
  135. linearGradient: [0, 0, 0, 20],
  136. stops: [
  137. [0.4, '#606060'],
  138. [0.6, '#333333']
  139. ]
  140. },
  141. borderColor: '#000000',
  142. symbolStroke: '#C0C0C0',
  143. hoverSymbolStroke: '#FFFFFF'
  144. }
  145. },
  146. exporting: {
  147. buttons: {
  148. exportButton: {
  149. symbolFill: '#55BE3B'
  150. },
  151. printButton: {
  152. symbolFill: '#7797BE'
  153. }
  154. }
  155. },
  156. // special colors for some of the
  157. legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
  158. legendBackgroundColorSolid: 'rgb(35, 35, 70)',
  159. dataLabelsColor: '#444',
  160. textColor: '#C0C0C0',
  161. maskColor: 'rgba(255,255,255,0.3)'
  162. };
  163. // Apply the theme
  164. var highchartsOptions = Highcharts.setOptions(Highcharts.theme);