Why my label are not at the same height

Question

My question is about a column chart i making.. I don't understand why my label are not set on the height.. I try many things but i really don't know.. Here you can find a example :jsfiddle project

    $(function() {
  var chart;
  $(document).ready(function() {
    chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        type: 'column',
        height: 200
      },
      title: {
        text: 'Monthly Average Rainfall'
      },
      xAxis: {
        offset: 0,
        labels: {
          useHTML: true,
          rotation: 0
        },
        tickmarkPlacement: 'on',
        gridLineWidth: 0,
        lineWidth: 0,
        tickPosition: 'outside'
      },
      yAxis: {
        gridLineWidth: 0,
        plotLines: [{
          color: '#DDDDDD',
          width: 1,
          value: 0
        }],
        max: 0.92,
        labels: {
          enabled: false
        },
        title: {
          text: ''
        }
      },
      credits: {
        enabled: false
      },
      tooltip: {
        enabled: false,
      },
      plotOptions: {
        column: {
          pointPadding: 0.2,
          borderWidth: 0,
          stacking: 'normal',
          dataLabels: {
            enabled: true,
            color: 'black',
            verticalAlign: 'top',
            useHTML: true,
            y: -20
          }
        },
      },
      series: [{
        showInLegend: false,
        negativeColor: '#F14646',
        color: '#00B76C',
        pointWidth: 40,
        data: [0.01, 0.03, 0.03, 0.05, 0.03, 0.10, 0.11, 0.11, 0.15, 0.92]
      }]
    })
  });

});

Thank you!!

Thernys · Accepted Answer · 2016-05-05T18:44:38.050

0

It seems that plotOptions.column.stacking = 'normal' and plotOptions.column.y: -20 are causing most of the trouble. So, firstly you should set plotOptions.column.y: 0 (or remove it). Secondly, you could do one of the following

remove plotOptions.column.stacking entirely if you do not actually need it
- some column labels may still be shown inside the bar instead of above, this is because there is not enough space above the column - one option is to set yAxis.max to a large enough value to guarantee space
if you do need stacking, use yAxis.stackLabels.enabled: true instead (and remove plotOptions.column.dataLabels if they interfere)

See the relevant Highcharts yAxis.stackLabels option documentation and their stacked column chart example.

edited May 05 '16 at 18:44

answered May 05 '16 at 17:53

Thernys

723
4
13

Yes this is what i means! Whre did you see this code? I didn't have it in my jsfiddle project or i'm totally blind ^^ – Soje May 05 '16 at 17:55
@Soje Looks like in your recent edit of the question you linked to an entirely different fiddle. Just check the one in your original question, and try removing the above code. – Thernys May 05 '16 at 17:57
if you check the new one which is better, i didn't have it anymore but the first value is still not in the same height.. Sry for the last link, i didn't use it very often.. – Soje May 05 '16 at 18:00

Why my label are not at the same height

1 Answers1