Question

I have found the code below. I would like to have differents symbols for 1 serie in Highcharts with the threshold = 50. When the y value is smaller than 50 I would like green symbols and when y value is bigger than 50 I would like square symbols.

Thank you for your help!

http://jsfiddle.net/mhardik/YgxEB/1/

$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'scatter',
            zoomType: 'xy'
        },
        title: {
            text: 'Scatter Graph Demo'
        },
        xAxis: {
            title: {
                enabled: true,
                text: 'Height (cm)'
            },
            startOnTick: true,
            endOnTick: true,
            showLastLabel: true
        },
        yAxis: {
            title: {
                text: 'Weight (kg)'
            }
        },
        tooltip: {
            formatter: function() {
                    return ''+
                    this.x +' cm, '+ this.y +' kg';
            }
        },
        plotOptions: {
            scatter: {
                marker: {
                    radius: 3,
                    symbol:myFunction(),
                }
            }
        },
        series: [{
            name: 'Points',
            color: 'rgba(223, 83, 83, .5)',
            data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8,   53.6]]

        }]
    });
});

});

function myFunction() {
if(true){
    return 'url(http://www.lib.udel.edu/ud/ill/images/green_marker.gif)';
} else{
    return 'square';
}
}

Answer 1

If you reorganize your code a bit, you can start out with the data array and then preprocess it into object literals that hold a marker definition for each point:

data = $.map(data, function (point) {
    return {
        x: point[0],
        y: point[1],
        marker: {
            radius: 3,
            symbol: point[1] < 50 ?
                'url(http://www.lib.udel.edu/ud/ill/images/green_marker.gif)' :
                'square'
        }
    };
});

http://jsfiddle.net/highcharts/YgxEB/10/