Stacked bar chart with sums of bar values on top.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.barRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<div id="chart">
</div>

CSS

#chart {
  width: 400px;
  height: 400px;
}

//jquery.jqplot.css

/*rules for the plot target div.  These will be cascaded down to all plot elements according to css rules*/

.jqplot-target {
  position: relative;
  color: #666666;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 1em;
  /*    height: 300px;
    width: 400px;*/
}


/*rules applied to all axes*/

.jqplot-axis {
  font-size: 0.75em;
}

.jqplot-xaxis {
  margin-top: 10px;
}

.jqplot-x2axis {
  margin-bottom: 10px;
}

.jqplot-yaxis {
  margin-right: 10px;
}

.jqplot-y2axis,
.jqplot-y3axis,
.jqplot-y4axis,
.jqplot-y5axis,
.jqplot-y6axis,
.jqplot-y7axis,
.jqplot-y8axis,
.jqplot-y9axis,
.jqplot-yMidAxis {
  margin-left: 10px;
  margin-right: 10px;
}


/*rules applied to all axis tick divs*/

.jqplot-axis-tick,
.jqplot-xaxis-tick,
.jqplot-yaxis-tick,
.jqplot-x2axis-tick,
.jqplot-y2axis-tick,
.jqplot-y3axis-tick,
.jqplot-y4axis-tick,
.jqplot-y5axis-tick,
.jqplot-y6axis-tick,
.jqplot-y7axis-tick,
.jqplot-y8axis-tick,
.jqplot-y9axis-tick,
.jqplot-yMidAxis-tick {
  position: absolute;
  white-space: pre;
}

.jqplot-xaxis-tick {
  top: 0px;
  /* initial position untill tick is drawn in proper place */
  left: 15px;
  /*    padding-top: 10px;*/
  vertical-align: top;
}

.jqplot-x2axis-tick {
  bottom: 0px;
  /* initial position untill tick is drawn in proper place */
  left: 15px;
  /*    padding-bottom: 10px;*/
  vertical-align: bottom;
}

.jqplot-yaxis-tick {
  right: 0px;
  /* initial position untill tick is drawn in proper place */
  top: 15px;
  /*    padding-right: 10px;*/
  text-align: right;
}

.jqplot-yaxis-tick.jqplot-breakTick {
  right: -20px;
  margin-right: 0px;
  padding: 1px 5px 1px 5px;
  /*    background-color: white;*/
  z-index: 2;
  font-size: 1.5em;
}

.jqplot-y2axis-tick,
.jqplot-y3axis-tick,
.jqplot-y4axis-tick,
.jqplot-y5axis-tick,
.jqplot-y6axis-tick,
.jqplot-y7axis-tick,
.jqplot-y8axis-tick,
.jqplot-y9axis-tick {
  left: 0px;
  /* initial position untill tick...

JavaScript

//Using custom jqplot.pointLabels.js as otherwise it was failing in the below place where we added 'if (this._barPoints[i])' inside the 'if (this.barDirection === "vertical")' 

(function($) {

  $.jqplot.PointLabels = function(options) {
    // Group: Properties
    //
    // prop: show
    // show the labels or not.
    this.show = $.jqplot.config.enablePlugins;
    // prop: location
    // compass location where to position the label around the point.
    // 'n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'
    this.location = 'n';
    // prop: labelsFromSeries
    // true to use labels within data point arrays.
    this.labelsFromSeries = false;
    // prop: seriesLabelIndex
    // array index for location of labels within data point arrays.
    // if null, will use the last element of the data point array.
    this.seriesLabelIndex = null;
    // prop: labels
    // array of arrays of labels, one array for each series.
    this.labels = [];
    // actual labels that will get displayed.
    // needed to preserve user specified labels in labels array.
    this._labels = [];
    // prop: stackedValue
    // true to display value as stacked in a stacked plot.
    // no effect if labels is specified.
    this.stackedValue = false;
    // prop: ypadding
    // vertical padding in pixels between point and label
    this.ypadding = 6;
    // prop: xpadding
    // horizontal padding in pixels between point and label
    this.xpadding = 6;
    // prop: escapeHTML
    // true to escape html entities in the labels.
    // If you want to include markup in the labels, set to false.
    this.escapeHTML = true;
    // prop: edgeTolerance
    // Number of pixels that the label must be away from an axis
    // boundary in order to be drawn.  Negative values will allow overlap
    // with the grid boundaries.
    this.edgeTolerance = -5;
    // prop: formatter
    // A class of a formatter for the tick text.  sprintf by default.
    this.formatter = $.jqplot.DefaultTickFormatter;
   ...