Flot: Stacked bar labels overlapping / not showing

Question

Here's my JSFiddle.

The issue is that the stacked bars overlap / doesn't show all distinct labels stacked sometimes (see third bar in first chart).
Not sure but, the issue is maybe due to the fact that the series is not the same length and it doesn't contain 0 if no data for a label, like in the second example in the JSFiddle?

Q: How can I make the bar labels not overlap?

var newData = [];
  var newLabels = [];
  var newTicks = [];

  for (var i = 0; i < dataFromServer.length; i++) {
    var datapoint = dataFromServer[i];

    var tick = newTicks.indexOf(datapoint.name);
    if (tick == -1) {
      tick = newTicks.length;
      newTicks.push(datapoint.name);
    }

    var index = newLabels.indexOf(datapoint.label);
    if (index == -1) {
      index = newLabels.length;
      newLabels.push(datapoint.label);

      newDataPoint = {
        label: datapoint.label,
        data: []
      };
      newDataPoint.data[tick] = [tick, datapoint.countInbound];
      newData.push(newDataPoint);
    } else {
      newData[index].data[tick] = [tick, datapoint.countInbound];
    }
  }
  for (var i = 0; i < newTicks.length; i++) {
    newTicks[i] = [i, newTicks[i]];
  }
  newLabels = null;

  var newOptions = {
    xaxis: {
      ticks: newTicks
    },
    grid: {
      clickable: true,
      hoverable: true
    },
    series: {
      stack: true,
      bars: {
        show: true,
        align: 'center',
        barWidth: 0.5
      }
    }
  };
  $.plot($("#placeholder2"), newData, newOptions);

Knowitall

Answer 1

To determine where a stacked bar starts, Flot has to sum up the height of the bars below it. If there are empty bars below (with no height) the sum can not be calculated. This leads to later bars again starting at zero.

To counter this insert the missing bars with a height of zero:

for (var i = 0; i < newData.length; i++) {
    for (var j = 0; j < newTicks.length; j++) {
        if (newData[i].data[j] === undefined) {
            newData[i].data[j] = [j, 0];
        }
    }
}

See this updated fiddle.

Electroacoustics

thanks, I see that in case of a label with 0, it stills shows a trace/ border of that label, anyway to remove it completely? – Knowitall

You can set lineWidth: 0 for the bars which eliminates the bars with height zero (and vary the fill setting between 0.0 and 1.0 to change the appearance of the bars, if you so wish). See this fiddle. – Electroacoustics