javascripthighchartshistogramcolumn-chart

Highcharts Column Series: Centering categorized x-axis labels

I'm working on a histogram like column chart with React-JSX-Highcharts. I have 6 categories, 10 data points for 5 categories, and 30 data points for the 6 and final category. I'm trying to achieve having the tick marks start at each category, but have the category label, be centered inbetween the tick marks. I was able to achieve this by setting x-axis labels x: 150, however, I learned that is not responsive.

Here is what i'm looking to achieve: enter image description here

Curious to hear if I'm (A) taking the wrong approach, (B) Using the wrong series type (I tried histogram, but my bins are by category so the results were stacked columns), or (C) if i'm close and if anyone can find a solution to responsively center the labels. 

Highcharts.chart('container', {
    chart: {
    type: 'column'
},
xAxis: {
    categories: [
  "VERY LOW",
  "LOW",
  "MEDIUM",
  "HIGH",
  "VERY HIGH",
  "EXTREMELY HIGH"
],
tickInterval: 10,
startOnTick: true,
tickMarkPlacement: 'between',
type: 'category',
endOnTick: false,
showTempty: true,
},
series: [{
    data: [
  {x: 0, name: 'VERY LOW', y: 0.2},
  {x: 1, name: 'VERY LOW', y: 0.2},
  {x: 2, name: 'VERY LOW', y: 0.8},
  {x: 3, name: 'VERY LOW', y: 1},
  {x: 4, name: 'VERY LOW', y: 1.1},
  {x: 5, name: 'VERY LOW', y: 1.1},
  {x: 6, name: 'VERY LOW', y: 1.3},
  {x: 7, name: 'VERY LOW', y: 1.5},
  {x: 8, name: 'VERY LOW', y: 2},
  {x: 9, name: 'VERY LOW', y: 1.5},
  {y: 2.1, x: 10, name: 'LOW'},
  {y: 2.1, x: 11, name: 'LOW'},
  {y: 2.4, x: 12, name: 'LOW'},
  {y: 2.5, x: 13, name: 'LOW'},
  {y: 2.1, x: 14, name: 'LOW'},
  {y: 2.6, x: 15, name: 'LOW'},
  {y: 2.0, x: 16, name: 'LOW'},
  {y: 2.7, x: 17, name: 'LOW'},
  {y: 2.9, x: 18, name: 'LOW'},
  {y: 2.5, x: 19, name: 'LOW'},
  {y: 2.5, x: 20, name: 'MEDIUM'},
  {y: 3.3, x: 21, name: 'MEDIUM'},
  {y: 3.0, x: 22, name: 'MEDIUM'},
  {y: 2.9, x: 23, name: 'MEDIUM'},
  {y: 2.8, x: 24, name: 'MEDIUM'},
  {y: 2.6, x: 25, name: 'MEDIUM'},
  {y: 2.5, x: 26, name: 'MEDIUM'},
  {y: 2.1, x: 27, name: 'MEDIUM'},
  {y: 2.2, x: 28, name: 'MEDIUM'},
  {y: 2.2, x: 29, name: 'MEDIUM'},
  {y: 2.2, x: 29, name: 'MEDIUM'},
  {y: 2.0, x: 30, name: 'HIGH' },
  {y: 2.0, x: 31, name: 'HIGH' },
  {y: 1.5, x: 32, name: 'HIGH' },
  {y: 1.3, x: 33, name: 'HIGH' },
  {y: 1.2, x: 34, name: 'HIGH' },
  {y: 1.1, x: 35, name: 'HIGH' },
  {y: 1.1, x: 36, name: 'HIGH' },
  {y: 1.0, x: 37, name: 'HIGH' },
  {y: 0.9, x: 38, name: 'HIGH' },
  {y: 0.7, x: 39, name: 'HIGH' },
  {y: 3.1, x: 40, name: 'VERY HIGH'},
  {y: 0.3, x: 41, name: "VERY HIGH"},
  {y: 0.3, x: 42, name: "VERY HIGH"},
  {y: 0.1, x: 43, name: "VERY HIGH"},
  {y: 0.1, x: 44, name: "VERY HIGH"},
  {y: 0.1, x: 45, name: "VERY HIGH"},
  {y: 0, x: 46, name: "VERY HIGH"},
  {y: 0, x: 47, name: "VERY HIGH"},
  {y: 0, x: 48, name: "VERY HIGH"},
  {y: 0, x: 49, name: "VERY HIGH"},
  {y: 0.3, x: 50, name: "EXTREMELY HIGH"},
  {y: 0.3, x: 51, name: "EXTREMELY HIGH"},
  {y: 0.3, x: 52, name: "EXTREMELY HIGH"},
  {y: 0.1, x: 53, name: "EXTREMELY HIGH"},
  {y: 0.1, x: 54, name: "EXTREMELY HIGH"},
  {y: 0.1, x: 55, name: "EXTREMELY HIGH"},
  {y: 0, x: 56, name: "EXTREMELY HIGH"},
  {y: 0, x: 57, name: "EXTREMELY HIGH"},
  {y: 0, x: 58, name: "EXTREMELY HIGH"},
  {y: 0, x: 59, name: "EXTREMELY HIGH"},
  {y: 0, x: 60, name: "EXTREMELY HIGH"},
  {y: 0, x: 61, name: "EXTREMELY HIGH"},
  {y: 0, x: 62, name: "EXTREMELY HIGH"},
  {y: 0, x: 63, name: "EXTREMELY HIGH"},
  {y: 0, x: 64, name: "EXTREMELY HIGH"},
  {y: 0, x: 65, name: "EXTREMELY HIGH"},
  {y: 0, x: 66, name: "EXTREMELY HIGH"},
  {y: 0, x: 67, name: "EXTREMELY HIGH"},
  {y: 0, x: 68, name: "EXTREMELY HIGH"},
  {y: 0, x: 69, name: "EXTREMELY HIGH"},
]
}]

});

