Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div><button id="markers">Toggle point markers</button>

JavaScript

$(function () {
     var marks = new Array("square",  "diamond", "triangle");
    Highcharts.setOptions({
        colors: ['red', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
        symbol:marks
    });
    
    
    
    $('#container').highcharts({
        chart: {
            type: 'line'
        },
        
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
    
        // Toggle point markers
    $('#markers').click(function() {
        var theChart = $('#container').highcharts();
        theChart.series[0].update({
            marker: {
                symbol: marks[2]
            }
        });
    });
});