Skip to content

plot().dimensions() returns the chart's dimensions #1877

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions docs/features/plots.md
Original file line number Diff line number Diff line change
Expand Up @@ -317,3 +317,7 @@ const legend = plot.legend("color"); // render a color legend
```

Renders a standalone legend for the scale with the specified *name* (such as *x* or *color*) on the given *plot*, where *plot* is a rendered plot element returned by [plot](#plot), returning a SVG or HTML figure element. This element can then be inserted into the page as described in the [getting started guide](../getting-started.md). If the associated *plot* has no scale with the given *name*, returns undefined. Legends are currently only supported for *color*, *opacity*, and *symbol* scales.

## *plot*.dimensions() {#plot_dimensions}

Returns the dimensions of the chart, an object with the properties marginTop, marginRight, marginBottom, marginLeft, width and height set to their actual values.
12 changes: 12 additions & 0 deletions src/plot.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -421,6 +421,18 @@ export interface Plot {
*/
legend(name: ScaleName, options?: LegendOptions): SVGSVGElement | HTMLElement | undefined;

/**
* Returns the dimensions of the chart.
*/
dimensions(): {
marginTop: number;
marginRight: number;
marginBottom: number;
marginLeft: number;
width: number;
height: number;
};

/** For interactive plots, the current value. */
value?: any;
}
Expand Down
1 change: 1 addition & 0 deletions src/plot.js
Original file line number Diff line number Diff line change
Expand Up @@ -336,6 +336,7 @@ export function plot(options = {}) {

figure.scale = exposeScales(scales.scales);
figure.legend = exposeLegends(scaleDescriptors, context, options);
figure.dimensions = () => ({...dimensions});

const w = consumeWarnings();
if (w > 0) {
Expand Down
24 changes: 24 additions & 0 deletions test/plot-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,27 @@ it("plot({aspectRatio}) rejects unsupported scale types", () => {
assert.throws(() => Plot.dot([]).plot({aspectRatio: true, x: {type: "symlog"}}), /^Error: unsupported x scale for aspectRatio: symlog$/); // prettier-ignore
assert.throws(() => Plot.dot([]).plot({aspectRatio: true, y: {type: "symlog"}}), /^Error: unsupported y scale for aspectRatio: symlog$/); // prettier-ignore
});

it("plot({}).dimensions() returns the expected values", () => {
assert.deepStrictEqual(Plot.dot([]).plot().dimensions(), {
marginTop: 20,
marginRight: 20,
marginBottom: 30,
marginLeft: 40,
width: 640,
height: 400
});
assert.deepStrictEqual(
Plot.dot(["short"], {x: (d, i) => 1 + i, y: (d) => d})
.plot()
.dimensions(),
{
marginTop: 20,
marginRight: 20,
marginBottom: 30,
marginLeft: 40,
width: 640,
height: 80
}
);
});