Draws a chart view as a standalone SVG element of size CSS pixels.
Series colors read --sheetwrite-chart-1 to --sheetwrite-chart-8, and text
reads the grid theme variables, so the chart follows the host theme. The
function reads no cells and keeps no state.
Examples
Declaration
Referenced by
Workspace packages depending on @sheetwrite/charts
@sheetwrite/docs-startdependency
Public exports naming renderChartSvg
function renderChartSvg(view: ChartView, size: ChartSize, options?: ChartSvgOptions): SVGSVGElementfunction renderChartSvg(
view: ChartView,
size: ChartSize,
options?: ChartSvgOptions,
): SVGSVGElementfunction renderChartSvg(
view: ChartView,
size: ChartSize,
options?: ChartSvgOptions,
): SVGSVGElementDraws a chart view as a standalone SVG element of size CSS pixels. Series colors read --sheetwrite-chart-1 to --sheetwrite-chart-8, and text reads the grid theme variables, so the chart follows the host theme. The function reads no cells and keeps no state.Exampleimport { renderChartSvg, type ChartView } from "@sheetwrite/charts";
function showChart(host: HTMLElement, view: ChartView) {
host.replaceChildren(renderChartSvg(view, { width: 320, height: 200 }));
}API reference →interface ChartViewinterface ChartViewinterface ChartViewOne immutable-by-convention rendering input, refreshed on chart-change events.API reference →function showChart(host: HTMLElement, view: ChartView): voidfunction showChart(
host: HTMLElement,
view: ChartView,
): voidfunction showChart(
host: HTMLElement,
view: ChartView,
): voidAPI reference →interface HTMLElementinterface HTMLElementinterface HTMLElementThe HTMLElement interface represents any HTML element. MDN Referencehost: HTMLElementlet host: HTMLElementlet host: HTMLElementParentNode.replaceChildren(...nodes: (Node | string)[]): voidParentNode.replaceChildren(...nodes: (Node | string)[]): voidParentNode.replaceChildren(...nodes: (Node | string)[]): voidReplace all children of node with nodes, while replacing strings in nodes with equivalent Text nodes. Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated. MDN Referenceview: ChartViewlet view: ChartViewlet view: ChartViewAPI reference →ChartSize.width: numberinterface ChartSize {
width: number;
}interface ChartSize {
width: number;
}Unzoomed column width in CSS pixels.API reference →ChartSize.height: numberinterface ChartSize {
height: number;
}interface ChartSize {
height: number;
}Host height in CSS pixels for numbers or any CSS length string.API reference →interface ChartView {
chart: ChartDefinition;
series: ChartSeriesView[];
}interface ChartView {
chart: ChartDefinition;
series: ChartSeriesView[];
}interface ChartView {
chart: ChartDefinition;
series: ChartSeriesView[];
}One immutable-by-convention rendering input, refreshed on chart-change events.API reference →interface ChartSize {
width: number;
height: number;
}interface ChartSize {
width: number;
height: number;
}interface ChartSize {
width: number;
height: number;
}Box size in CSS pixels.API reference →interface ChartSvgOptions {
document?: Document;
}interface ChartSvgOptions {
document?: Document;
}interface ChartSvgOptions {
document?: Document;
}Options for renderChartSvg.API reference →