js/themes/dark-green.js

   1 /**
   2  * Dark blue theme for Highcharts JS
   3  * @author Torstein Hønsi
   4  */
   5
   6 Highcharts.theme = {
   7         colors: ["#DDDF0D", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
   8                 "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
   9         chart: {
  10                 backgroundColor: {
  11                         linearGradient: [0, 0, 250, 500],
  12                         stops: [
  13                                 [0, 'rgb(48, 96, 48)'],
  14                                 [1, 'rgb(0, 0, 0)']
  15                         ]
  16                 },
  17                 borderColor: '#000000',
  18                 borderWidth: 2,
  19                 className: 'dark-container',
  20                 plotBackgroundColor: 'rgba(255, 255, 255, .1)',
  21                 plotBorderColor: '#CCCCCC',
  22                 plotBorderWidth: 1
  23         },
  24         title: {
  25                 style: {
  26                         color: '#C0C0C0',
  27                         font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
  28                 }
  29         },
  30         subtitle: {
  31                 style: {
  32                         color: '#666666',
  33                         font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
  34                 }
  35         },
  36         xAxis: {
  37                 gridLineColor: '#333333',
  38                 gridLineWidth: 1,
  39                 labels: {
  40                         style: {
  41                                 color: '#A0A0A0'
  42                         }
  43                 },
  44                 lineColor: '#A0A0A0',
  45                 tickColor: '#A0A0A0',
  46                 title: {
  47                         style: {
  48                                 color: '#CCC',
  49                                 fontWeight: 'bold',
  50                                 fontSize: '12px',
  51                                 fontFamily: 'Trebuchet MS, Verdana, sans-serif'
  52
  53                         }
  54                 }
  55         },
  56         yAxis: {
  57                 gridLineColor: '#333333',
  58                 labels: {
  59                         style: {
  60                                 color: '#A0A0A0'
  61                         }
  62                 },
  63                 lineColor: '#A0A0A0',
  64                 minorTickInterval: null,
  65                 tickColor: '#A0A0A0',
  66                 tickWidth: 1,
  67                 title: {
  68                         style: {
  69                                 color: '#CCC',
  70                                 fontWeight: 'bold',
  71                                 fontSize: '12px',
  72                                 fontFamily: 'Trebuchet MS, Verdana, sans-serif'
  73                         }
  74                 }
  75         },
  76         tooltip: {
  77                 backgroundColor: 'rgba(0, 0, 0, 0.75)',
  78                 style: {
  79                         color: '#F0F0F0'
  80                 }
  81         },
  82         toolbar: {
  83                 itemStyle: {
  84                         color: 'silver'
  85                 }
  86         },
  87         plotOptions: {
  88                 line: {
  89                         dataLabels: {
  90                                 color: '#CCC'
  91                         },
  92                         marker: {
  93                                 lineColor: '#333'
  94                         }
  95                 },
  96                 spline: {
  97                         marker: {
  98                                 lineColor: '#333'
  99                         }
 100                 },
 101                 scatter: {
 102                         marker: {
 103                                 lineColor: '#333'
 104                         }
 105                 },
 106                 candlestick: {
 107                         lineColor: 'white'
 108                 }
 109         },
 110         legend: {
 111                 itemStyle: {
 112                         font: '9pt Trebuchet MS, Verdana, sans-serif',
 113                         color: '#A0A0A0'
 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
 133         navigation: {
 134                 buttonOptions: {
 135                         backgroundColor: {
 136                                 linearGradient: [0, 0, 0, 20],
 137                                 stops: [
 138                                         [0.4, '#606060'],
 139                                         [0.6, '#333333']
 140                                 ]
 141                         },
 142                         borderColor: '#000000',
 143                         symbolStroke: '#C0C0C0',
 144                         hoverSymbolStroke: '#FFFFFF'
 145                 }
 146         },
 147
 148         exporting: {
 149                 buttons: {
 150                         exportButton: {
 151                                 symbolFill: '#55BE3B'
 152                         },
 153                         printButton: {
 154                                 symbolFill: '#7797BE'
 155                         }
 156                 }
 157         },
 158
 159         // scroll charts
 160         rangeSelector: {
 161                 buttonTheme: {
 162                         fill: {
 163                                 linearGradient: [0, 0, 0, 20],
 164                                 stops: [
 165                                         [0.4, '#888'],
 166                                         [0.6, '#555']
 167                                 ]
 168                         },
 169                         stroke: '#000000',
 170                         style: {
 171                                 color: '#CCC',
 172                                 fontWeight: 'bold'
 173                         },
 174                         states: {
 175                                 hover: {
 176                                         fill: {
 177                                                 linearGradient: [0, 0, 0, 20],
 178                                                 stops: [
 179                                                         [0.4, '#BBB'],
 180                                                         [0.6, '#888']
 181                                                 ]
 182                                         },
 183                                         stroke: '#000000',
 184                                         style: {
 185                                                 color: 'white'
 186                                         }
 187                                 },
 188                                 select: {
 189                                         fill: {
 190                                                 linearGradient: [0, 0, 0, 20],
 191                                                 stops: [
 192                                                         [0.1, '#000'],
 193                                                         [0.3, '#333']
 194                                                 ]
 195                                         },
 196                                         stroke: '#000000',
 197                                         style: {
 198                                                 color: 'yellow'
 199                                         }
 200                                 }
 201                         }
 202                 },
 203                 inputStyle: {
 204                         backgroundColor: '#333',
 205                         color: 'silver'
 206                 },
 207                 labelStyle: {
 208                         color: 'silver'
 209                 }
 210         },
 211
 212         navigator: {
 213                 handles: {
 214                         backgroundColor: '#666',
 215                         borderColor: '#AAA'
 216                 },
 217                 outlineColor: '#CCC',
 218                 maskFill: 'rgba(16, 16, 16, 0.5)',
 219                 series: {
 220                         color: '#7798BF',
 221                         lineColor: '#A6C7ED'
 222                 }
 223         },
 224
 225         scrollbar: {
 226                 barBackgroundColor: {
 227                                 linearGradient: [0, 0, 0, 20],
 228                                 stops: [
 229                                         [0.4, '#888'],
 230                                         [0.6, '#555']
 231                                 ]
 232                         },
 233                 barBorderColor: '#CCC',
 234                 buttonArrowColor: '#CCC',
 235                 buttonBackgroundColor: {
 236                                 linearGradient: [0, 0, 0, 20],
 237                                 stops: [
 238                                         [0.4, '#888'],
 239                                         [0.6, '#555']
 240                                 ]
 241                         },
 242                 buttonBorderColor: '#CCC',
 243                 rifleColor: '#FFF',
 244                 trackBackgroundColor: {
 245                         linearGradient: [0, 0, 0, 10],
 246                         stops: [
 247                                 [0, '#000'],
 248                                 [1, '#333']
 249                         ]
 250                 },
 251                 trackBorderColor: '#666'
 252         },
 253
 254         // special colors for some of the
 255         legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
 256         legendBackgroundColorSolid: 'rgb(35, 35, 70)',
 257         dataLabelsColor: '#444',
 258         textColor: '#C0C0C0',
 259         maskColor: 'rgba(255,255,255,0.3)'
 260 };
 261
 262 // Apply the theme
 263 var highchartsOptions = Highcharts.setOptions(Highcharts.theme);