Highcharts example
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25,
events: {
load: function() {
this.renderer.image('https://www.highcharts.com/samples/graphics/sun.png', 70, 10, 28, 28)
.on('click', function() {
var axis = chart.yAxis[0];
axis.max = 25;
axis.isDirty = true;
chart.redraw();
}).css({
cursor: 'pointer'
}).css({
position: 'relative',
"margin-left": "-90px",
opacity: 0.75
}).attr({
zIndex: -100
}).add();
},
click: function(e) {
Highcharts.Chart({
yAxis: {
max: 22
}
})
}
}
},
title: {
text: 'Test Chart',
x: -20 //center
},
yAxis: {
title: {
text: 'some value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'}]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
...