jqPlot Fill to Zero Examples

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

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

The fillToZero series option will create a chart where lines or bars are filled down or up toward the zero axis line. The portion of the line below zero will be shaded darker than the portion above zero. These colors can be customized with the "negativeSeriesColors" option. Positive values are colored according to the "seriesColors" option.

line0 = [-4, -7, 9, 16, 3, 5, -2, 1, -6, -3, -2, 8];
      
plot1 = $.jqplot('chart1', [line0], {
  seriesDefaults: {
    fill:true, 
    fillToZero: true,
    showMarker: false
  },
  axes:{
    yaxis:{autoscale:true}
  }
});

The fillToZero option works with multiple series and can be selectively turned off on series.

line2 = [-1, -3, 6, 3];
line3 = [8, -5, -7, 16];
line4 = [12, 5, 8, 15];
      
plot3 = $.jqplot('chart2', [line2, line3, line4], {
  seriesDefaults: {
    fill:true, 
    fillToZero:true, 
    showMarker: false, 
    renderer:$.jqplot.BarRenderer
  },
  series:[
    {},
    {},
    {renderer:$.jqplot.LineRenderer, fill:false, fillToZero:false}
  ],    
  axes: {
    xaxis: {
      renderer:$.jqplot.CategoryAxisRenderer,
      ticks:[2006,2007,2008,2009], 
      tickOptions:{formatString:'%d'}
    }, 
    yaxis:{autoscale:true}
  }
});