grid.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. /**
  2. * Grid theme for Highcharts JS
  3. * @author Torstein Honsi
  4. */
  5. Highcharts.theme = {
  6. colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
  7. chart: {
  8. backgroundColor: {
  9. linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
  10. stops: [
  11. [0, 'rgb(255, 255, 255)'],
  12. [1, 'rgb(240, 240, 255)']
  13. ]
  14. },
  15. borderWidth: 2,
  16. plotBackgroundColor: 'rgba(255, 255, 255, .9)',
  17. plotShadow: true,
  18. plotBorderWidth: 1
  19. },
  20. title: {
  21. style: {
  22. color: '#000',
  23. font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
  24. }
  25. },
  26. subtitle: {
  27. style: {
  28. color: '#666666',
  29. font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
  30. }
  31. },
  32. xAxis: {
  33. gridLineWidth: 1,
  34. lineColor: '#000',
  35. tickColor: '#000',
  36. labels: {
  37. style: {
  38. color: '#000',
  39. font: '11px Trebuchet MS, Verdana, sans-serif'
  40. }
  41. },
  42. title: {
  43. style: {
  44. color: '#333',
  45. fontWeight: 'bold',
  46. fontSize: '12px',
  47. fontFamily: 'Trebuchet MS, Verdana, sans-serif'
  48. }
  49. }
  50. },
  51. yAxis: {
  52. minorTickInterval: 'auto',
  53. lineColor: '#000',
  54. lineWidth: 1,
  55. tickWidth: 1,
  56. tickColor: '#000',
  57. labels: {
  58. style: {
  59. color: '#000',
  60. font: '11px Trebuchet MS, Verdana, sans-serif'
  61. }
  62. },
  63. title: {
  64. style: {
  65. color: '#333',
  66. fontWeight: 'bold',
  67. fontSize: '12px',
  68. fontFamily: 'Trebuchet MS, Verdana, sans-serif'
  69. }
  70. }
  71. },
  72. legend: {
  73. itemStyle: {
  74. font: '9pt Trebuchet MS, Verdana, sans-serif',
  75. color: 'black'
  76. },
  77. itemHoverStyle: {
  78. color: '#039'
  79. },
  80. itemHiddenStyle: {
  81. color: 'gray'
  82. }
  83. },
  84. labels: {
  85. style: {
  86. color: '#99b'
  87. }
  88. },
  89. navigation: {
  90. buttonOptions: {
  91. theme: {
  92. stroke: '#CCCCCC'
  93. }
  94. }
  95. }
  96. };
  97. // Apply the theme
  98. var highchartsOptions = Highcharts.setOptions(Highcharts.theme);