Misplaced first label in horizontal bar chart, visible mostly when chart height is small

[pkolaczk]

<div id="whatever" class="ct-chart"></div>
<script>
new Chartist.Bar('#whatever', {
        labels: [1, 2, 4, 8, 16, 32],
        series: [[40.38, 19.18, 9.85, 5.74, 4.155, 3.64]],
    }, {
        height: "7em",
        reverseData: true,        
        horizontalBars: true,
    });
</script>

Weirdly, it stops being visible when the chart height gets large.

[sebestenyb]

We experience the same, looking at the generated code, we can see that the height is actually set to 30 instead of 13.5 as the rest (for the word service for example)

[J0nKn1ght]

I think that the problem is in the axis.js file. The code is currently this (line 48 onwards):

      // TODO: Find better solution for solving this problem
      // Calculate how much space we have available for the label
      var labelLength;
      if(projectedValues[index + 1]) {
        // If we still have one label ahead, we can calculate the distance to the next tick / label
        labelLength = projectedValues[index + 1] - projectedValue;
      } else {
        // If we don't have a label ahead and we have only two labels in total, we just take the remaining distance to
        // on the whole axis length. We limit that to a minimum of 30 pixel, so that labels close to the border will
        // still be visible inside of the chart padding.
        labelLength = Math.max(this.axisLength - projectedValue, 30);
      }

As you can see, there's a hard-coded '30', which is causing an issue when the spacing is actually less that 30.

I think that it can be fixed by doing this (only tested on a sample of 1!):

      // TODO: Find better solution for solving this problem
      // Calculate how much space we have available for the label
      var labelLength;
      if(projectedValues[index + 1]) {
        // If we still have one label ahead, we can calculate the distance to the next tick / label
        labelLength = projectedValues[index + 1] - projectedValue;
      } else {
        // If we don't have a label ahead and we have only two labels in total, we just take the remaining distance to
        // on the whole axis length. We limit that to a minimum of 30 pixel, so that labels close to the border will
        // still be visible inside of the chart padding.
        labelLength = Math.max(this.axisLength - projectedValue, this.axisLength / this.ticks.length);
      }

This substitutes the hard-coded '30' with the calculated spacing.

I'm not a javascript developer, so don't really want to try and do a pull request, but if anyone is still actively contributing to this project, I'd be really grateful if they could test the above, and do another release if it fixes the problem.