[Solved]-Highcharts scatter plot with variable line width-Highcharts

there is a way to do this without using the renderer, however it is very much a hack.

the basic premise is that you can adjust the thickness of a line in highcharts after render time by manipulating the svg or vml attributes, and you can prevent highcharts from changing it back. therefore all you need to do is break up your series into two point series and chart them all at once. code below, fiddle can be seen here http://jsfiddle.net/39rl9/

        $(document).ready(function() {
        //define the data points
        data = [
        {x: 2,y: 4,thickness: 1},
        {x: 7,y: 8,thickness: 8},
        {x: 10,y: 10,thickness: 2},
        {x: 22,y: 2,thickness: 10},
        {x: 11,y: 20,thickness: 15},
        {x: 5,y: 15,thickness: 2}
        ]

        //format the data into two point series
        //and create an object that can be put 
        //directly into the "series" option
        var finalseries = [];
        for (var i=0; i < data.length-1; i++) {
            finalseries[i]={};
            finalseries[i].data = [];
            finalseries[i].data.push(data[i]);
            finalseries[i].data.push(data[i+1])
        };

        //a function to change the thickness of
        //the lines to the proper size
        function changelinethick(){
            var drawnseries = $(".highcharts-series")
            for (var i=0; i < drawnseries.length; i++) {
                drawnseries.eq(i)
                .children("path")
                .eq(3) //this could change depending on your series styling
                .attr("stroke-width",data[i].thickness)
            };
        }

        //define and render the highchart
        chart = new highcharts.chart({
            chart: {
                renderto: "chart-container",
                defaultseriestype: "scatter"
            },
            plotoptions: {
                scatter: {
                    linewidth: 2
                }
            },
            symbols: ["circle","circle","circle","circle","circle","circle"],
            series: finalseries
        })

        changelinethick();

        //prevent highcharts from reverting the line
        //thincknesses by constantly setting them 
        //to the values you want
        $("#chart-container").mousemove(function(){changelinethick()})


    })