How to format column chart data labels

Question

How to Format column chart data labels as shown in the image, Need to format only the second bar.

The code i have tried shown below

[$('#voo-accepted-orders-graph').highcharts({
    chart: {
        type: 'column',
        backgroundColor: '#9a97de',
        minPadding: 0.08,
        maxPadding: 0.08,
    },
    title: {
        text: ''
    },
    legend: {
        enabled: false,
    },
    exporting: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    xAxis: {
        tickWidth: 0,
        gridLineWidth: 0,
        gridLineColor: "#5c6bc0",
        categories: \['accepted', 'auto-accept', 'sent to PO', 'transfers'\],
        labels: {
            style: {
                color: '#ffffff',
                fontFamily: "Avenir LT std light",
                fontSize: "12px",
                zIndex: 1000
            }

        }
    },
    yAxis: {
        allowDecimals: false,
        title: {
            text: ''
        },
        gridLineWidth: 0,
        labels: {
            enabled: false
        },
        min: 0,

        tickInterval: 20,

    },
    tooltip: {
        pointFormat: '{series.name} <b>{point.y:,.0f}</b><br/>'

    },
    plotOptions: {
        column: {
            color: '#8381cc',
            borderColor: '#8381cc',
        },
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                zIndex: 10,
                color: "#fff",                
                style: {
                    textShadow: false,
                    fontWeight: "normal",
                }

            }
        }
    },

    series: \[{
        name: 'orders',
        data: \[200, 72, 36, 15\]

    }, {
        name: 'price',
        data: \[90, 150, 120, 50\]

    }\]
});][1]

Also 1. Need to format only the second bar. 2. Is there any possibility to get the vertical lines.

Could you please add the image you mention back to your question? It will help those who read this page later better understand what you were trying to solve. Thank you! — Mike Zavarello

Mike Zavarello Mike Zavarello · Accepted Answer · 2016-07-06T18:31:07

July 8, 2016: I've updated this answer to address the original poster's follow-up question about adding a background behind the x-axis labels.

If you want to change labels for just one column of data, you simply add more attributes to a particular point in that series.

Using the code in your question, I changed the first point of the "price" series so that its label is both red and bold:

series: [{
    name: 'orders',
    data: [200, 72, 36, 15]

}, {
    name: 'price',
    data: [
        { // change the values for just this point
            y: 90, 
            dataLabels: { 
                color: 'red',
                style: {
                    fontWeight: 'bold'
                }
            } 
        },
        150, 120, 50]
}]

For your follow-up question on adding a background behind the x-axis labels, I referred to post Highchart: Background color of Axis. Here's the code I used:

First, before you define the chart options, I've added a function to draw a rectangle behind the x-axis labels.

  // the following code is derived from Mark's answer on:
  // https://stackguides.com/questions/20242302/highchart-background-color-of-axis
  // and using the setExtremes() function found in the Highcharts API documentation at:
  // http://api.highcharts.com/highcharts#Axis.getExtremes
  var rect = null;
  function drawRect(chart){
    if (rect){
      rect.element.remove();   
    }
    // this code draws a rectangle based on the chart's dimensions:
    // 1st attribute: left edge = 0
    // 2nd attribute: top edge = chart's height - (chart's bottom margin - 1) ... -1 to show axis baseline
    // 3rd attribute: width = chart's width
    // 4th attribute: height = chart's bottom margin
    // 5th attribute: corner radius = 0 ... no corners
    rect = chart.renderer.rect(0, chart.chartHeight - (chart.marginBottom-1), chart.chartWidth , chart.marginBottom, 0)
      .attr({
      'stroke-width': 0,
      stroke: '#888888',
      fill: '#888888',
      zIndex: 3
    })
      .add();
  }

Next, I set some events in your chart options:

chart: {
  type: 'column',
  backgroundColor: '#9a97de',
  minPadding: 0.08,
  maxPadding: 0.08,
  // events code from https://stackguides.com/questions/20242302/highchart-background-color-of-axis
  events: {
    load: function() {
      drawRect(this);
    },
    redraw: function(){
      drawRect(this);
    }
  }   
},

Here is the result:

You can find the working fiddle with this example here: http://jsfiddle.net/brightmatrix/0yLn5bky/

I hope this is helpful for you.

How to format column chart data labels

2 Answers

CODEPEN