Answer to Stack Overflow question: http://stackoverflow.com/questions/38227679/how-to-format-column-chart-data-labels

author(s): Mike Zavarello

by Mike Zavarello

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="voo-accepted-orders-graph" style="height: 400px"></div>

JavaScript

$(function () {

  // the following code is derived from Mark's answer on:
  // http://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();
  }

  $('#voo-accepted-orders-graph').highcharts({
    chart: {
      type: 'column',
      backgroundColor: '#9a97de',
      minPadding: 0.08,
      maxPadding: 0.08,
      // events code from http://stackoverflow.com/questions/20242302/highchart-background-color-of-axis
      events: {
        load: function() {
          drawRect(this);
        },
        redraw: function(){
          drawRect(this);
        }
      }   
    },
    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:...