tomsseisums · July 22, 2016 16:04 · mathewkwok · Sep 18, 2015 · andrewabogado · Jul 22, 2016
diff --git a/jsbin.upUFIbO.css b/jsbin.upUFIbO.css
 #chart
 {
    width: 90%;
    margin: 0 auto;
    min-height: 350px;
 }
diff --git a/jsbin.upUFIbO.html b/jsbin.upUFIbO.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta name="description" content="Chart from graphics reference." />
    <meta charset=utf-8 />
    <title>JS Bin</title>
  
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highcharts/3.0.2/highcharts.js"></script>
 </head>
 <body>
    <div id="chart"></div>
 </body>
 </html>
diff --git a/jsbin.upUFIbO.js b/jsbin.upUFIbO.js
 $(function() {  
    $('#chart').highcharts({
        chart : 
        {
            backgroundColor : 'transparent',
            borderRadius : 0,
            type : 'area',
          
            // We make both, the load event and redraw event to
            // extend point, area edges.
            events : 
            {
                load : edgeExtend,
                redraw : edgeExtend
            }
        },
        
        title :
        {
            // Setting titles text to null disables title altogether.
            text : null
        },
        
        tooltip :
        {
            crosshairs :
            {
                color : '#ccc',
                width : 1
            },
            valueSuffix : '%'
        },
        
        colors : ['#F99500'],
        
        credits : 
        {
            // Sorry.
            enabled : false
        },
        
        xAxis :
        {
            categories : ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
      
            startOnTick: true,
            endOnTick: true,
      
            lineWidth : 0,
            tickWidth : 0,
      
            offset : 20
        },
        
        yAxis :
        {
            title :
            {
                text : null
            },
      
            labels :
            {
                format : '{value}%',
                style :
                {
                    fontSize : '14px'
                }
            },
      
            startOnTick : false,
            endOnTick : false,
      
            tickInterval : 10,
      
            min : 0,
            max : 100,
      
            offset : 10
        },
        
        plotOptions :
        {
            area :
            {
                fillColor : 'rgba(237, 237, 237, .4)',
                lineWidth : 1
            }
        },
    
        legend :
        {
            enabled : false
        },
    
        series :
        [
            {
                name : 'CPU Usage',
                data : [30, 0, 60, 100, 99, 94, 25]
            }
        ]
    });
 });

 /**
 * Helper that extends area and lines to the left and right plot edges.
 *
 * Has to be invoked with .call(), giving Highchart as the this reference
 * and Highchart event as the second parameter.
 * 
 * @return void
 */
 var edgeExtend = function(e)
 {
    for (var l = this.series.length, i = 0; i< l; i++)
    {
        // Get current series.
        var series = this.series[i];
        
        // Get inner-chart box.
        var box = this.plotBox;
        
        // Take areas path.
        var areaPath = series.areaPath;
        
        // Add start point.
        // Right after the first element (M).
        areaPath.splice(1, 0, 0, areaPath[2], 'L');
        
        // Add Last points upper area end.
        // Remove penultimate point.
        // Replace it with a new point reaching to the width of chart and growing to the height of last element.
        // And add the bottom-right corner.
        areaPath.splice(-6, 3, 'L', box.width, areaPath[areaPath.length - 7], 'L', box.width, box.height);
        
        // Make the last points X be zero - that will result in bottom left corner.
        areaPath[areaPath.length - 2] = 0;
        
        // Replace value (redraw).
        series.area.element.attributes.d.value = areaPath.join(' ');
        
        var graphPath = series.graphPath;
        
        // Add start point.
        // Right after the first element (M).
        graphPath.splice(1, 0, 0, graphPath[2], 'L');
        
        // Add end point.
        graphPath.push('L', box.width, graphPath[graphPath.length - 1]);
        
        series.graph.element.attributes.d.value = graphPath.join(' ');
    }
 };
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Chart from graphics reference." />
	<meta charset=utf-8 />
	<title>JS Bin</title>

	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/highcharts/3.0.2/highcharts.js"></script>
	</head>
	<body>
	<div id="chart"></div>
	</body>
	</html>
	$(function() {
	$('#chart').highcharts({
	chart :
	{
	backgroundColor : 'transparent',
	borderRadius : 0,
	type : 'area',

	// We make both, the load event and redraw event to
	// extend point, area edges.
	events :
	{
	load : edgeExtend,
	redraw : edgeExtend
	}
	},

	title :
	{
	// Setting titles text to null disables title altogether.
	text : null
	},

	tooltip :
	{
	crosshairs :
	{
	color : '#ccc',
	width : 1
	},
	valueSuffix : '%'
	},

	colors : ['#F99500'],

	credits :
	{
	// Sorry.
	enabled : false
	},

	xAxis :
	{
	categories : ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],

	startOnTick: true,
	endOnTick: true,

	lineWidth : 0,
	tickWidth : 0,

	offset : 20
	},

	yAxis :
	{
	title :
	{
	text : null
	},

	labels :
	{
	format : '{value}%',
	style :
	{
	fontSize : '14px'
	}
	},

	startOnTick : false,
	endOnTick : false,

	tickInterval : 10,

	min : 0,
	max : 100,

	offset : 10
	},

	plotOptions :
	{
	area :
	{
	fillColor : 'rgba(237, 237, 237, .4)',
	lineWidth : 1
	}
	},

	legend :
	{
	enabled : false
	},

	series :
	[
	{
	name : 'CPU Usage',
	data : [30, 0, 60, 100, 99, 94, 25]
	}
	]
	});
	});

	/**
	* Helper that extends area and lines to the left and right plot edges.
	*
	* Has to be invoked with .call(), giving Highchart as the this reference
	* and Highchart event as the second parameter.
	*
	* @return void
	*/
	var edgeExtend = function(e)
	{
	for (var l = this.series.length, i = 0; i< l; i++)
	{
	// Get current series.
	var series = this.series[i];

	// Get inner-chart box.
	var box = this.plotBox;

	// Take areas path.
	var areaPath = series.areaPath;

	// Add start point.
	// Right after the first element (M).
	areaPath.splice(1, 0, 0, areaPath[2], 'L');

	// Add Last points upper area end.
	// Remove penultimate point.
	// Replace it with a new point reaching to the width of chart and growing to the height of last element.
	// And add the bottom-right corner.
	areaPath.splice(-6, 3, 'L', box.width, areaPath[areaPath.length - 7], 'L', box.width, box.height);

	// Make the last points X be zero - that will result in bottom left corner.
	areaPath[areaPath.length - 2] = 0;

	// Replace value (redraw).
	series.area.element.attributes.d.value = areaPath.join(' ');

	var graphPath = series.graphPath;

	// Add start point.
	// Right after the first element (M).
	graphPath.splice(1, 0, 0, graphPath[2], 'L');

	// Add end point.
	graphPath.push('L', box.width, graphPath[graphPath.length - 1]);

	series.graph.element.attributes.d.value = graphPath.join(' ');
	}
	};