With highcharts, is that possible to add dataLabels below column?

Question

I would like to put years below each columns. Is there there a way to do that ?

Here is my code :

var months = [],
        datas = [],
        estimeSapColor = "#009dc1", // Bleu - Estimation Fournisseur
        reelGrdfColor = "#d8662c", // Orange - Relève Distributeur
        colors = [],
        arr1 = [],
        arr2 = [],
        left = null,
        right = null
    ;

    for (var i = 0; i < data.G.length; i++) {
        if (!data.G.hasOwnProperty(i)) {
            continue;
        }
        left = parseInt(data.G[i].consoSimple, 10);
        right = null;
        for (var j = 0; j < data.G.length; j++) {
            if (!data.G.hasOwnProperty(j)) {
                continue;
            }
            if (data.G[i].numMonth == data.G[j].numMonth && parseInt(data.G[i].year) == parseInt(data.G[j].year) - 1) {
                right = parseInt(data.G[j].consoSimple, 10);
                break;
            }
        }
        arr1.push(left);
        arr2.push(right);

    }

    $.each(data.G, function(index, val) {

        months.push(data.G[index].month);

        datas.push(parseInt(data.G[index].consoSimple));

        if (data.G[index].typeReleve == "estimeSap") {
            colors.push(estimeSapColor);
        } else {
            colors.push(reelGrdfColor);
        }
    });

And after that, is that possible to have the years inside the tooltips ?

Thanks a lot in advance.

Answer 1

Not by configuration object but you can add them programmatically with Renderer. To format a tooltip, you need to use tooltip.pointFormat/formatter/etc.

Function for rendering labels:

function renderBottomLabels() {
  this.series.forEach(series => {
    series.data.forEach(point => {
      let bottomLabel = point.bottomLabel;
      const shapeArgs = point.shapeArgs,
        series = point.series,
        {
          translateX: tx,
          translateY: ty
        } = series.getPlotBox();

      if (!bottomLabel) {
        point.bottomLabel = bottomLabel = this.renderer.text(point.series.options.year, -9999, 0)
          .css({
            fontSize: '11px',
            fontWeight: 'bold'
          })
          .attr({
            zIndex: 10,
            align: 'center'
          })
          .add();
      }
      bottomLabel.attr({
        x: shapeArgs.x + shapeArgs.width / 2 + tx,
        y: shapeArgs.y + shapeArgs.height + ty + bottomLabel.getBBox().height,
      });
    });
  });
}

Attach rendering labels on load/redraw

  chart: {
    type: 'column',
    events: {
      load: renderBottomLabels,
      redraw: renderBottomLabels
    }
  },

Live example and output

http://jsfiddle.net/h47qgb6r/