Basic Chart Base

by koh_edwin

HTML

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

<div id="container" style="width:600px;height:400px;margin:1.5em 1em;"></div>
http://stackoverflow.com/questions/43520599/highcharts-line-chart-display-series-name-at-the-end-of-line-series

<script>
//  var d = new Date();
//  var pointStart = d.getTime();
//  //-------------------------------------------------------
//  //set a 'line' marker type for use in bullet charts 
//  Highcharts.Renderer.prototype.symbols.vline = function(x, y, width, height) {
//    return ['M', x, y + width / 2, 'L', x + height, y + width / 2];
//  };
//  Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) {
//    return ['M', x, y + height / 2, 'L', x + width, y + width / 2];
//  };
//  //-------------------------------------------------------
//  Highcharts.setOptions({
//    global: {
//      useUTC: false
//    },
//    colors: [
//      'rgba( 0,   154, 253, 0.9 )', //bright blue
//      'rgba( 253, 99,  0,   0.9 )', //bright orange
//      'rgba( 40,  40,  56,  0.9 )', //dark
//      'rgba( 253, 0,   154, 0.9 )', //bright pink
//      'rgba( 154, 253, 0,   0.9 )', //bright green
//      'rgba( 145, 44,  138, 0.9 )', //mid purple
//      'rgba( 45,  47,  238, 0.9 )', //mid blue
//      'rgba( 177, 69,  0,   0.9 )', //dark orange
//      'rgba( 140, 140, 156, 0.9 )', //mid
//      'rgba( 238, 46,  47,  0.9 )', //mid red
//      'rgba( 44,  145, 51,  0.9 )', //mid green
//      'rgba( 103, 16,  192, 0.9 )' //dark purple
//    ],
//    chart: {
//      alignTicks: false,
//      type: '',
//      margin: [60, 25, 100, 90],
//      //borderRadius:10,
//      //borderWidth:1,
//      //borderColor:'rgba(156,156,156,.25)',
//      //backgroundColor:'rgba(204,204,204,.25)',
//      //plotBackgroundColor:'rgba(255,255,255,1)',
//      style: {
//       ...

CSS

@import url(https://fonts.googleapis.com/css?family=Changa+One|Loved+by+the+King|Fredericka+the+Great|Droid+Serif:400,700,400italic|Abel|Oswald:400,300,700);
body {
  font-family: Abel, Calibri, Helvetica, sans-serif;
  font-size: 95%;
}

JavaScript

var d = new Date();
  var pointStart = d.getTime();
  //-------------------------------------------------------
  //set a 'line' marker type for use in bullet charts 
  Highcharts.Renderer.prototype.symbols.vline = function(x, y, width, height) {
    return ['M', x, y + width / 2, 'L', x + height, y + width / 2];
  };
  Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) {
    return ['M', x, y + height / 2, 'L', x + width, y + width / 2];
  };
  //-------------------------------------------------------
  Highcharts.setOptions({
    global: {
      useUTC: false
    },
    colors: [
      'rgba( 0,   154, 253, 0.9 )', //bright blue
      'rgba( 253, 99,  0,   0.9 )', //bright orange
      'rgba( 40,  40,  56,  0.9 )', //dark
      'rgba( 253, 0,   154, 0.9 )', //bright pink
      'rgba( 154, 253, 0,   0.9 )', //bright green
      'rgba( 145, 44,  138, 0.9 )', //mid purple
      'rgba( 45,  47,  238, 0.9 )', //mid blue
      'rgba( 177, 69,  0,   0.9 )', //dark orange
      'rgba( 140, 140, 156, 0.9 )', //mid
      'rgba( 238, 46,  47,  0.9 )', //mid red
      'rgba( 44,  145, 51,  0.9 )', //mid green
      'rgba( 103, 16,  192, 0.9 )' //dark purple
    ],
    chart: {
      alignTicks: false,
      type: '',
      margin: [60, 25, 100, 90],
      //borderRadius:10,
      //borderWidth:1,
      //borderColor:'rgba(156,156,156,.25)',
      //backgroundColor:'rgba(204,204,204,.25)',
      //plotBackgroundColor:'rgba(255,255,255,1)',
      style: {
        fontFamily: 'Abel,serif'
      },
     //events: {
     //  load: function() {
     //    this.credits.element.onclick = function() {
     //      window.open(
     //        'http://stackoverflow.com/users/1011544/jlbriggs?tab=profile'
     //      );
     //    }
     //  }
     //}
    },
    credits: {
      //text: 'http://stackoverflow.com/users/1011544/jlbriggs',
      //href: 'http://stackoverflow.com/users/1011544/jlbriggs?tab=profile'
    },
    title: {
      text: 'Test Chart...