Highcharts Demo

author(s): Torstein Hønsi

by Khajan Singh

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://highcharts.github.io/export-csv/export-csv.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>

CSS

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

caption {
	padding-bottom: 5px;
	font-family: 'Verdana';
	font-size: 14pt;
	font-weight: bold;
	color:#555555;
}

table {
	font-family: 'Verdana';
	font-size: 12pt;
	color:#555555;              
	border-collapse: collapse;
	border: 3px solid #CCCCCC;
	margin: 2px auto;	
}

tr {
  	border-bottom: 2px solid #EEEEEE;
}

th {
	border-left: 2px solid #EEEEEE;
	border-right: 2px solid #EEEEEE;
	padding: 12px 15px;
	border-collapse: collapse;
}

th[scope="col"] {
	background-color: #ffffee;
}

th[scope="row"] {
	background-color: #f0fcff;
	text-align:left;
}

td {
  	border-left: 2px solid #EEEEEE;
  	border-right: 2px solid #EEEEEE;
  	padding: 12px 15px;
  	border-collapse: collapse;
}

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'line',
    description: 'Most commonly used desktop screen readers from January 2009 to July 2015 as reported in the Webaim Survey. JAWS remains the most used screen reader, but is steadily declining. ZoomText and WindowEyes are both displaying large growth from 2014 to 2015.',
    renderTo: 'container',
    events: {
      load: function (e) {
        console.log("Load function called = ", this);
        initAxis(this);
      },
      resize: resizeChart,
      redraw: resizeChart
    },
    backgroundColor: "#ffffff",
    showAxes: true
  },
  legend: {
    align: "left",
    itemStyle: {
      fontSize: '14px',
      fontFamily: 'Avenir Next W10 Light',
      color: '#989898',
      lineHeight: '18px'
    },
    itemWidth: 240,
    labelFormatter: function() {
      var name = this.name.toUpperCase(),
          symbol;

      if ('Your Total'.toUpperCase() === name) {
        name = 'YOU';
        symbol = '<div class="legend-symbol"><div class="solid"></div></div>';
      }
      else {
        symbol = '<div class="legend-symbol"><div class="dash"></div><div class="dash"></div></div>';
      }

      return symbol + '<span class="legend-label-text">' + name + '</span>';
    },
  },
  title: {
    text: null
  },
  subtitle: {
    text: null
  },

  yAxis: {
    title: {
      text: "",
      rotation: -90,
      style: {
      	fontFamily: "Avenir Next W10 Light",
        color: "#676767",
        fontSize: "14px",
        fontWeight: "bold"
      }
    },
    minorGridLineWidth: 0,
    gridLineWidth: 0,
    lineWidth: 0,
    minPadding: 0,
    maxPadding: 0.5,
    maxPadding: 0.5,
    showFirstLabel: true,
    showLastLabel: true,
    offset: 0,
    labels: {
    	rotation: -90,
      formatter: function(){ return "&nbsp;"; },
      useHTML: true
    },
    events: {
      afterSetExtremes: function(e) {
        setYLabels(this, e.min, e.max, "minutes");
      }
    },
    alternateGridColor: null,
   ...