how to use different colour for some specific column in my high chart?

Question

I have my highchart below

what I want is to colour those columns with some different colour which are having the value exactly 8.00

here is my code

 $(document).ready(function () { });
angular.module('myModule', []).service("AttendanceService", function ($http) {
    this.getdata = function () {
        return $http({
            method: "post",
            url: "GetAttendanceReport",
            params: [{ EmpID: $("#nameofEmp").val(), YearID: $("#YearIn").val() }],
            dataType: "json"
        });
    };
}).controller('myController', function ($scope,AttendanceService) {
  GetAlldata();
    function GetAlldata() {
        var getAttendanceData = AttendanceService.getdata();
        getAttendanceData.then(function (Attendances) {
            Highcharts.chart('container', {
               chart: {
                      type: 'column',
                      events: {
                          drilldown: function () {

                              this.yAxis[0].addPlotLine({
                                  id: 'p1',
                                  value: 8,
                                  color: '#ff0000',
                                  width: 2,
                                  zIndex: 4,
                                  label: {
                                      text: 'goal'
                                  }
                              })
                          },
                          drillup: function () {
                              this.yAxis[0].removePlotLine('p1');
                          }
                      },
                  }
                title: {
                    text: 'Attendance Report' + ' ' + $("#YearIn option:selected").text()
                },
                xAxis: {
                    type: 'category'
                },
                 yAxis: {
                        title: {
                            text: 'Total Attendance Recorded',
                            plotLines: [{
                                id: 'p1',
                                value: 8,
                                color: '#ff0000',
                                width: 2,
                                zIndex: 4,
                                label: {
                                    text: 'goal'
                                }
                            }]
                        },

                    }
                legend: {
                    enabled: false
                },
                plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                            format: '{point.y:.2f}'
                        }
                    }
                },

                tooltip: {
                    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}mins</b> of total<br/>'
                },

                series: [{
                    name: 'Attendance',
                    colorByPoint: true,
                    data: [{
                        name: 'Jan',
                        y: Attendances.data.YearlyReport[0],
                        drilldown: 'Jan'
                    }, {
                        name: 'Feb',
                        y: Attendances.data.YearlyReport[1],
                        drilldown: 'Feb'
                    }, {
                        name: 'March',
                        y: Attendances.data.YearlyReport[2],
                        drilldown: 'March'
                    }, {
                        name: 'April',
                        y: Attendances.data.YearlyReport[3],
                        drilldown: 'April'
                    }, {
                        name: 'May',
                        y: Attendances.data.YearlyReport[4],
                        drilldown: 'May'
                    }, {
                        name: 'June',
                        y: Attendances.data.YearlyReport[5],
                        drilldown: 'June'
                    }, {
                        name: 'July',
                        y: Attendances.data.YearlyReport[6],
                        drilldown: 'July'
                    }, {
                        name: 'Aug',
                        y: Attendances.data.YearlyReport[7],
                        drilldown: 'Aug'
                    }, {
                        name: 'Sep',
                        y: Attendances.data.YearlyReport[8],
                        drilldown: 'Sep'
                    }, {
                        name: 'Oct',
                        y: Attendances.data.YearlyReport[9],
                        drilldown: 'Oct'
                    }, {
                        name: 'Nov',
                        y: Attendances.data.YearlyReport[10],
                        drilldown: 'Nov'
                    }, {
                        name: 'Dec',
                        y: Attendances.data.YearlyReport[11],
                        drilldown: 'Dec'
                    }]
                }],
                drilldown: {
                    series: 
                        [{
                        name: 'Jan',
                        id: 'Jan',
                        data: [
                            [
                                '1',
                                parseFloat(Attendances.data.MonthlyReport[1 * 33 + 1])

                            ],
                            [
                                '2',
                                  parseFloat(Attendances.data.MonthlyReport[1 * 33 + 2])
                            ],
                            [
                                '3',
                                  parseFloat(Attendances.data.MonthlyReport[1 * 33 + 3])
                            ],
                            [
                                '4',
                                  parseFloat(Attendances.data.MonthlyReport[1 * 33 + 4])
                            ],
                            [
                                '5',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 5])
                            ],
                            [
                                '6',
                                  parseFloat(Attendances.data.MonthlyReport[1 * 33 + 6])
                            ],
                            [
                                '7',
                                  parseFloat(Attendances.data.MonthlyReport[1 * 33 + 7])
                            ],
                            [
                                '8',
                               parseFloat(Attendances.data.MonthlyReport[1 * 33 + 8])
                            ],
                            [
                                '9',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 9])
                            ],
                            [
                                '10',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 10])
                            ],
                            [
                                '11',
                                  parseFloat(Attendances.data.MonthlyReport[1 * 33 + 11])
                            ],
                            [
                                '12',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 12])
                            ],
                            [
                                '13',
                                  parseFloat(Attendances.data.MonthlyReport[1 * 33 + 13])
                            ],
                            [
                                '14',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 14])
                            ],
                            [
                                '15',
                                  parseFloat(Attendances.data.MonthlyReport[1 * 33 + 15])
                            ],
                            [
                                '16',
                                parseFloat(Attendances.data.MonthlyReport[1 * 33 + 16])
                            ],
                            [
                                '17',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 17])
                            ],
                            [
                                '18',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 18])
                            ],
                            [
                                '19',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 19])
                            ],
                            [
                                '20',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 20])
                            ],
                            [
                                '21',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 21])
                            ],
                            [
                                '22',
                                  parseFloat(Attendances.data.MonthlyReport[1 * 33 + 22])
                            ],
                            [
                                '23',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 23])
                            ],
                            [
                                '24',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 24])
                            ],
                            [
                                '25',
                                  parseFloat(Attendances.data.MonthlyReport[1 * 33 + 25])
                            ],
                            [
                                '26',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 26])
                            ],
                            [
                                '27',
                                parseFloat(Attendances.data.MonthlyReport[1 * 33 + 27])
                            ],
                            [
                                '28',
                                parseFloat(Attendances.data.MonthlyReport[1 * 33 + 28])
                            ],
                            [
                                '29',
                                 parseFloat(Attendances.data.MonthlyReport[1 * 33 + 29])
                            ],
                             [
                                '30',
                                parseFloat(Attendances.data.MonthlyReport[1 * 33 + 30])
                             ],
                             [
                                '31',
                                     parseFloat(Attendances.data.MonthlyReport[1 * 33 + 31])
                             ]
                        ]},and so on]
                }
            });
        }, function () {
            alert('Error in getting records');
        });

    } $("#btnLoad").click(function (event) {
        GetAlldata();
    });
    $("#btnBack").click(function (event) {
        window.location.href = "homepage";
    });
});

I have used Column with drilldown highchart. Is there any way??

Answer 1

You can directly pass an attribute color the the datapoint of your series like this:

color: '#00ff00'

You then just need to cycle through your data and replace those point's color.

JsFiddle

Answer 2

You may find this question elsewhere on Stack Overflow helpful: Highcharts Change Bar Color Based on Value. Please refer to the accepted answer, which has code to iterate over the series and color them based on their value.