CODEWITHSUNDEEP
highcharts
M. Fischer
M. Fischer

Reputation: 43

How to adjust the position of the first category name on the xAxis?

enter image description here

I'm attempting to create a fairly dense bar chart with plot bands on the yAxis. Is there a way to leave the plot band labels where they are but push the xAxis category labels/bars down so there is no overlap?

No luck adjusting pointPadding, pointWidth, or overall chart height.

Upvotes: 1

Views: 149

Answers (2)

ppotaczek
ppotaczek

Reputation: 39079

You can set a negative value in xAxis.min property and hide a the first label:

xAxis: {
    type: 'category',
    min: -1,
    showFirstLabel: false
}

Live demo: http://jsfiddle.net/BlackLabel/b3Lhvyue/

API Reference: https://api.highcharts.com/highcharts/xAxis.min

Upvotes: 3

Hugs
Hugs

Reputation: 543

I'm not sure that it's possible to pad the Axis ticks/labels/bars at a given end to achieve you desired result.

There is, however, a way to offset the position of the Plot Band labels so that they don't overlap the bars using yAxis.plotBands.label.y.

For example:

Highcharts.chart('container',   {
    chart: {
      type: 'bar'
    },
    title: {
      text: '10 Virtues'
    },
    xAxis: {
      categories: [
        'Virtue 1',
        'Virtue 2',
        'Virtue 3',
        'Virtue 4',
        'Virtue 5',
        'Virtue 6',
        'Virtue 7',
        'Virtue 8',
        'Virtue 9',
        'Virtue 10'
      ],
      title: {
        text: null
      }
    },
    yAxis: {
      min: 0,
      max: 100,
      tickInterval: 25,
      title: {
        text: 'Percentile Rank'
      },
      labels: {
        format: '{value}%'
      },
      plotBands: [
        {
          color: '#b2d3f9',
          from: 0,
          to: 25,
          label: {
            text: 'Below Average',
            align: 'center',
            y: -2
          }
        },
        {
          color: '#7aacff',
          from: 25,
          to: 75,
          label: {
            text: 'Average',
            align: 'center',
            y: -2
          }
        },
        {
          color: '#4f91ff',
          from: 75,
          to: 100,
          label: {
            text: 'Above Average',
            align: 'center',
            y: -2
          }
        }
      ]
    },
    tooltip: {
      valueSuffix: '%'
    },
    plotOptions: {
      bar: {
        dataLabels: {
          enabled: true
        }
      },
      series: {
        groupPadding: 0,
        shadow: false
      }
    },
    series: [
      {
        dataLabels: [
          {
            align: 'right',
            format: '{y}%'
          }
        ],
        data: [
          10,
          20,
          30,
          40,
          50,
          60,
          70,
          80,
          90,
          100
        ],
        color: '#aaaaaa',
        borderColor: '#555555',
        showInLegend: false
      }
    ]
  });
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

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

Upvotes: 0

Related Questions