CODEWITHSUNDEEP
javascripthighcharts
Blake
Blake

Reputation: 374

Highcharts not showing all labels for rows

Highcharts is not showing all the labels for all rows of data. The actual data is there via the chart but you only see the line in the bar chart... not the label for the data. In my case every other line does not have a label.

I found a case on here where they set the padding on dataLabel. I tried that and it did not work for me.

dataLabels: {
     enabled: true,
     padding: 0
}

If I increase the height of the chart itself (mine was 425):

chart: {
    height: 925,
    type: 'bar',
    fontSize: 8

This works and I can see all labels but I now have a scroll bar that the users do not like. In the Highcharts docs it looks like you might be able to set a fontsize. I have tried that and it didnt appear to do anything (see above under chart).

Maybe Highcharts is only showing the amount it can fit in the size box we have and it automatically removes the labels because they dont fit. If thats the case I guess I can just live with it. However, I couldnt seem to find this info on their website. Maybe someone on here knows what is supposed to happen? Im very new to Highcharts as it was already in the app I inherited.

Here is a jsfiddle with my same problem: http://jsfiddle.net/fjz9nb21/1/ This was from Labels on bar chart missing They never found a solution either. Looks like the recommended answer was to increase the height of the chart in order to show the labels. This wasnt what my users wanted, but it appears that might be the only solution with highcharts.

Upvotes: 0

Views: 3532

Answers (1)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

If there is not enough space Highcharts plots only selected labels to make the chart readable. Check the example posted below, where I decrease the labels font-size.

Code:

  var chart = new Highcharts.Chart({
    chart: {
      renderTo: "chartContainer",
      defaultSeriesType: 'bar',
      height: 600
    },
    title: {
      text: '18 York Street Consumption (RankIt)',
      style: {
        color: '#484a4a',
        fontSize: '22px',
        fontFamily: 'Arial, Helvetica, sans-serif',
        fontWeight: 'bold'
      }
    },
    subtitle: {
      text: 'Saturday, August 15 2015 through Sunday, August 16 2015'
    },
    credits: {
      enabled: false
    },
    yAxis: {
      allowDecimals: false,
      title: {
        text: "Test",
        style: {
          color: '#0063A2',
          fontFamily: 'Arial, Helvetica, sans-serif',
          fontWeight: 'bold'
        }
      },
      plotLines: [{
        color: 'red', // Color value                            
        value: null, // Value of where the line will appear
        width: 2 // Width of the line    
      }],
      min: 0
    },
    xAxis: [{
    	labels: {
      	padding: 0,
				style: {
        	fontSize: '6px'
        }
      },
      categories: ['9th Floor Total kWh', '9th Floor', '8th Floor Lighting Total kWh', '8th Floor', '7th Floor Lighting Total kWh', '7th Floor', '6th Floor Total kWh', '5th Floor Total kWh', '5th Floor', '4th Floor Total kWh', '4th Floor', '3rd Floor Total kWh', '3rd Floor', '26th Floor Total kWh', '26th Floor', '25th Floor Total kWh', '25th Floor', '24th Floor Total kWh', '24th Floor', '23rd Floor Total kWh', '23rd Floor', '22nd Floor Total kWh', '22nd Floor', '21st Floor Total kWh', '21st Floor', '20th Floor Total kWh', '20th Floor', '19th Floor Total kWh', '19th Floor', '18th Floor Total kWh', '18th Floor', '17th Floor Total kWh', '17th Floor', '16th Floor Total kWh', '16th Floor', '15th Floor Total kWh', '15th Floor', '14th Floor Total kWh', '14th Floor', '13th Floor Total kWh', '13th Floor', '12th Floor Total kWh', '12th Floor', '11th Floor Total kWh', '11th Floor', '10th Floor Total kWh', '10th Floor'],
      type: 'category',
      plotBands: [{
        color: '#DDECFF',
        from: 1439571600000,
        to: 1439744400000
      }],
      plotLines: [{
        color: 'grey', // Color value                            
        dashStyle: "dash",
        value: null, // Value of where the line will appear
        width: 0 // Width of the line    
      }],
    }],
    exporting: {
      enabled: false
    },
    legend: {
      enabled: false
    },
    plotOptions: {
      series: {
        colorByPoint: true,
        dataLabels: {
          allowOverlap: true
        }
      },
      spline: {
        enableMouseTracking: true,
        animation: {
          duration: 1500
        },
        marker: {
          enabled: false,
          states: {
            hover: {
              enabled: true,
              symbol: 'circle',
              radius: 5,
              lineWidth: 1
            }
          }
        }
      }
    },
    tooltip: {
      yDecimals: 2,
      formatter: function() {
        return tooltipFormat(this.x, null, this.y, yAxisTitle);
      }
    },
    series: [{
      data: [157, 169, 159, 173, 194, 203, 178, 144, 155, 411, 421, 275, 288, 266, 400, 214, 225, 142, 158, 112, 124, 114, 130, 112, 127, 134, 150, 107, 124, 143, 158, 85, 103, 99, 123, 174, 191, 327, 365, 221, 237, 241, 255, 310, 370, 133, 145],
      dataLabels: {
        enabled: true,
        color: '#000',
        style: {
          fontSize: '10px',
          verticalAlign: 'middle'
        }
      }
    }]
  });
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="Profile336_Wrapper" class="GraphWrapper">
  <div id="chartContainer"></div>
</div>

Demo:

Upvotes: 3

Related Questions