Highcharts Demo

author(s): Torstein Hønsi

by Nhi Nguyen

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" class="chart"></div>

CSS

@import 'https://code.highcharts.com/css/highcharts.css';

.chart:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

.chart:-moz-full-screen {
  width: 100%;
  height: 100%;
}

.chart:-ms-fullscreen {
  width: 100%;
  height: 100%;
}

.chart:fullscreen {
  width: 100%;
  height: 100%;
}

.chart {
  height: 210px;
}

#container .highcharts-title { 
  font-size:16px;
}

.chart:-webkit-full-screen .highcharts-title {
   font-size: 100px;
}

.chart:-moz-full-screen .highcharts-title {
   font-size: 100px;
}

.chart:-ms-fullscreen .highcharts-title {
   font-size: 100px;
}

.chart:fullscreen .highcharts-title {
   font-size: 100px;
}
.chart .highcharts-axis { 
  font-size: 16px;
}

.chart:-webkit-full-screen .highcharts-axis {
   font-size: 100px;
}

.chart:-moz-full-screen .highcharts-axis {
   font-size: 100px;
}

.chart:-ms-fullscreen .highcharts-axis {
   font-size: 100px;
}

.chart:fullscreen .highcharts-axis {
   font-size: 100px;
}
.chart .highcharts-axis-labels { 
  font-size: 16px;
}

.chart:-webkit-full-screen .highcharts-axis-labels {
   font-size: 10p0x;
}

.chart:-moz-full-screen .highcharts-axis-labels {
   font-size: 100px;
}

.chart:-ms-fullscreen .highcharts-axis-labels {
   font-size: 100px;
}

.chart:fullscreen .highcharts-axis-labels {
   font-size: 100px;
}

.chart .highcharts-legend-item { 
  font-size: 16px;
}

.chart:-webkit-full-screen .highcharts-legend-item {
   font-size: 100px;
}

.chart:-moz-full-screen .highcharts-legend-item {
   font-size: 100px;
}

.chart:-ms-fullscreen .highcharts-legend-item {
   font-size: 100px;
}

.chart:fullscreen .highcharts-legend-item {
   font-size: 100px;
}
.chart .highcharts-tooltip text { 
  font-size: 16px;
}

.chart:-webkit-full-screen .highcharts-tooltip text {
   font-size: 100px;
}

.chart:-moz-full-screen .highcharts-tooltip text {
   font-size: 100px;
}

.chart:-ms-fullscreen .highcharts-tooltip text {
   font-size: 100px;
}

.chart:fullscreen .highcharts-tooltip text {
   font-size: 100px;
}

JavaScript

Highcharts.chart('container', {
  chart: {
    spacingTop: 20,
    styledMode: true
  },

  title: {
    text: 'Export button texts'
  },

  credits: {
    enabled: false
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ]
  },

  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0,
      135.6, 148.5, 216.4, 194.1, 95.6, 54.4
    ]
  }],

  navigation: {
    buttonOptions: {
      theme: {
        // Good old text links
        style: {
          color: '#039',
          textDecoration: 'underline'
        }
      }
    }
  },

  exporting: {
    buttons: {
      contextButton: {
        enabled: false
      },
      exportButton: {
        text: 'Download',
        // Use only the download related menu items from the default
        // context button
        menuItems: [
          'downloadPNG',
          'downloadJPEG',
          'downloadPDF',
          'downloadSVG'
        ]
      },
      printButton: {
        text: 'Print',
        onclick: function() {
          this.print();
        }
      },
      fullScreenButton: {
        text: 'Full screen',
        onclick: function() {
          this.fullscreen = new Highcharts.FullScreen(this.container);
        }
      }
    }
  }

});