Working example?

[timwis]

Hello, I'm just starting with plottable, and it looks like the docs may be for an older version (pre 3.0) as they all tell you to renderTo an svg element, which isn't allowed in 3.0+. Even after changing .renderTo to a div, I'm not able to get the basic examples to render. Were there other breaking changes that haven't been reflected in the docs?

Live demo: https://www.webpackbin.com/bins/-KzzziT39zq6i_8KelL4

import Plottable from 'plottable';

var data = [{ x: 1, y: 1 }, { x: 2, y: 3 }, { x: 3, y: 2 },
            { x: 4, y: 4 }, { x: 5, y: 3 }, { x: 6, y: 5 }];

var xScale = new Plottable.Scales.Linear();
var yScale = new Plottable.Scales.Linear();

var plot = new Plottable.Plots.Bar()
  .addDataset(new Plottable.Dataset(data))
  .x(function(d) { return d.x; }, xScale)
  .y(function(d) { return d.y; }, yScale)
  .animated(true)
  .renderTo("#example");

window.addEventListener("resize", function() {
  plot.redraw();
});

(copied directly from docs/bar-chart and changed renderTo to not be svg)

[jrussia]

In your example, add a width to the #example div, and it should render the graph.

[timwis]

@jrussia I've tried that to no avail. If you refresh the webpackbin you'll see it starts to render, but not correctly (shape-wise or colour). Do you have a working example with v3.0+?

[jrussia]

@timwis Yeah, sorry, I didn't look closely at your data. It does render, but it's not styled correctly because plottable.css isn't included.

I added <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/plottable@3.7.0/plottable.css"> to you example, and then it showed the entire chart.

[timwis]

@jrussia That did it. I was wondering if CSS was necessary to include or if it was injected by the JavaScript... is this documented anywhere on the website or github repo?