Overlapping and rounded stack in stacked column graph in Highcharts

Question

I am trying to achieve something like column 2014 but I haven't found a way to provide layering like this. This is a fiddle of what I have till now.

I need to make a stacked column graph that looks like either 2014 column or 2015 column.(which ever is feasible)

The problem with column 2014 is that I am not able to find any property to give (negative) margin to achieve the above result.
The problem with the column 2015 is that I am not able to add border radius to the top-left and top-right corners alone.

As links to fiddle must be accompanied by the code

Highcharts.chart('container', {
  chart: {
    type: 'column',
    spacingBottom: 0
  },
  title: {
    text: ''
  },
  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
    offset: 7,
    lineWidth: 0,
    tickLength: 0
  },
  yAxis: {
    min: 0,
    title: {
      text: ''
    },
    stackLabels: {
      enabled: false,
      style: {
        fontWeight: 'bold',
        color: 'gray'
      }
    },
    visible: false
  },
  legend: {
    align: 'center',

    verticalAlign: 'bottom',

  },
  tooltip: {
    headerFormat: '{point.x}
',
    pointFormat: '{series.name}: {point.y}
Total: {point.stackTotal}'
  },
  plotOptions: {
    series: {

    },
    column: {
      stacking: 'normal',
      borderWidth: 0,
      borderRadius: 5,
      dataLabels: {
        enabled: true,
        color: 'white'
      }
    }
  },
  series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2],

  }, {
    name: 'Jane',
    data: [2, 2, 3, 2, 1]
  }, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5]
  }]
});

user_8376046 · Answer

To achieve your a 2014 result, you can use a highchart wrapper, and change how the points are drawn, like this:

(function (H) {
  H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function (proceed) {
    $.each(this.points, function (i,point) {
      let borderRadius = this.options.borderRadius;
      point.shapeArgs.y -=  borderRadius; //move the point down by borderRadius pixels
      point.shapeArgs.height +=  borderRadius; //add borderRadius pixels to the total height of a point (to cover the gap)
    });
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  });
}(Highcharts));

    (function (H) {
      H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function (proceed) {
        let seriesIndex = this.index
        $.each(this.points, function (i,point) {
         point.shapeArgs.y -= seriesIndex == 0 ? 0 : 5; //if it is not the first series, then move the series down 5 pixels
            point.shapeArgs.height +=  5; //add 5 pixels to the total height(to cover the gap)
          });
          proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        });
    }(Highcharts));

Highcharts.chart('container', {
  chart: {
    type: 'column',
    spacingBottom: 0
  },
  title: {
    text: ''
  },
  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
    offset: 7,
    lineWidth: 0,
    tickLength: 0
  },
  yAxis: {
    min: 0,
    title: {
      text: ''
    },
    stackLabels: {
      enabled: false,
      style: {
        fontWeight: 'bold',
        color: 'gray'
      }
    },
    visible: false
  },
  legend: {
    align: 'center',

    verticalAlign: 'bottom',

  },
  tooltip: {
    headerFormat: '{point.x}
',
    pointFormat: '{series.name}: {point.y}
Total: {point.stackTotal}'
  },
  plotOptions: {
    series: {

    },
    column: {
      stacking: 'normal',
      borderWidth: 0,
      borderRadius: 5,
      dataLabels: {
        enabled: true,
        color: 'white'
      }
    }
  },
  series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2],

  }, {
    name: 'Jane',
    data: [2, 2, 3, 2, 1]
  }, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5]
  }]
});

Working JSFiddle: https://jsfiddle.net/ewolden/cyfv64ub/122/

If you wanted the 2015 result instead, you use the same function, like this:

(function(H) {
  H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function(proceed) {
    let seriesIndex = this.index,
      firstIndex = this.chart.series[0].index,
      lastIndex = this.chart.series[this.chart.series.length - 1].index,
      borderRadius = this.options.borderRadius;

    this.options.borderRadius = 0; //Remove the border radius

    $.each(this.points, function(i, point) {
      if (seriesIndex != firstIndex && seriesIndex != lastIndex) {
        point.shapeArgs.y -= borderRadius; //make sure the middle points cover the outer points
        point.shapeArgs.height += borderRadius*2; 
      }
    });

    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    $.each(this.points, function(i, point) {
      if (seriesIndex == firstIndex || seriesIndex == lastIndex) {
        point.graphic.attr({
          r: borderRadius //set the borer radius to be whatever it was before to only the outer points
        });
      }
    });
  });
}(Highcharts));

I set the zIndex on the series manually, but that can be done as well. Just don't have time right now to find where to set it.

(function(H) {
  H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function(proceed) {
    let seriesIndex = this.index,
      firstIndex = this.chart.series[0].index,
      lastIndex = this.chart.series[this.chart.series.length - 1].index,
      borderRadius = this.options.borderRadius;

    this.options.borderRadius = 0; //Remove the border radius

    $.each(this.points, function(i, point) {
      if (seriesIndex != firstIndex && seriesIndex != lastIndex) {
        point.shapeArgs.y -= borderRadius; //make sure the middle points cover the outer points
        point.shapeArgs.height += borderRadius*2; 
      }
    });

    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    $.each(this.points, function(i, point) {
      if (seriesIndex == firstIndex || seriesIndex == lastIndex) {
        point.graphic.attr({
          r: borderRadius //set the borer radius to be whatever it was before to only the outer points
        });
      }
    });
  });
}(Highcharts));

Highcharts.chart('container', {
  chart: {
    type: 'column',
    spacingBottom: 0
  },
  title: {
    text: ''
  },
  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
    offset: 7,
    lineWidth: 0,
    tickLength: 0
  },
  yAxis: {
    min: 0,
    title: {
      text: ''
    },
    stackLabels: {
      enabled: false,
      style: {
        fontWeight: 'bold',
        color: 'gray'
      }
    },
    visible: false
  },
  legend: {
    align: 'center',

    verticalAlign: 'bottom',

  },
  tooltip: {
    headerFormat: '{point.x}
',
    pointFormat: '{series.name}: {point.y}
Total: {point.stackTotal}'
  },
  plotOptions: {
    series: {

    },
    column: {
      stacking: 'normal',
      borderWidth: 0,
      borderRadius: 5,
      dataLabels: {
        enabled: true,
        color: 'white'
      }
    }
  },
  series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2],
    zIndex: 0
  }, {
    name: 'Jane',
    data: [2, 2, 3, 2, 1],
    zIndex: 1
  }, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5],
    zIndex: 0
  }]
});

Working JSFiddle: https://jsfiddle.net/ewolden/kqrLs3m8/

Do also note that I am manipulating the function drawPoints here, and as the docs state, it is only run once at the start. So if you start disabling/enabling series, then they will not necessarily look as you expect them to.

user_8618934 · Answer

To achieve a 2015 result you can use this rounded-corners.js plugin: https://rawgit.com/highcharts/rounded-corners/master/rounded-corners.js

series: [{
  data: [307, 231, 335, 203],
  borderRadiusTopLeft: '20px',
  borderRadiusTopRight: '20px'
}, {
  data: [183, 196, 547, 408]
}, {
  data: [414, 441, 514, 627],
  borderRadiusBottomLeft: '20px',
  borderRadiusBottomRight: '20px'
}]

jsFiddle: https://jsfiddle.net/BlackLabel/tdp1y0wb

Overlapping and rounded stack in stacked column graph in Highcharts

2 Answers