123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255 |
- /**
- * Dark blue theme for Highcharts JS
- * @author Torstein Hønsi
- */
- Highcharts.theme = {
- colors: ["#DDDF0D", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
- "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
- chart: {
- backgroundColor: {
- linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
- stops: [
- [0, 'rgb(48, 48, 96)'],
- [1, 'rgb(0, 0, 0)']
- ]
- },
- borderColor: '#000000',
- borderWidth: 2,
- className: 'dark-container',
- plotBackgroundColor: 'rgba(255, 255, 255, .1)',
- plotBorderColor: '#CCCCCC',
- plotBorderWidth: 1
- },
- title: {
- style: {
- color: '#C0C0C0',
- font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
- }
- },
- subtitle: {
- style: {
- color: '#666666',
- font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
- }
- },
- xAxis: {
- gridLineColor: '#333333',
- gridLineWidth: 1,
- labels: {
- style: {
- color: '#A0A0A0'
- }
- },
- lineColor: '#A0A0A0',
- tickColor: '#A0A0A0',
- title: {
- style: {
- color: '#CCC',
- fontWeight: 'bold',
- fontSize: '12px',
- fontFamily: 'Trebuchet MS, Verdana, sans-serif'
- }
- }
- },
- yAxis: {
- gridLineColor: '#333333',
- labels: {
- style: {
- color: '#A0A0A0'
- }
- },
- lineColor: '#A0A0A0',
- minorTickInterval: null,
- tickColor: '#A0A0A0',
- tickWidth: 1,
- title: {
- style: {
- color: '#CCC',
- fontWeight: 'bold',
- fontSize: '12px',
- fontFamily: 'Trebuchet MS, Verdana, sans-serif'
- }
- }
- },
- tooltip: {
- backgroundColor: 'rgba(0, 0, 0, 0.75)',
- style: {
- color: '#F0F0F0'
- }
- },
- toolbar: {
- itemStyle: {
- color: 'silver'
- }
- },
- plotOptions: {
- line: {
- dataLabels: {
- color: '#CCC'
- },
- marker: {
- lineColor: '#333'
- }
- },
- spline: {
- marker: {
- lineColor: '#333'
- }
- },
- scatter: {
- marker: {
- lineColor: '#333'
- }
- },
- candlestick: {
- lineColor: 'white'
- }
- },
- legend: {
- itemStyle: {
- font: '9pt Trebuchet MS, Verdana, sans-serif',
- color: '#A0A0A0'
- },
- itemHoverStyle: {
- color: '#FFF'
- },
- itemHiddenStyle: {
- color: '#444'
- }
- },
- credits: {
- style: {
- color: '#666'
- }
- },
- labels: {
- style: {
- color: '#CCC'
- }
- },
- navigation: {
- buttonOptions: {
- symbolStroke: '#DDDDDD',
- hoverSymbolStroke: '#FFFFFF',
- theme: {
- fill: {
- linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
- stops: [
- [0.4, '#606060'],
- [0.6, '#333333']
- ]
- },
- stroke: '#000000'
- }
- }
- },
- // scroll charts
- rangeSelector: {
- buttonTheme: {
- fill: {
- linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
- stops: [
- [0.4, '#888'],
- [0.6, '#555']
- ]
- },
- stroke: '#000000',
- style: {
- color: '#CCC',
- fontWeight: 'bold'
- },
- states: {
- hover: {
- fill: {
- linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
- stops: [
- [0.4, '#BBB'],
- [0.6, '#888']
- ]
- },
- stroke: '#000000',
- style: {
- color: 'white'
- }
- },
- select: {
- fill: {
- linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
- stops: [
- [0.1, '#000'],
- [0.3, '#333']
- ]
- },
- stroke: '#000000',
- style: {
- color: 'yellow'
- }
- }
- }
- },
- inputStyle: {
- backgroundColor: '#333',
- color: 'silver'
- },
- labelStyle: {
- color: 'silver'
- }
- },
- navigator: {
- handles: {
- backgroundColor: '#666',
- borderColor: '#AAA'
- },
- outlineColor: '#CCC',
- maskFill: 'rgba(16, 16, 16, 0.5)',
- series: {
- color: '#7798BF',
- lineColor: '#A6C7ED'
- }
- },
- scrollbar: {
- barBackgroundColor: {
- linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
- stops: [
- [0.4, '#888'],
- [0.6, '#555']
- ]
- },
- barBorderColor: '#CCC',
- buttonArrowColor: '#CCC',
- buttonBackgroundColor: {
- linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
- stops: [
- [0.4, '#888'],
- [0.6, '#555']
- ]
- },
- buttonBorderColor: '#CCC',
- rifleColor: '#FFF',
- trackBackgroundColor: {
- linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
- stops: [
- [0, '#000'],
- [1, '#333']
- ]
- },
- trackBorderColor: '#666'
- },
- // special colors for some of the
- legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
- legendBackgroundColorSolid: 'rgb(35, 35, 70)',
- dataLabelsColor: '#444',
- textColor: '#C0C0C0',
- maskColor: 'rgba(255,255,255,0.3)'
- };
- // Apply the theme
- var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
|