sand-signika.js 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. /**
  2. * Sand-Signika theme for Highcharts JS
  3. * @author Torstein Honsi
  4. */
  5. // Load the fonts
  6. Highcharts.createElement('link', {
  7. href: '//fonts.googleapis.com/css?family=Signika:400,700',
  8. rel: 'stylesheet',
  9. type: 'text/css'
  10. }, null, document.getElementsByTagName('head')[0]);
  11. // Add the background image to the container
  12. Highcharts.wrap(Highcharts.Chart.prototype, 'getContainer', function (proceed) {
  13. proceed.call(this);
  14. this.container.style.background = 'url(http://www.highcharts.com/samples/graphics/sand.png)';
  15. });
  16. Highcharts.theme = {
  17. colors: ["#f45b5b", "#8085e9", "#8d4654", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
  18. "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
  19. chart: {
  20. backgroundColor: null,
  21. style: {
  22. fontFamily: "Signika, serif"
  23. }
  24. },
  25. title: {
  26. style: {
  27. color: 'black',
  28. fontSize: '16px',
  29. fontWeight: 'bold'
  30. }
  31. },
  32. subtitle: {
  33. style: {
  34. color: 'black'
  35. }
  36. },
  37. tooltip: {
  38. borderWidth: 0
  39. },
  40. legend: {
  41. itemStyle: {
  42. fontWeight: 'bold',
  43. fontSize: '13px'
  44. }
  45. },
  46. xAxis: {
  47. labels: {
  48. style: {
  49. color: '#6e6e70'
  50. }
  51. }
  52. },
  53. yAxis: {
  54. labels: {
  55. style: {
  56. color: '#6e6e70'
  57. }
  58. }
  59. },
  60. plotOptions: {
  61. series: {
  62. shadow: true
  63. },
  64. candlestick: {
  65. lineColor: '#404048'
  66. },
  67. map: {
  68. shadow: false
  69. }
  70. },
  71. // Highstock specific
  72. navigator: {
  73. xAxis: {
  74. gridLineColor: '#D0D0D8'
  75. }
  76. },
  77. rangeSelector: {
  78. buttonTheme: {
  79. fill: 'white',
  80. stroke: '#C0C0C8',
  81. 'stroke-width': 1,
  82. states: {
  83. select: {
  84. fill: '#D0D0D8'
  85. }
  86. }
  87. }
  88. },
  89. scrollbar: {
  90. trackBorderColor: '#C0C0C8'
  91. },
  92. // General
  93. background2: '#E0E0E8'
  94. };
  95. // Apply the theme
  96. Highcharts.setOptions(Highcharts.theme);