plottable.js bar graph rendering off the axis

I can't understand why such a basic bar graph goes off the page. The axis limits seem to take only the smallest value. Here's a js fiddle showing my problem and the code is pasted below as well.

http://jsfiddle.net/brennekamp/32hcs0pu/13/

var cityData = [{
    "x": 1,
    "y": "-0.8000000000",
    "label": "Pre-1990"
  }, {
    "x": 2,
    "y": "-1.5000000000",
    "label": "1990-2015"
  }];
  var regionData = [{
    "x": 5,
    "y": "-1.7000000000",
    "label": "Pre-1990"
  }, {
    "x": 6,
    "y": "-1.7000000000",
    "label": "1990-2015"
  }];

  var colorScale = new Plottable.Scales.Color();

  var yScale = new Plottable.Scales.Linear();
  var yAxis = new Plottable.Axes.Numeric(yScale, "left");

  var title = new Plottable.Components.TitleLabel("Title");

  var xScale_city = new Plottable.Scales.Category().domain(["Pre-1990", "1990-2015"]);
  var xAxis_city = new Plottable.Axes.Category(xScale_city, "bottom");
  var plot_city = new Plottable.Plots.Bar()
    .labelsEnabled(true)
    .animated(true)
    .addDataset(new Plottable.Dataset(cityData))
    .x(function(d) {
      return d.label;
    }, xScale_city)
    .y(function(d) {
      return d.y;
    }, yScale)
    .attr("fill", function(d) {
      return d.x % 2 == 1 ? "#0000FF" : "#FF0000";
    }, colorScale);
  var label_city = new Plottable.Components.AxisLabel("City", 0);

  var xScale_region = new Plottable.Scales.Category().domain(["Pre-1990", "1990-2015"]);
  var xAxis_region = new Plottable.Axes.Category(xScale_region, "bottom");
  var plot_region = new Plottable.Plots.Bar()
    .labelsEnabled(true)
    .animated(true)
    .addDataset(new Plottable.Dataset(regionData))
    .x(function(d) {
      return d.label;
    }, xScale_region)
    .y(function(d) {
      return d.y;
    }, yScale)
    .attr("fill", function(d) {
      return d.x % 2 == 1 ? "#0000FF" : "#FF0000";
    }, colorScale);
  var label_region = new Plottable.Components.AxisLabel("Region", 0);



  console.log(JSON.stringify(cityData));
  console.log(JSON.stringify(regionData));


  var chart = new Plottable.Components.Table([
    [title],
    [yAxis, plot_city, plot_region],
    [null, xAxis_city, xAxis_region],
    [null, label_city, label_region]
  ]);

  chart.renderTo("svg");

Solution

Your y-values need to be numeric, not strings.

  var cityData = [{
    "x": 1,
    "y": -0.8000000000,
    "label": "Pre-1990"
  }, {
    "x": 2,
    "y": -1.5000000000,
    "label": "1990-2015"
  }];
  var regionData = [{
    "x": 5,
    "y": -1.7000000000,
    "label": "Pre-1990"
  }, {
    "x": 6,
    "y": -1.7000000000,
    "label": "1990-2015"
  }];

  var colorScale = new Plottable.Scales.Color();

  var yScale = new Plottable.Scales.Linear();
  var yAxis = new Plottable.Axes.Numeric(yScale, "left");

  var title = new Plottable.Components.TitleLabel("Title");

  var xScale_city = new Plottable.Scales.Category().domain(["Pre-1990", "1990-2015"]);
  var xAxis_city = new Plottable.Axes.Category(xScale_city, "bottom");
  var plot_city = new Plottable.Plots.Bar()
    .labelsEnabled(true)
    .animated(true)
		.addDataset(new Plottable.Dataset(cityData))
    .x(function(d) {
      return d.label;
    }, xScale_city)
    .y(function(d) {
      return d.y;
    }, yScale)
    .attr("fill", function(d) {
      return d.x % 2 == 1 ? "#0000FF" : "#FF0000";
    }, colorScale);
  var label_city = new Plottable.Components.AxisLabel("City", 0);

  var xScale_region = new Plottable.Scales.Category().domain(["Pre-1990", "1990-2015"]);
  var xAxis_region = new Plottable.Axes.Category(xScale_region, "bottom");
  var plot_region = new Plottable.Plots.Bar()
    .labelsEnabled(true)
    .animated(true)
		.addDataset(new Plottable.Dataset(regionData))
    .x(function(d) {
      return d.label;
    }, xScale_region)
    .y(function(d) {
      return d.y;
    }, yScale)
    .attr("fill", function(d) {
      return d.x % 2 == 1 ? "#0000FF" : "#FF0000";
    }, colorScale);
  var label_region = new Plottable.Components.AxisLabel("Region", 0);



  console.log(JSON.stringify(cityData));
  console.log(JSON.stringify(regionData));


  var chart = new Plottable.Components.Table([
    [title],
    [yAxis, plot_city, plot_region],
    [null, xAxis_city, xAxis_region],
    [null, label_city, label_region]
  ]);

  chart.renderTo("svg");

<script type="text/javascript" src="http://dev.atlasofurbanexpansion.org/app/webroot/src/js/d3.min.js"></script>
<script type="text/javascript" src="http://dev.atlasofurbanexpansion.org/app/webroot/src/js/plottable.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://dev.atlasofurbanexpansion.org/app/webroot/dist/css/style.css">
<svg></svg>