How to select a path tag using jQuery

Question

I have made a Box Plot chart (Highcharts) , Here's my example:

https://jsfiddle.net/hew8nq5u/

My code is:

 Highcharts.chart('container', {

        chart: {
            type: 'boxplot'
        },

        title: {
            text: 'All Patients'
        },

        legend: {
            enabled: true
        },

        xAxis: {
            categories: ['Asia Pacific', 'Europe', 'Latin America', 'North America', 'SWAC'],
            title: {
                text: '      '
            }
        },

        yAxis: {
            title: {
                text: 'Annual Center Volume 2016'
            },
            tickInterval: 5,
            min: 0,
            max: 75
            //plotLines: [{
            //    value: 932,
            //    color: 'red',
            //    width: 1,
            //    label: {
            //        text: 'Theoretical mean: 932',
            //        align: 'center',
            //        style: {
            //            color: 'gray'
            //        }
            //    }
            //}]
        },
        //colors: ['#91e8e1', '#7cb5ec', '#434348', '#90ed7d', '#f7a35c',
        //         '#8085e9', '#f15c80', '#e4d354', '#2b908f', '#f45b5b', ], //updates default colors
        plotOptions: {
            boxplot: {
                fillColor: '#F0F0E0',
                lineWidth: 2,
                upperQuartileColor: 'green',
                lowerQuartileColor: 'green',
                medianColor: '#0C5DA5',
                medianWidth: 3,
                stemColor: '#A63400',
                stemDashStyle: 'solid',
                stemWidth: 1,
                whiskerColor: '#3D9200',
                whiskerLength: '20%',
                whiskerWidth: 3                 
            }
        },
        series: [{
            name: 'Region Runs',
            showInLegend: false,
            //colorByPoint: true,
            color: 'red',
            data: [
                [2, 4, 18, 43, 53],
                [5, 9, 16.5, 32, 52],
                [1, 3, 6, 11.5, 21],
                [3, 9, 20, 38, 73],
                [1, 2, 8, 16, 20]
            ],
            tooltip: {
                headerFormat: '<em>Experiment No {point.key}</em><br/>'
            }
        },
        {
            name: '75th Percentile',
            type: 'line', 
            color: 'red',
            marker: {
                symbol: 'square'
            },

        },
        {
            name: 'Median',
            type: 'line',
            color:'#0C5DA5',
            marker: {
                symbol: 'square'
            },

        },
        {
            name: '25th Percentile',
            type: 'line', 
            color: 'red',
            marker: {
                symbol: 'square'
            },

        },
        {
            name: '90th percentile',
            type: 'line',
            color: '#3D9200',
            marker: {
                symbol: 'square'
            },

        },{
            name: '10th percentile',
            type: 'line',
            color: '#3D9200',
            marker: {
                symbol: 'square'
            },

        }//,
        //{
        //    name: 'IQR',
        //    type: 'line',
        //    color: 'brown',
        //    marker: {
        //        symbol: 'square'
        //    },

        //},
        //{
        //    name: 'Outlier',
        //    color: Highcharts.getOptions().colors[0],
        //    type: 'scatter',
        //    data: [ // x, y positions where 0 is the first category
        //        [0, 128],
        //        [1, 161],
        //        [2, 58],
        //        [3, 204],
        //        [4,42]
        //    ],
        //    marker: {
        //        fillColor: 'white',
        //        lineWidth: 1,
        //        lineColor: Highcharts.getOptions().colors[0]
        //    },

        //    tooltip: {
        //        pointFormat: 'Observation: {point.y}'
        //    }


        //}
        ]

    });

I would like to have top of the box and bottom of the box in different colors, and also top of the whisker and bottom of the whisker in different colosr for each box (region). But all of the lines in the box are in the same color (red) and top and bottom of the whisker are in the same color (green).

I've found currently it's not possible in highcharts to have box bottom and top in different colors. Same with top and bottom whiskers. Because of that, I want to resolve the issue, by selecting the element "path" (its class) using jQuery and appending html in it to change the color in yellow. Something like this:

$(".highcharts-boxplot-whisker").append("<path fill='none' class='highcharts-boxplot-whisker' stroke='yellow' stroke-width='3' d='M 59.1 80.5 L 71.9 80.5'></path>");

But something is wrong with my selector, nothing happened. How can I do this? Thank you in advance for any help. The tag that I want to select

Answer 1

You can change borders using jQuery css() ! :)

 div { height: 100px; width: 100px; margin: 40px auto; background-color: pink; } 

 <div></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <script> $("div").css("border-top", "5px solid blue"); $("div").css("border-bottom", "5px solid red"); </script>