Boxplot & Column

author(s): Torstein Hønsi

by Pranav Kulkarni

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px; margin: auto; min-width: 400px; max-width: 600px"></div>

JavaScript

Highcharts.Series.prototype.drawAdditionalLabels = function() {
  var series = this,
    seriesOptions = series.options,
    options = seriesOptions.additionalLabels,
    points = series.points,
    pointOptions,
    generalOptions,
    hasRendered = series.hasRendered || 0,
    str,
    dataLabelsGroup,
    defer = Highcharts.pick(options.defer, !!seriesOptions.animation),
    renderer = series.chart.renderer;
  if (options.enabled) {
    // Process default alignment of data labels for columns
    if (series.dlProcessOptions) {
      series.dlProcessOptions(options);
    }
    // Create a separate group for the data labels to avoid rotation
    dataLabelsGroup = series.plotGroup(
      'additionalLabelsGroup',
      'additional-labels',
      defer && !hasRendered ? 'hidden' : 'visible', // #5133
      options.zIndex || 6
    );
    if (defer) {
      dataLabelsGroup.attr({
        opacity: +hasRendered
      }); // #3300
      if (!hasRendered) {
        addEvent(series, 'afterAnimate', function() {
          if (series.visible) { // #2597, #3023, #3024
            dataLabelsGroup.show(true);
          }
          dataLabelsGroup[seriesOptions.animation ? 'animate' : 'attr']({
            opacity: 1
          }, {
            duration: 200
          });
        });
      }
    }
    // Make the labels for each point
    generalOptions = Highcharts.merge(seriesOptions.dataLabels, options);
    Highcharts.each(points, function(point) {
      var enabled,
        additionalLabel = point.additionalLabel,
        labelConfig,
        attr,
        rotation,
        connector = point.connector,
        isNew = !additionalLabel,
        style;
      // Determine if each data label is enabled
      // @note dataLabelAttribs (like pointAttribs) would eradicate
      // the need for dlOptions, and simplify the section below.
      pointOptions = point.dlOptions || (point.options && point.options.additionalLabels); // dlOptions is used in treemaps
      enabled =...