$(function() { var chart = new Highcharts.Chart({ colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'], chart: { renderTo: 'container', type: 'area' }, title: { text: 'JVM Heap Memory Usage Chart', style: { color: '#000', font: 'bold 16px "Trebuchet MS", Verdana, sans-serif' } }, subtitle: { text: 'Source: http://java-bytes.blogspot.com', style: { color: '#666666', font: 'bold 12px "Trebuchet MS", Verdana, sans-serif' } }, xAxis: { ridLineWidth: 1, lineColor: '#000', tickColor: '#000', categories: ['21:30:30', '21:30:35', '21:30:40', '21:30:45', '21:30:50', '21:30:55'], labels: { style: { color: '#000', font: '11px Trebuchet MS, Verdana, sans-serif' }, formatter: function() { return this.value; } }, title: { style: { color: '#333', fontWeight: 'bold', fontSize: '12px', fontFamily: 'Trebuchet MS, Verdana, sans-serif' } } }, yAxis: { minorTickInterval: 'auto', lineColor: '#000', lineWidth: 1, tickWidth: 1, tickColor: '#000', title: { style: { color: '#333', fontWeight: 'bold', fontSize: '12px', fontFamily: 'Trebuchet MS, Verdana, sans-serif' }, text: 'Heap Memory Usage' }, labels: { formatter: function() { return this.value + 'MB'; }, style: { color: '#000', font: '11px Trebuchet MS, Verdana, sans-serif' } } }, tooltip: { formatter: function() { return '' + this.x + ': ' + Highcharts.numberFormat(this.y, 0, ',') + ' MB'; } }, plotOptions: { area: { stacking: 'normal', lineColor: '#666666', lineWidth: 1, marker: { lineWidth: 1, lineColor: '#666666' } } }, legend: { itemStyle: { font: '9pt Trebuchet MS, Verdana, sans-serif', color: 'black' }, itemHoverStyle: { color: '#039' }, itemHiddenStyle: { color: 'gray' } }, labels: { style: { color: '#99b' } }, series: [{ name: 'Heap Size', data: [900, 900, 900, 900, 900, 900] }, { name: 'Used Heap Size', data: [324, 450, 550, 700, 750, 800] } ] }); });
<script src="http://code.highcharts.com/highcharts.js"></script> <div id="container" style="width: 100%; height: 300px"></div>