/** * Codactiv theme for Highcharts JS * @author Thomas Eschemann */ Highcharts.theme = { colors: ["#E25663","#9FD6D2","#F6B37E","#F4DC92","#C5E0BD","#A2D0AB"], chart: { backgroundColor: 'none', borderColor: '#fff', borderWidth: 0, className: 'dark-container', plotBackgroundColor: 'none', plotBorderColor: '#CCCCCC', plotBorderWidth: 0 }, title: { style: { color: 'null', font: 'bold 16px "Trebuchet MS", Verdana, sans-serif' } }, subtitle: { style: { color: 'null', font: 'bold 12px "Trebuchet MS", Verdana, sans-serif' } }, xAxis: { gridLineColor: 'null', gridLineWidth: 0, labels: { style: { color: '#777777' } }, lineColor: 'null', tickColor: 'null', title: { style: { color: 'null', fontWeight: 'bold', fontSize: '12px', fontFamily: 'Trebuchet MS, Verdana, sans-serif' } } }, yAxis: { allowDecimals:false, gridLineWidth: 1, gridLineColor: '#f1f1f1', labels: { style: { color: '#777777' } }, lineColor: '#f1f1f1', minorTickInterval: null, tickColor: '#FFFFFF', tickWidth: 1, title: { style: { color: 'null', fontWeight: 'bold', fontSize: '12px', fontFamily: 'Trebuchet MS, Verdana, sans-serif' } } }, tooltip: { borderColor : '#000', backgroundColor: '#000', style: { color: '#F0F0F0' } }, toolbar: { itemStyle: { color: 'silver' } }, plotOptions: { bar:{ borderWidth:'0', borderColor: '#FFFFFF', shadow : false }, series: { shadow : false, fillOpacity: 1, lineWidth: 1.5, }, line: { dataLabels: { color: '#FFFFFF' }, marker: { lineColor: '#333' }, lineWidth: 0 }, spline: { marker: { lineColor: '#333' } }, scatter: { marker: { lineColor: '#333' } }, candlestick: { lineColor: 'white' } }, legend : { layout: 'horizontal' }, credits: { style: { color: '#fff' } }, labels: { style: { color: '#CCC' } }, navigation: { buttonOptions: { backgroundColor: { linearGradient: [0, 0, 0, 20], stops: [ [0.4, '#606060'], [0.6, '#333333'] ] }, borderColor: '#000000', symbolStroke: '#C0C0C0', hoverSymbolStroke: '#FFFFFF' } }, exporting: { buttons: { exportButton: { symbolFill: '#55BE3B' }, printButton: { symbolFill: '#7797BE' } } }, // scroll charts rangeSelector: { buttonTheme: { fill: { linearGradient: [0, 0, 0, 20], stops: [ [0.4, '#888'], [0.6, '#555'] ] }, stroke: '#000000', style: { color: '#CCC', fontWeight: 'bold' }, states: { hover: { fill: { linearGradient: [0, 0, 0, 20], stops: [ [0.4, '#BBB'], [0.6, '#888'] ] }, stroke: '#000000', style: { color: 'white' } }, select: { fill: { linearGradient: [0, 0, 0, 20], 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: [0, 0, 0, 20], stops: [ [0.4, '#888'], [0.6, '#555'] ] }, barBorderColor: '#CCC', buttonArrowColor: '#CCC', buttonBackgroundColor: { linearGradient: [0, 0, 0, 20], stops: [ [0.4, '#888'], [0.6, '#555'] ] }, buttonBorderColor: '#CCC', rifleColor: '#FFF', trackBackgroundColor: { linearGradient: [0, 0, 0, 10], 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: '#444', maskColor: 'rgba(255,255,255,0.3)' }; // Apply the theme var highchartsOptions = Highcharts.setOptions(Highcharts.theme);