Plottable.js line chart not display

Question

The chart is black as shown in the attached photo. This is a chrome extension. When I click on inspect on the popup, plottable/d3 elements are defined so it seems that plottable is being made available to the html

    function drawChart() {

    let xScale = new Plottable.Scales.Linear(),
        yScale = new Plottable.Scales.Linear(),
        xAxis = new Plottable.Axes.Numeric(xScale, "bottom"),
        yAxis = new Plottable.Axes.Numeric(yScale, "left"),
        plot: Plottable.Plots.Line<number> = new Plottable.Plots.Line();
    plot.x(d => d.x, xScale);
    plot.y(d => d.y, yScale);
    let data = [
        { "x": 0, "y": 1 },
        { "x": 1, "y": 2 },
        { "x": 2, "y": 4 },
        { "x": 3, "y": 8 }
    ],
        dataset: Plottable.Dataset = new Plottable.Dataset(data);
    plot.addDataset(dataset);

    let chart: Plottable.Components.Table = new Plottable.Components.Table([
        [yAxis, plot],
        [null, xAxis]
    ]);
    chart.renderTo("svg#VisitorChart");
}


$(document).ready(function() {
    drawChart();
});

Thanks 4castle for the comment that's a TypeScript feature where chart is now strongly typed — Jonathan Fishbein, May 19 '16 at 22:23
have you verified drawChart gets called? I use plottable in my extension fine (but not in content script thou) — Zig Mandel, May 20 '16 at 03:41
Please provide more details, like your `manifest.json` and how you included above js. — Haibara Ai, May 20 '16 at 03:42
Thanks for the comments. I was able to find the answer on the plottable gitter. I needed to include the plottable.css file — Jonathan Fishbein, May 21 '16 at 03:22

score 4 · Answer 1 · answered Feb 12 '20 at 09:45

4

The Plottable.css file seems to be missing.

Including the file could fix the problem.

answered Feb 12 '20 at 09:45

Romit

318
3
14

Plottable.js line chart not display

1 Answers1