CODEWITHSUNDEEP
javascripthighcharts
picus
picus

Reputation: 1537

Highlight Single Bar/Column in Highcharts on load

I have an existing highchart on which I need to highlight a single column.

It is a percentile graph that has been around for a while, I am still pretty new to high charts, but I have seen a similar question here on SO, this question, though deals with stacked bars and a click event...

The code makes sense to me in the example, but I guess I am missing something,

Here is my sample (trying to highlight the 24th column) https://jsfiddle.net/52t43y3k/2/

Here is the question I saw: Highlight one bar in a series in highcharts?

for ref, my code is 

var col_chart = $('#section-2-chart').highcharts({
            chart: {
                type: 'column'
            },
            tooltip: { enabled: false },
            credits:false,
            title: false,
            xAxis: {
                title:{text:'PERCENTILES'},
                type: 'Percentile',
                labels: {
                    enabled:true,
                    formatter: function() {
                        return this.value*2;
                    }
                }
            },
            yAxis: {
                min: 0,
                title:{text:'Total Image Weight'}
            },
            legend: {
                enabled: false
            },
            series: [{
                data: [169,12003,38308.5,61739.7,97069,131895.5,161086.7,198758.7,219779.3,243567.7,276607.7,296931.5,327457.5,362840.3,383978,410685.5,443774,467039.5,491654,517205,544754.7,578468.3,605392.5,644214.5,693765,766953.7,806616,855380.7,894161,942282,1001179.7,1062697.7,1125773.3,1186437,1236893.7,1314379.5,1378944,1454090.3,1553065,1689346,1833150,1957396,2077851.5,2228644.7,2390102,2725365.5,3147844.3,3607372,4239281.5,5190061,9422370.8],
                tooltip: {
                    pointFormat: '<b>{point.y:f} Bytes</b>'
                }
            }]
        });

    //TRIED THIS AND series.data[24] - essentially the 24th bar should be highlighted
        col_chart.series[0].data[24].update({color:'red'});

Upvotes: 1

Views: 1846

Answers (1)

mariocatch
mariocatch

Reputation: 8683

You need to access the highcharts off of your jquery object:

 col_chart.highcharts().series[0].data[24].update({
   color: 'red'
 });

For clarity

In your example, the following is true:

console.log(col_chart instanceof jQuery); // true

From the highcharts source:

/**
 * Register Highcharts as a plugin in jQuery
 */
if (win.jQuery) {
    win.jQuery.fn.highcharts = function () {
        var args = [].slice.call(arguments);

        if (this[0]) { // this[0] is the renderTo div

            // Create the chart
            if (args[0]) {
                new Highcharts[ // eslint-disable-line no-new
                    isString(args[0]) ? args.shift() : 'Chart' // Constructor defaults to Chart
                ](this[0], args[0], args[1]);
                return this;
            }

            // When called without parameters or with the return argument, return an existing chart
            return charts[attr(this[0], 'data-highcharts-chart')];
        }
    };
}

Meaning, highcharts() is a plugin for jQuery, so you can access it (assuming it's been attached to the dom element already, as in your case above) by calling highcharts off a jQuery selector instance.

Upvotes: 1

Related Questions