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

#container:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

#container:-moz-full-screen {
  width: 100%;
  height: 100%;
}

#container:-ms-fullscreen {
  width: 100%;
  height: 100%;
}

#container:fullscreen {
  width: 100%;
  height: 100%;
}

/* #container {
  height: 210px;
} */

JavaScript

Highcharts.chart('container', {
  chart: {
    spacingTop: 20,
    height: 210
  },

  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);
        }
      }
    }
  }

});