jqPlot Data Point Label Examples

The plot(s) on this page use the following plugins:

<script type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script>

The pointLabels plugin places labels on the plot at the data point locations. Labeles can use the series data array or a separate labels array. If using the series data, the last value in the data point array is used as the label by default.

line1 = [14, 32, 41, 44, 40, 47, 53, 67];
plot1 = $.jqplot('chart1', [line1], {
    title: 'Chart with Point Labels', 
    seriesDefaults: {showMarker:false},
    axesDefaults:{pad:1.3}
});

Additional data can be added to the series and it will be used for labels. If additional data is provided, each data point must have a value for the label, even if it is "null".

line1 = [[-12, 7, null], [-3, 14, null], [2, -1, '(low)'], 
    [7, -1, '(low)'], [11, 11, null], [13, -1, '(low)']];
plot2 = $.jqplot('chart2', [line1], {
    title: 'Point Labels From Extra Series Data', 
    seriesDefaults: {
        showMarker:false, 
        pointLabels:{location:'s', ypadding:3}
    },
    axes:{yaxis:{pad: 1.3}}
});

Labels work with Bar charts as well. Here, the Labels have been supplied through the "labels" array on the "pointLabels" option to the series. Also, additional css styling has been provided to the labels.

#chart3 .jqplot-point-label {
  border: 1.5px solid #aaaaaa;
  padding: 1px 3px;
  background-color: #eeccdd;
}
line1 = [14, 32, 41, 44, 40];
plot3 = $.jqplot('chart3', [line1], {
    title: 'Bar Chart with Point Labels', 
    seriesDefaults: {renderer: $.jqplot.BarRenderer},
    series:[
        {pointLabels:{
            labels:['fourteen', 'thirty two', 'fourty one', 'fourty four', 'fourty']
        }}],
    axes: {
        xaxis:{renderer:$.jqplot.CategoryAxisRenderer},
        yaxis:{padMax:1.3}}
});

Point labels can be used on stacked bar charts. If no labels array is specified, they will use data from the chart. Values can be displayed individually for each series (stackedValue option is false, the default), or cumulative values for all series can be displayed (stackedValue option is true).

line1 = [14, 32, 41, 44, 40, 37, 29];
line2 = [7, 12, 15, 17, 20, 27, 39];
plot4 = $.jqplot('chart4', [line1, line2], {
    title: 'Stacked Bar Chart with Cumulative Point Labels', 
    stackSeries: true, 
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        rendererOptions:{barMargin: 25}, 
        pointLabels:{stackedValue: true}
    },
    axes: {
        xaxis:{renderer:$.jqplot.CategoryAxisRenderer},
        yaxis:{ticks:[0, 20, 40, 60, 80]}
    }
});

Data point labels have an "edgeTolerance" option. This options controls how close the data point label can be to an axis edge and still be drawn. The default of 0 allows labels to touch the axis. Positive values will increase the required distance between the axis and label, negative values will allow labels to overlap axes.

line1 = [14, 32, 41, 44, 40, 47, 53, 67];
plot5 = $.jqplot('chart5', [line1], {
    title: 'Chart with Point Labels', 
    seriesDefaults: {
      showMarker:false,
      pointLabels: {
        edgeTolerance: 5
      }},
    axes:{
      xaxis:{min:3}
    }
});