CODEWITHSUNDEEP
javascriptjqueryhighcharts
Echchama Nayak
Echchama Nayak

Reputation: 933

Conditional coloring of marker in box plot in highcharts

The following is the javascript for the a box plot as can be viewed in this fiddle.

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'boxplot'
        },

        title: {
            text: 'Highcharts Box Plot Example'
        },

        legend: {
            enabled: false
        },

        xAxis: {
            categories: ['1', '2', '3', '4', '5'],
            title: {
                text: 'Experiment No.'
            }
        },

        yAxis: {
            title: {
                text: 'Observations'
            },
            plotLines: [{
                value: 932,
                color: 'red',
                width: 1,
                label: {
                    text: 'Theoretical mean: 932',
                    align: 'center',
                    style: {
                        color: 'gray'
                    }
                }
            }]
        },

        series: [{
            name: 'Observations',
            data: [
                [760, 801, 848, 895, 965],
                [733, 853, 939, 980, 1080],
                [714, 762, 817, 870, 918],
                [724, 802, 806, 871, 950],
                [834, 836, 864, 882, 910]
            ],
            tooltip: {
                headerFormat: '<em>Experiment No {point.key}</em><br/>'
            }
        }, {
            name: 'Outlier',
            color: 'black',
            type: 'scatter',
            data: [ // x, y positions where 0 is the first category
                [0, 644],
                [4, 718],
                [4, 951],
                [4, 969]
            ],
            marker: {
                fillColor: 'red'
            },
            tooltip: {
                pointFormat: 'Observation: {point.y}'
            }
        }]
    });
});

My intention is to change the color of the the circular points on the basis where they are located. E.g: if the value of the outlier is greater than 700 I want it orange. Normally this can be done using a formatter option that is available for labels in certain formats of highcharts. Is there a way that I can do this?

Upvotes: 2

Views: 821

Answers (2)

morganfree
morganfree

Reputation: 12472

You could use zones property for this.

        zones: [{
            value: 700,
            color: 'orange'
        }, {
            color: 'white'
        }]

Demo: http://jsfiddle.net/m3x3Lwc9/

Upvotes: 2

Kacper Madej
Kacper Madej

Reputation: 7886

You could check your data before using it in Highcharts and add color value for each point if requirements are met. Example: http://jsfiddle.net/nshkf75s/

Relevant part of code:

    series: [{
        name: 'Observations',
        data: [
            [760, 801, 848, 895, 965],
            [733, 853, 939, 980, 1080, 'orange'],
            [714, 762, 817, 870, 918],
            [724, 802, 806, 871, 950],
            [834, 836, 864, 882, 910]
        ],
        keys: ['low','q1','median','q3','high','color'],
        ...

Upvotes: 3

Related Questions