Highcharts Demo

author(s): Torstein Hønsi

by supertrue

HTML

<link rel="stylesheet" href="http://code.highcharts.com/css/highcharts.css">
<script src="https://code.highcharts.com/js/highcharts.js"></script>
<!-- Highcharts original branch -->
<!-- <script src="https://code.highcharts.com/highcharts.js"></script> -->

<!-- Highcharts CSS styled mode -->
<!-- <script src="https://code.highcharts.com/js/highcharts.js"></script> 
 -->
<div id="container" style="height: 400px"></div>

<button class="highlight-series" highlight-series="one">Highlight series one</button>
<button class="highlight-series" highlight-series="two">Highlight series two</button>
<button class="reset-series">Reset series</button>

JavaScript

jQuery(function ($) {


	var chart = Highcharts.chart('container', {
    chart: { type: 'line' },
    series: [{
    		color: 'red',
        id: 'one',
        dataLabels: {enabled: true},
        data: [1, {y: 8, color: 'green'}, 3]
        
    }, {
    		
    		id: 'two',
        dataLabels: {enabled: true},
        data: [4, {y: 3, color: 'purple'}, 4]
    }]
});


$('.highlight-series').on('click', function(){
	console.log('clicked');
	chart.get('two').setState('hover');
});


$('.reset-series').on('click', function(){
	console.log('clicked');
  
	chart.get('one').setState();
  chart.get('two').setState();
});


});