As Halvor Strand noted in his comment, one possible way to solve this question would be to have each of the chart points be a different distance from the center of the graph.

I chose to create a "dummy" line series to serve as the "lopsided" chart points, while making the real grid behind the lines invisible.

Here's the code for the "dummy" series:

      name: 'dummy series for category max/mins',
      dataLabels: {
        allowOverlap: true,
        enabled: true,
        formatter:function() {
      data: [
        { y: 90000, name: 'Sales', dataLabels: { align: 'center', y: -5 } }, 
        { y: 70000, name: 'Marketing', dataLabels: { align: 'left', x: 10, y: 15 } },
        { y: 85000, name: 'Development', dataLabels: { align: 'left', x: 10, y: 15 } },
        { y: 80000, name: 'Customer Support', dataLabels: { align: 'center', y: 30 } },
        { y: 95000, name: 'Information<br />Technology', dataLabels: { align: 'right', x: -10, y: 15 } },
        { y: 100000, name: 'Administration', dataLabels: { align: 'right', x: -10, y: 15 } }
      pointPlacement: 'on',
      showInLegend: false,
      enableMouseTracking: false,
      lineWidth: 2,
      lineColor: 'red',
      marker: { enabled: false }

What I did here is manually set the "max" values for each of the chart points and give them a name to match what would normally be shown in the x-axis categories.

The dataLabels attributes for all of the series return each data point's name attribute. Then, for each data point, there are unique dataLabels attributes to position the label.

To hide the gridlines and labels for the x- and y-axes, I added gridLineWidth: 0 and labels: { enabled: false } to each.

Here's how the result appears:

enter image description here

A working fiddle with this example can be found at

Related Query

More Query from same tag