gray.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. /**
  2. * Gray theme for Highcharts JS
  3. * @author Torstein Hønsi
  4. */
  5. Highcharts.theme = {
  6. colors: ["#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee", "#ff0066", "#eeaaee",
  7. "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
  8. chart: {
  9. backgroundColor: {
  10. linearGradient: [0, 0, 0, 400],
  11. stops: [
  12. [0, 'rgb(96, 96, 96)'],
  13. [1, 'rgb(16, 16, 16)']
  14. ]
  15. },
  16. borderWidth: 0,
  17. borderRadius: 15,
  18. plotBackgroundColor: null,
  19. plotShadow: false,
  20. plotBorderWidth: 0
  21. },
  22. title: {
  23. style: {
  24. color: '#FFF',
  25. font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
  26. }
  27. },
  28. subtitle: {
  29. style: {
  30. color: '#DDD',
  31. font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
  32. }
  33. },
  34. xAxis: {
  35. gridLineWidth: 0,
  36. lineColor: '#999',
  37. tickColor: '#999',
  38. labels: {
  39. style: {
  40. color: '#999',
  41. fontWeight: 'bold'
  42. }
  43. },
  44. title: {
  45. style: {
  46. color: '#AAA',
  47. font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
  48. }
  49. }
  50. },
  51. yAxis: {
  52. alternateGridColor: null,
  53. minorTickInterval: null,
  54. gridLineColor: 'rgba(255, 255, 255, .1)',
  55. lineWidth: 0,
  56. tickWidth: 0,
  57. labels: {
  58. style: {
  59. color: '#999',
  60. fontWeight: 'bold'
  61. }
  62. },
  63. title: {
  64. style: {
  65. color: '#AAA',
  66. font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
  67. }
  68. }
  69. },
  70. legend: {
  71. itemStyle: {
  72. color: '#CCC'
  73. },
  74. itemHoverStyle: {
  75. color: '#FFF'
  76. },
  77. itemHiddenStyle: {
  78. color: '#333'
  79. }
  80. },
  81. labels: {
  82. style: {
  83. color: '#CCC'
  84. }
  85. },
  86. tooltip: {
  87. backgroundColor: {
  88. linearGradient: [0, 0, 0, 50],
  89. stops: [
  90. [0, 'rgba(96, 96, 96, .8)'],
  91. [1, 'rgba(16, 16, 16, .8)']
  92. ]
  93. },
  94. borderWidth: 0,
  95. style: {
  96. color: '#FFF'
  97. }
  98. },
  99. plotOptions: {
  100. line: {
  101. dataLabels: {
  102. color: '#CCC'
  103. },
  104. marker: {
  105. lineColor: '#333'
  106. }
  107. },
  108. spline: {
  109. marker: {
  110. lineColor: '#333'
  111. }
  112. },
  113. scatter: {
  114. marker: {
  115. lineColor: '#333'
  116. }
  117. }
  118. },
  119. toolbar: {
  120. itemStyle: {
  121. color: '#CCC'
  122. }
  123. },
  124. navigation: {
  125. buttonOptions: {
  126. backgroundColor: {
  127. linearGradient: [0, 0, 0, 20],
  128. stops: [
  129. [0.4, '#606060'],
  130. [0.6, '#333333']
  131. ]
  132. },
  133. borderColor: '#000000',
  134. symbolStroke: '#C0C0C0',
  135. hoverSymbolStroke: '#FFFFFF'
  136. }
  137. },
  138. exporting: {
  139. buttons: {
  140. exportButton: {
  141. symbolFill: '#55BE3B'
  142. },
  143. printButton: {
  144. symbolFill: '#7797BE'
  145. }
  146. }
  147. },
  148. // special colors for some of the demo examples
  149. legendBackgroundColor: 'rgba(48, 48, 48, 0.8)',
  150. legendBackgroundColorSolid: 'rgb(70, 70, 70)',
  151. dataLabelsColor: '#444',
  152. textColor: '#E0E0E0',
  153. maskColor: 'rgba(255,255,255,0.3)'
  154. };
  155. // Apply the theme
  156. var highchartsOptions = Highcharts.setOptions(Highcharts.theme);