JSFiddle

Solution

  • One way to do this in a responsive manner by using jQuery resize events to detect when the size of the chart has changed, and update dynamically after that (don't forget to include jQuery if you use this solution). Like this:

    $(window).resize(function() {
  setTimeout(function() {
    chart.update({
      xAxis: {
        labels: {
          x: chart.xAxis[0].len / (chart.xAxis[0].tickPositions.length * 2)
        }
      }
    }, true)
  }, 100)
});

    I am using the same xAxis.labels.x value as you did, but I am calculating it dynamically.

    chart.xAxis[0].len - is the length of the xAxis in pixels.

    (chart.xAxis[0].tickPositions.length * 2) is the number of ticks on the xAxis, times 2 because we want to be in the center between two ticks, not at the tick marker.

    setTimeout is used because if we update the page right as the user is resizing, the position will not be correct. So we wait 0.1 seconds and then update instead.

    In addition to that, on the first render of the page, there is no resize event. So to take care of the resizing then, I used the highchart load event like this:

    chart: {
  type: 'column',
  events: {
    load: function() {
      this.update({
        xAxis: {
          labels: {
            x: this.xAxis[0].len / (this.xAxis[0].tickPositions.length * 2)
          }
        }
      }, true)
    }
  }
},

    The same update function, using this instead of chart because chart is not fully initialized yet. 

    var chart = Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      load: function() {
        //Position the labels for the initial rendering
        this.update({
          xAxis: {
            labels: {
              x: this.xAxis[0].len / (this.xAxis[0].tickPositions.length * 2)
            }
          }
        }, true)
      }
    }
  },
  xAxis: {
    categories: [
      "VERY LOW",
      "LOW",
      "MEDIUM",
      "HIGH",
      "VERY HIGH",
      "EXTREMELY HIGH"
    ],
    labels: {
      rotation: 0,

    },
    tickInterval: 10,
    startOnTick: true,
    tickMarkPlacement: 'between',
    type: 'category',
    endOnTick: false,
    showTempty: true,
  },
  series: [{
       data: [
      {x: 0, name: 'VERY LOW', y: 0.2},
      {x: 1, name: 'VERY LOW', y: 0.2},
      {x: 2, name: 'VERY LOW', y: 0.8},
      {x: 3, name: 'VERY LOW', y: 1},
      {x: 4, name: 'VERY LOW', y: 1.1},
      {x: 5, name: 'VERY LOW', y: 1.1},
      {x: 6, name: 'VERY LOW', y: 1.3},
      {x: 7, name: 'VERY LOW', y: 1.5},
      {x: 8, name: 'VERY LOW', y: 2},
      {x: 9, name: 'VERY LOW', y: 1.5},
      {y: 2.1, x: 10, name: 'LOW'},
      {y: 2.1, x: 11, name: 'LOW'},
      {y: 2.4, x: 12, name: 'LOW'},
      {y: 2.5, x: 13, name: 'LOW'},
      {y: 2.1, x: 14, name: 'LOW'},
      {y: 2.6, x: 15, name: 'LOW'},
      {y: 2.0, x: 16, name: 'LOW'},
      {y: 2.7, x: 17, name: 'LOW'},
      {y: 2.9, x: 18, name: 'LOW'},
      {y: 2.5, x: 19, name: 'LOW'},
      {y: 2.5, x: 20, name: 'MEDIUM'},
      {y: 3.3, x: 21, name: 'MEDIUM'},
      {y: 3.0, x: 22, name: 'MEDIUM'},
      {y: 2.9, x: 23, name: 'MEDIUM'},
      {y: 2.8, x: 24, name: 'MEDIUM'},
      {y: 2.6, x: 25, name: 'MEDIUM'},
      {y: 2.5, x: 26, name: 'MEDIUM'},
      {y: 2.1, x: 27, name: 'MEDIUM'},
      {y: 2.2, x: 28, name: 'MEDIUM'},
      {y: 2.2, x: 29, name: 'MEDIUM'},
      {y: 2.2, x: 29, name: 'MEDIUM'},
      {y: 2.0, x: 30, name: 'HIGH' },
      {y: 2.0, x: 31, name: 'HIGH' },
      {y: 1.5, x: 32, name: 'HIGH' },
      {y: 1.3, x: 33, name: 'HIGH' },
      {y: 1.2, x: 34, name: 'HIGH' },
      {y: 1.1, x: 35, name: 'HIGH' },
      {y: 1.1, x: 36, name: 'HIGH' },
      {y: 1.0, x: 37, name: 'HIGH' },
      {y: 0.9, x: 38, name: 'HIGH' },
      {y: 0.7, x: 39, name: 'HIGH' },
      {y: 3.1, x: 40, name: 'VERY HIGH'},
      {y: 0.3, x: 41, name: "VERY HIGH"},
      {y: 0.3, x: 42, name: "VERY HIGH"},
      {y: 0.1, x: 43, name: "VERY HIGH"},
      {y: 0.1, x: 44, name: "VERY HIGH"},
      {y: 0.1, x: 45, name: "VERY HIGH"},
      {y: 0, x: 46, name: "VERY HIGH"},
      {y: 0, x: 47, name: "VERY HIGH"},
      {y: 0, x: 48, name: "VERY HIGH"},
      {y: 0, x: 49, name: "VERY HIGH"},
      {y: 0.3, x: 50, name: "EXTREMELY HIGH"},
      {y: 0.3, x: 51, name: "EXTREMELY HIGH"},
      {y: 0.3, x: 52, name: "EXTREMELY HIGH"},
      {y: 0.1, x: 53, name: "EXTREMELY HIGH"},
      {y: 0.1, x: 54, name: "EXTREMELY HIGH"},
      {y: 0.1, x: 55, name: "EXTREMELY HIGH"},
      {y: 0, x: 56, name: "EXTREMELY HIGH"},
      {y: 0, x: 57, name: "EXTREMELY HIGH"},
      {y: 0, x: 58, name: "EXTREMELY HIGH"},
      {y: 0, x: 59, name: "EXTREMELY HIGH"},
      {y: 0, x: 60, name: "EXTREMELY HIGH"},
      {y: 0, x: 61, name: "EXTREMELY HIGH"},
      {y: 0, x: 62, name: "EXTREMELY HIGH"},
      {y: 0, x: 63, name: "EXTREMELY HIGH"},
      {y: 0, x: 64, name: "EXTREMELY HIGH"},
      {y: 0, x: 65, name: "EXTREMELY HIGH"},
      {y: 0, x: 66, name: "EXTREMELY HIGH"},
      {y: 0, x: 67, name: "EXTREMELY HIGH"},
      {y: 0, x: 68, name: "EXTREMELY HIGH"},
      {y: 0, x: 69, name: "EXTREMELY HIGH"},
    ]
  }]
});
$(window).resize(function() {
  setTimeout(function() {
    chart.update({
      xAxis: {
        labels: {
          x: chart.xAxis[0].len / (chart.xAxis[0].tickPositions.length * 2)
        }
      }
    }, true)
  }, 100)
});
    <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="container" style="height: 400px"></div>

    Working JSFiddle example: https://jsfiddle.net/ewolden/nLcveqp9/29/