JSFiddle - React, Tailwind, and code Playground

by longmatthewh

HTML

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

<div id="container"></div>

CSS

#container {
  min-width: 300px;
  max-width: 800px;
  height: 300px;
  margin: 1em auto;
}

JavaScript

/*
PROBLEM:
I'd like to add borders to my stacked columns, but as you can see using scenario1 config, the bottom column's bottom border is cut off.
*/

/* 
SCENARIO 1
With what's essentially the default setting—clipping, gridlines, and 0 offset—the bottom border of the bottom column is cut off.
*/
const scenario1 = [true, "#ccc", 0];

/* 
SCENARIO 2
This is what I've found to be most effective. However, as shown using scenario 3 below, adding gridlines looks odd.   
*/
const scenario2 = [true, "transparent", 2];

/* 
SCENARIO 3
This is the same as scenario2, but with visible gridlines. The bottom gridline looks odd..   
*/
const scenario3 = [false, "#ccc", 2];

/*
The following line lets you easily use the varios scenarios above.
*/
const [clip, gridLineColor, xAxisOffset] = scenario2;

const seriesConfig = {
  type: "column",
  clip: clip,
}

const seriesData = [{
  ...seriesConfig,
  data: [1, 4, 3, 5],
}, {
  ...seriesConfig,
  data: [2, 1, 5, 4],
}, {
  ...seriesConfig,
  data: [3, 2, 1, 2],
}];

const categories = ['Apples', 'Pears', 'Bananas', 'Oranges'];

Highcharts.chart('container', {
  chart: {
    spacingRight: 20,
  },
  xAxis: {
    categories: categories,
    offset: xAxisOffset,
  },
  yAxis: {
    gridLineColor: gridLineColor,
    stackLabels: {
      enabled: false,
    },
  },
  plotOptions: {
    column: {
      stacking: "normal",
      borderColor: "#000",
      borderWidth: 3,
      dataLabels: {
        enabled: true,
        useHTML: true,
        crop: false,
        allowOverlap: false,
      },
    },
    series: {
      stacking: "normal",
    },
  },
  series: seriesData,
  legend: {
    alignColumns: false,
    itemWidth: 0,
    itemMarginBottom: 22,
    symbolHeight: 16,
    symbolWidth: 16,
    symbolPadding: 9,
    symbolRadius: 0,
    itemStyle: {
      fontWeight: "normal",
    },
  },

});