Accepted answer

there is no configuration option to do this. the difficult way would be, as you say, to implement it your self with help of the renderer.

you can configure individual points with color and size:

data: [{
    x: 161.2, 
    y: 51.6,
    marker: {
        radius: 15,
        fillcolor: 'rgb(255, 0, 0)'

but the line that connects two markers do not have any individual settings.


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

        $(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].data = [];

        //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++) {
                .eq(3) //this could change depending on your series styling

        //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


        //prevent highcharts from reverting the line
        //thincknesses by constantly setting them 
        //to the values you want


Related Query

More Query from same tag