123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213 |
- /**
- * Dark theme for Highcharts JS
- * @author Torstein Honsi
- */
- // Load the fonts
- Highcharts.createElement('link', {
- href: 'https://fonts.googleapis.com/css?family=Unica+One',
- rel: 'stylesheet',
- type: 'text/css'
- }, null, document.getElementsByTagName('head')[0]);
- Highcharts.theme = {
- colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
- "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
- chart: {
- backgroundColor: {
- linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
- stops: [
- [0, '#2a2a2b'],
- [1, '#3e3e40']
- ]
- },
- style: {
- fontFamily: "'Unica One', sans-serif"
- },
- plotBorderColor: '#606063'
- },
- title: {
- style: {
- color: '#E0E0E3',
- textTransform: 'uppercase',
- fontSize: '20px'
- }
- },
- subtitle: {
- style: {
- color: '#E0E0E3',
- textTransform: 'uppercase'
- }
- },
- xAxis: {
- gridLineColor: '#707073',
- labels: {
- style: {
- color: '#E0E0E3'
- }
- },
- lineColor: '#707073',
- minorGridLineColor: '#505053',
- tickColor: '#707073',
- title: {
- style: {
- color: '#A0A0A3'
- }
- }
- },
- yAxis: {
- gridLineColor: '#707073',
- labels: {
- style: {
- color: '#E0E0E3'
- }
- },
- lineColor: '#707073',
- minorGridLineColor: '#505053',
- tickColor: '#707073',
- tickWidth: 1,
- title: {
- style: {
- color: '#A0A0A3'
- }
- }
- },
- tooltip: {
- backgroundColor: 'rgba(0, 0, 0, 0.85)',
- style: {
- color: '#F0F0F0'
- }
- },
- plotOptions: {
- series: {
- dataLabels: {
- color: '#B0B0B3'
- },
- marker: {
- lineColor: '#333'
- }
- },
- boxplot: {
- fillColor: '#505053'
- },
- candlestick: {
- lineColor: 'white'
- },
- errorbar: {
- color: 'white'
- }
- },
- legend: {
- itemStyle: {
- color: '#E0E0E3'
- },
- itemHoverStyle: {
- color: '#FFF'
- },
- itemHiddenStyle: {
- color: '#606063'
- }
- },
- credits: {
- style: {
- color: '#666'
- }
- },
- labels: {
- style: {
- color: '#707073'
- }
- },
- drilldown: {
- activeAxisLabelStyle: {
- color: '#F0F0F3'
- },
- activeDataLabelStyle: {
- color: '#F0F0F3'
- }
- },
- navigation: {
- buttonOptions: {
- symbolStroke: '#DDDDDD',
- theme: {
- fill: '#505053'
- }
- }
- },
- // scroll charts
- rangeSelector: {
- buttonTheme: {
- fill: '#505053',
- stroke: '#000000',
- style: {
- color: '#CCC'
- },
- states: {
- hover: {
- fill: '#707073',
- stroke: '#000000',
- style: {
- color: 'white'
- }
- },
- select: {
- fill: '#000003',
- stroke: '#000000',
- style: {
- color: 'white'
- }
- }
- }
- },
- inputBoxBorderColor: '#505053',
- inputStyle: {
- backgroundColor: '#333',
- color: 'silver'
- },
- labelStyle: {
- color: 'silver'
- }
- },
- navigator: {
- handles: {
- backgroundColor: '#666',
- borderColor: '#AAA'
- },
- outlineColor: '#CCC',
- maskFill: 'rgba(255,255,255,0.1)',
- series: {
- color: '#7798BF',
- lineColor: '#A6C7ED'
- },
- xAxis: {
- gridLineColor: '#505053'
- }
- },
- scrollbar: {
- barBackgroundColor: '#808083',
- barBorderColor: '#808083',
- buttonArrowColor: '#CCC',
- buttonBackgroundColor: '#606063',
- buttonBorderColor: '#606063',
- rifleColor: '#FFF',
- trackBackgroundColor: '#404043',
- trackBorderColor: '#404043'
- },
- // special colors for some of the
- legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
- background2: '#505053',
- dataLabelsColor: '#B0B0B3',
- textColor: '#C0C0C0',
- contrastTextColor: '#F0F0F3',
- maskColor: 'rgba(255,255,255,0.3)'
- };
- // Apply the theme
- Highcharts.setOptions(Highcharts.theme);
|