# Rectangle Plot

``````var xScale = new Plottable.Scales.Category();
var yScale = new Plottable.Scales.Category();
var colorScale = new Plottable.Scales.InterpolatedColor();
colorScale.range(["#BDCEF0", "#5279C7"]);
var data = [
{ x: 1, y: 1, val: 2 }, { x: 1, y: 2, val: 1 }, { x: 1, y: 3, val: 3 },
{ x: 2, y: 1, val: 3 }, { x: 2, y: 2, val: 2 }, { x: 2, y: 3, val: 1 },
{ x: 3, y: 1, val: 1 }, { x: 3, y: 2, val: 3 }, { x: 3, y: 3, val: 2 }
]

var plot = new Plottable.Plots.Rectangle()
.x(function(d) { return d.x; }, xScale)
.y(function(d) { return d.y; }, yScale)
.attr("fill", function(d) { return d.val; }, colorScale)
.renderTo("svg#example");

plot.redraw();
});
``````

### Public Methods

• `.x2()`/`.x2(number|accessor)`/`.x2(number|accessor, scale)`

Gets/sets the value of x2 for the current plot. The first parameter can be a number or an `Accessor` function that returns a number. If the parameter `scale` is provided, results will be scaled.

If `x2` is set, the rectangle plot will assume that x values are treated as ranges from `x` to `x2`, as opposed as distinct items as described by `x`.

• `.y2()`/`.y2(number|accessor)`/`.y2(number|accessor, scale)`

Gets/sets the value of y2 for the current plot. The first parameter can be a number or an `Accessor` function that returns a number. If the parameter `scale` is provided, results will be scaled.

If `y2` is set, the rectangle plot will assume that y values are treated as ranges from `y` to `y2`, as opposed as distinct items as described by `y`.