Is is possible to change line color in highchart xy plot for specific y range only?

StackOverflow https://stackoverflow.com/questions/23658433

  •  22-07-2023
  •  | 
  •  

Вопрос

I wonder is it possible to change line color in highchart for specific y range using some kind of function, I really don't know how to achieve this, this is my idea, as a beginner I don't know how to write function to do this, function which I want to develop would like this

Added in fiddle have a look FIDDLE

function range(ystart,yend,ycolor,xpoint){

// I do not know how to achieve this,
// I am interested send y range as a argument suppose in current example
// y : 1 - 6 should be in red color and
// x = 36 should have marker in yellow color

// So I would like to call like this 
range(1,6,"#F90B0B",34)
}

This is actual code

$(function () {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        zoomType: 'xy',
        type : 'scatter',
        marginLeft: 50,
        marginBottom: 90
    },

    yAxis: {
        reversed: true,

    },
    plotOptions: {
        series: {
                  animation: {
                               duration: 2000
                             },
                  lineWidth: 2
                },
    },
    xAxis: {
        opposite: true  
    },
    series: [{
        name: 'Test Plot',
        data: [
            [28, 0],
            [29,1],
            [30, 3],
            [34, 4],
            [32,5],
            [28, 6],
            [24, 7],
            [19,8],
            [15, 9]
        ]
    }]
});

});

Thank in advance for all volunteers

Это было полезно?

Решение 2

At this moment is it not supported, only by two series, but in the nearest feature it should be available.

Другие советы

The easiest way would be to separate the data and create separate series (with different colors) for the different ranges. That would mean, of course, that you would have to create a custom legend.

Edit to your function:

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            zoomType: 'xy',
            type : 'scatter',
            marginLeft: 50,
            marginBottom: 90
        },

        yAxis: {
            reversed: true,

        },
        plotOptions: {
            series: {
                      animation: {
                                   duration: 2000
                                 },
                      lineWidth: 2
                    },
        },
        xAxis: {
            opposite: true  
        },
        series: [{
            name: 'Test Plot',
            data: [
                [28, 0],
                [29,1],
                [30, 3],
                [34, 4],
                [32,5],
                [28, 6]
            ],
            color: "#F90B0B"
        },
               {
            name: 'Test Plot2',
            data: [
                [28, 6],
                [24, 7],
                [19,8],
                [15, 9]
            ],
                   color: "#F909F9"
        }]
    });
});
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top