js/themes/skies.js

   1 /**
   2  * Skies theme for Highcharts JS
   3  * @author Torstein Hønsi
   4  */
   5
   6 Highcharts.theme = {
   7         colors: ["#514F78", "#42A07B", "#9B5E4A", "#72727F", "#1F949A", "#82914E", "#86777F", "#42A07B"],
   8         chart: {
   9                 className: 'skies',
  10                 borderWidth: 0,
  11                 plotShadow: true,
  12                 plotBackgroundImage: '/demo/gfx/skies.jpg',
  13                 plotBackgroundColor: {
  14                         linearGradient: [0, 0, 250, 500],
  15                         stops: [
  16                                 [0, 'rgba(255, 255, 255, 1)'],
  17                                 [1, 'rgba(255, 255, 255, 0)']
  18                         ]
  19                 },
  20                 plotBorderWidth: 1
  21         },
  22         title: {
  23                 style: {
  24                         color: '#3E576F',
  25                         font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
  26                 }
  27         },
  28         subtitle: {
  29                 style: {
  30                         color: '#6D869F',
  31                         font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
  32                 }
  33         },
  34         xAxis: {
  35                 gridLineWidth: 0,
  36                 lineColor: '#C0D0E0',
  37                 tickColor: '#C0D0E0',
  38                 labels: {
  39                         style: {
  40                                 color: '#666',
  41                                 fontWeight: 'bold'
  42                         }
  43                 },
  44                 title: {
  45                         style: {
  46                                 color: '#666',
  47                                 font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
  48                         }
  49                 }
  50         },
  51         yAxis: {
  52                 alternateGridColor: 'rgba(255, 255, 255, .5)',
  53                 lineColor: '#C0D0E0',
  54                 tickColor: '#C0D0E0',
  55                 tickWidth: 1,
  56                 labels: {
  57                         style: {
  58                                 color: '#666',
  59                                 fontWeight: 'bold'
  60                         }
  61                 },
  62                 title: {
  63                         style: {
  64                                 color: '#666',
  65                                 font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
  66                         }
  67                 }
  68         },
  69         legend: {
  70                 itemStyle: {
  71                         font: '9pt Trebuchet MS, Verdana, sans-serif',
  72                         color: '#3E576F'
  73                 },
  74                 itemHoverStyle: {
  75                         color: 'black'
  76                 },
  77                 itemHiddenStyle: {
  78                         color: 'silver'
  79                 }
  80         },
  81         labels: {
  82                 style: {
  83                         color: '#3E576F'
  84                 }
  85         }
  86 };
  87
  88 // Apply the theme
  89 var highchartsOptions = Highcharts.setOptions(Highcharts.theme);