How to format column chart data labels

问题:

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.

回答1:

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://stackoverflow.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://stackoverflow.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.

回答2:

/* bar bg */
.highcharts-series-1 rect:nth-child(1) {
  fill: #333;
}

/* text color above bar */
.highcharts-series-1 g:nth-child(1) text {
  fill: red !important;
}

/* x axis text colors */
.highcharts-xaxis-labels text:nth-child(1) {
  fill: green !important;
}
.highcharts-xaxis-labels text:nth-child(2) {
  fill: blue !important;
}
.highcharts-xaxis-labels text:nth-child(3) {
  fill: black !important;
}
.highcharts-xaxis-labels text:nth-child(4) {
  fill: pink !important;
}

CODEPEN