@visuallyjs/browser-ui 1.0.3 → 1.1.1

package/types/browser-ui/surface-renderer/plugins/resizing-tools/definitions.d.ts

@@ -376,10 +376,15 @@ export declare const ATT_VJS_ROTATABLE = "data-vjs-rotatable";
 export declare const ATT_DATA_DIR = "data-dir";
 /**
  * Possible directions for resize - top/left/bottom/right/top left/top right/bottom right/bottom left
+ * @group Plugins
+ * @category Resizing Tools
+ * @internal
  */
 export type ResizeDirection = "t" | "l" | "b" | "r" | "tl" | "tr" | "br" | "bl";
 /**
  * Function invoked each time a resize event occurs that a {@link ResizingToolsHandlerFactory} is controlling. This function is expected to return an object containing a new x, y, width and height for the vertex being resized, as well as, optionally, an object containing required updates to other model objects, keyed by the other model object's IDs.
+ * @group Plugins
+ * @category Resizing Tools
  */
 export type ResizeFunction = (dx: number, dy: number) => {
     x: number;
@@ -403,9 +408,13 @@ export type ResizeHandler = {
 };
 /**
  * A factory that can return handlers for resize, given a vertex to resize and a resize direction (as well as the default resize function for the given direction). When a resize begins, the factory is called with the ui, current vertex, resize direction, and default handler. It returns a {@link ResizeFunction} that is invoked each time a discrete resize event then occurs, until the mouse/pointer is released. Each time the resize function is invoked, it is expected to return an object containing a new x, y, width and height for the vertex being resized, as well as, optionally, an object containing required updates to other model objects. This object is keyed by vertex ID, and its values are individual updates to apply to the vertex with that ID.
+ * @group Plugins
+ * @category Resizing Tools
  */
 export type ResizingToolsHandlerFactory = (ui: Surface, vertex: Node | Group, resizeDirection: ResizeDirection, defaultHandler: ResizeFunction) => ResizeFunction;
 /**
  * Defines a function that is invoked each time the resizing tools writes a size update to the model. The vertex that was resized, plus its new position and size, are passed to this function, and the function return a record of other updates it wishes to make to the model, keyed by object id. These updates are written and included as part of the transaction, and will be undone if the resize operation is subsequently undone.
+ * @group Plugins
+ * @category Resizing Tools
  */
 export type ResizingToolsModelUpdater = (v: Node, pos: PointXY, size: Size) => Record<string, ObjectData>;

package/types/browser-ui/surface-renderer/plugins/snaplines/snaplines-plugin.d.ts

@@ -46,36 +46,48 @@ interface HorizontalSnapRange extends SnapRange {
  * Assigned to both horizontal and vertical snaplines when active
  * @cssClass
  * @context snaplines
+ * @group Plugins
+ * @category Snaplines
  */
 export declare const CLASS_SNAPLINE = "vjs-snapline";
 /**
  * Assigned to vertical snaplines when active
  * @cssClass
  * @context snaplines
+ * @group Plugins
+ * @category Snaplines
  */
 export declare const CLASS_SNAPLINE_VERTICAL = "vjs-snapline-vertical";
 /**
  * Assigned to horizontal snaplines when active
  * @cssClass
  * @context snaplines
+ * @group Plugins
+ * @category Snaplines
  */
 export declare const CLASS_SNAPLINE_HORIZONTAL = "vjs-snapline-horizontal";
 /**
  * Assigned to both horizontal and vertical snaplines when the elements are exactly aligned
  * @cssClass
  * @context snaplines
+ * @group Plugins
+ * @category Snaplines
  */
 export declare const CLASS_SNAPLINE_EXACT = "vjs-snapline-exact";
 /**
  * Assigned to an element attached to an active snapline
  * @cssClass
  * @context snaplines
+ * @group Plugins
+ * @category Snaplines
  */
 export declare const CLASS_SNAPLINE_ACTIVE = "vjs-snapline-active";
 /**
  * Assigned to an element attached to an active snapline and the elements on the snapline are exactly aligned (parsed to integers).
  * @cssClass
  * @context snaplines
+ * @group Plugins
+ * @category Snaplines
  */
 export declare const CLASS_SNAPLINE_ACTIVE_EXACT = "vjs-snapline-active-exact";
 /**

package/types/browser-ui/surface-renderer/plugins/vertex-drawing/vertex-drawing-plugin.d.ts

@@ -59,6 +59,4 @@ export declare class VertexDrawingPlugin extends BaseBrowserUIPlugin implements
     private _addNewNode;
     private _resetSelectedElements;
     reset(): void;
-    activated(): void;
-    deactivated(): void;
 }

package/types/browser-ui/surface-renderer/shape-palette-options.d.ts

@@ -3,9 +3,9 @@ import { ShapeLibrary } from "../shape-library";
 import { DataGeneratorFunction, OnVertexAddedCallback } from "../definitions";
 import { PaletteMode } from "../components";
 /**
- * Options for a shape library palette.
+ * Options for a shape palette.
  * @group Components
- * @category ShapePalette
+ * @category Shape Palette
  */
 export interface ShapePaletteOptions<T extends ObjectData> {
     /**
@@ -98,6 +98,9 @@ export interface ShapePaletteOptions<T extends ObjectData> {
 }
 /**
  * Defines a wrapper around a shape with some `type` and `category` that adds properties (to be used to define the shape's appearance) and, optionally, the shape's initial size.
+ * @group Components
+ * @category Shape Palette
+ * @internal
  */
 export interface PreparedShape {
     /**

package/types/browser-ui/surface-renderer/shape-palette.d.ts

@@ -11,7 +11,7 @@ export declare const ATTRIBUTE_DATA_SHAPE_ID = "data-shape-id";
 /**
  * A palette for drag/drop that renders the contents of a shape library.
  * @group Components
- * @category ShapePalette
+ * @category Shape Palette
  */
 export declare class ShapePalette<T extends ObjectData> {
     private ui;

package/types/browser-ui/surface-renderer/surface-render-options.d.ts

@@ -1,6 +1,5 @@
 import { ModelEventSpec, SurfaceMode } from './definitions';
 import { DecoratorSpec } from './surface-decorator';
-import { GridOptions } from "../../ui";
 import { BrowserElement } from "../util";
 import { CustomTagDefinition } from "../templating";
 import { IDecorator } from "./decorators";
@@ -8,7 +7,6 @@ import { SurfaceEventOptions } from "./surface-events";
 import { BrowserUIOptions } from "../definitions";
 import { PanOptions, WheelOptions, ZoomOptions } from "../pan-zoom-options";
 import { EdgeSnapOptions } from "../edge-handler-base";
-import { LayoutSpec } from "../../core";
 /**
  * This interface defines the allowed parameters on a `render` call that will create a new Surface.
  * @group Components
@@ -55,22 +53,6 @@ export interface SurfaceOptions extends BrowserUIOptions {
      * Optional map of handlers for various events generated by the Surface.
      */
     events?: SurfaceEventOptions;
-    /**
-     * Options for imposing a grid onto the elements in the Surface.
-     */
-    grid?: GridOptions;
-    /**
-     * Optional ID for the Surface. Allows you to retrieve this Surface from a model's `getRenderer(id)` method.
-     */
-    id?: string;
-    /**
-     * Defines the layout to use.
-     */
-    layout?: LayoutSpec;
-    /**
-     * Defaults to false. When true, the UI treats the vertex's DOM element as the DOM element for the port if it cannot find a specific element for the port.
-     */
-    logicalPorts?: boolean;
     /**
      * Mode to start in. Defaults to 'pan'.
      */
@@ -79,10 +61,6 @@ export interface SurfaceOptions extends BrowserUIOptions {
      * Optional map of event handlers. Each entry consists of the event name, a CSS selector to target, and a callback function. Supplying this is equivalent to calling `bindModelEvent(..)` on a Surface.
      */
     modelEvents?: Array<ModelEventSpec>;
-    /**
-     * When true, the Surface will run a `refresh` of the underlying layout whenever a new edge is established. This defaults to false, but you might want to set this to true if you're using the Hierarchical or Hierarchy layouts, because it has a bearing on the way they paint. However, if your users are able to drag vertices around, you may not wish for the layout to move things that they have placed, which is why this defaults to false.
-     */
-    refreshLayoutOnEdgeConnect?: boolean;
     /**
      * Defaults to false. When true, changes to a group cause the entire surface to perform a relayout.
      */
@@ -99,14 +77,6 @@ export interface SurfaceOptions extends BrowserUIOptions {
      * Options to control how a user pans the canvas.
      */
     pan?: PanOptions;
-    /**
-     * If true, zoom the display so that the dataset is entirely visible after initialisation.
-     */
-    zoomToFit?: boolean;
-    /**
-     * If true, zoom the display so that the dataset is entirely visible after initialisation, but only adjust the zoom level if the dataset is not already visible at the default zoom level.
-     */
-    zoomToFitIfNecessary?: boolean;
 }
 /**
  * Constructor options for the Surface in the browser-ui (vanilla) package.

package/types/browser-ui/surface-renderer/surface.d.ts

@@ -6,7 +6,7 @@ import { UIPath } from '../ui-path';
 import { FixedElement, FixedElementConstraints } from "../fixed-layer";
 import { SurfaceOptions } from "./surface-render-options";
 import { Base, Node, Group, Edge, Port, Vertex, ObjectData, VisuallyJsSelection, PathOptions, DataSource, NodeRemovedParams, PointXY, RectangleXY, ZoomRange, LayoutResultSet, GroupRemovedParams } from '../../core';
-import { Connection, SupportsElementDragging, DragOptions, Overlay, ViewportBounds, UIExportOptions, ZoomToFitIfNecessaryOptions, ZoomToFitOptions, ZoomToElementsOptions, ViewportNodeElement, ViewportElement, ViewportGroupElement, CenterContentOptions, AlignContentOptions, AlignContentToFaceOptions } from "../../ui";
+import { Connection, SupportsElementDragging, DragOptions, Overlay, ViewportBounds, UIExportOptions, ZoomToFitIfNecessaryOptions, ZoomToFitOptions, ZoomToElementsOptions, ViewportNodeElement, ViewportElement, ViewportGroupElement, CenterContentOptions, AlignContentOptions, AlignContentToFaceOptions, CenterContentHorizontallyOptions, CenterContentVerticallyOptions } from "../../ui";
 import { BrowserUI } from "../browser-visuallyjs-instance";
 import { BrowserElement } from "../util";
 import { EdgeInputMethod } from "../edge-input-handler";
@@ -20,6 +20,7 @@ import { MiniviewPluginOptions } from "./plugins";
 /**
  * Provides a canvas on which nodes, groups and edges can be rendered, with support for pan/zoom, layouts and various plugins. This is not a class that API users should instantiate directly: for users of a library integration, a Surface will be created internally by the appropriate component; for users of vanilla VisuallyJs, a Surface is created either via the {@link createSurface} factory method, or via a `render` call on an instance of the {@link BrowserUIModel}.
  * @group Components
+ * @category Surface
  */
 export declare class Surface extends BrowserUI<SurfaceEvents> implements SupportsElementDragging<BrowserElement>, SupportsPathEditing, SupportsViewportManipulation {
     model: BrowserUIModel;
@@ -248,6 +249,11 @@ export declare class Surface extends BrowserUI<SurfaceEvents> implements Support
      * @param clazz Either a single class name, or a comma separated list of classnames, or an array of classnames.
      */
     removeDragClassnameFilter(clazz: string | Array<string>): void;
+    /**
+     * Adds a CSS selector filter to the wheel event.
+     * @param selector
+     */
+    addWheelSelectorFilter(selector: string): void;
     /**
      * Adds the given element(s) to the given drag group.
      * @param spec Either the ID of some drag group, in which case the elements are all added as 'active', or an object containing the ID of the drag group and the element's participation in the group. `active` participation, which is the default, indicates whether dragging the given element(s) should cause all the elements in the drag group to be dragged. If `active` is false it means the given element(s) is "passive" and should only move when an active member of the drag group is dragged. The elements passed in to this method will be added to the drag group with an `added` membership flag, meaning any drag group an element has been added to via this method will take precedence over a drag group an element gets added to via a drag group assigner (see the DragGroupsPlugin for a discussion of automatically assigning elements to drag groups)
@@ -284,36 +290,6 @@ export declare class Surface extends BrowserUI<SurfaceEvents> implements Support
      * @magnetizer
      */
     magnetizeAtEvent(event: MouseEvent): void;
-    /**
-     * Positions a DOM element at a given X,Y on the canvas, in canvas coordinates (meaning it takes into account the current zoom and pan). This is not intended for use with elements the surface is managing: it is designed to be used with elements such as pop-ups that you may wish to position relative to the content in your canvas.
-     * @param el Element to position.
-     * @param x X location on canvas to move element's left edge to.
-     * @param y Y location on canvas to move element's top edge to.
-     * @param xShift Optional absolute number of pixels to shift the element by in the x axis after calculating its position relative to the canvas. Typically you'd use this to place something other than the top left corner of your element at the desired location.
-     * @param yShift Optional absolute number of pixels to shift the element by in the y axis after calculating its position relative to the canvas.
-     * @param ensureOnScreen If true, will ensure that x and y positions are never negative.
-     *
-     */
-    positionElementAt(el: BrowserElement, x: number, y: number, xShift?: number, yShift?: number, ensureOnScreen?: boolean): void;
-    /**
-     * Positions a DOM element at the apparent canvas location corresponding to the page location given by some event. This is not intended for use with elements the surface is managing: it is designed to be used with elements such as pop-ups that you may wish to position relative to the content in your canvas.
-     * @param el - Element to position.
-     * @param evt - Event to position element at.
-     * @param xShift - Optional absolute number of pixels to shift the element by in the x axis after calculating its position relative to the canvas. Typically you'd use this to place something other than the top left corner of your element at the desired location.
-     * @param yShift - Optional absolute number of pixels to shift the element by in the y axis after calculating its position relative to the canvas.
-     *
-     */
-    positionElementAtEventLocation(el: BrowserElement, evt: MouseEvent, xShift?: number, yShift?: number): void;
-    /**
-     * Positions a DOM element at the apparent canvas location corresponding to the given page location. This is not intended for use with elements the surface is managing: it is designed to be used with elements such as pop-ups that you may wish to position relative to the content in your canvas.
-     * @param el - Element to position.
-     * @param x - X location on canvas to move element's left edge to.
-     * @param y - Y location on canvas to move element's top edge to.
-     * @param xShift - Optional absolute number of pixels to shift the element by in the x axis after calculating its position relative to the canvas. Typically you'd use this to place something other than the top left corner of your element at the desired location.
-     * @param yShift - Optional absolute number of pixels to shift the element by in the y axis after calculating its position relative to the canvas.
-     *
-     */
-    positionElementAtPageLocation(el: BrowserElement, x: number, y: number, xShift?: number, yShift?: number): void;
     /**
      * Cleans up the Surface.  When using a library integration such as Angular/React/Vue/Svelte, this method will be called automatically when the associated component is unloaded. If you're using vanilla VisaullyJs, you might want to call this method if you're cleaning up your UI and you don't need this Surface any longer.
      *
@@ -358,9 +334,38 @@ export declare class Surface extends BrowserUI<SurfaceEvents> implements Support
     /**
      * Centers the tracked content inside the viewport, but does not adjust the current zoom (so the content may still extend past the viewport bounds)
      * @param options Method parameters.
+     * @canvasPositioning
      *
      */
     centerContent(options?: CenterContentOptions): void;
+    /**
+     * Centers the tracked content horizontally inside the viewport, but does not adjust the current zoom (so the content may still extend past the viewport bounds)
+     * @param options Method parameters.
+     * @canvasPositioning
+     */
+    centerContentHorizontally(options?: CenterContentHorizontallyOptions): void;
+    /**
+     * Centers the tracked content vertically inside the viewport, but does not adjust the current zoom (so the content may still extend past the viewport bounds)
+     * @param options Method parameters.
+     * @canvasPositioning
+     */
+    centerContentVertically(options?: CenterContentVerticallyOptions): void;
+    /**
+     * Position the surface so the background is centered in the viewport, without changing the current zoom.
+     * @param params.onComplete Optional function to call on operation complete (centering may be animated).
+     * @param params.doNotAnimate If true, centering content will not use animation.
+     */
+    centerBackground(params: {
+        doNotAnimate?: boolean;
+        onComplete?: (p: PointXY) => any;
+    }): void;
+    /**
+     * Positions the widget so that the edges of the background align with the viewport. This method is useful for snapping to a corner of the background.
+     * @param axes Spec for the axes to align to. This should be a space-separated string containing a value
+     * for the x (allowed values `left` and `right`) and, optionally, y (allowed values `top` and `bottom`) axes. The default value is `"left top"`.
+     * @param animationDuration Defaults to 150ms
+     */
+    alignBackground(axes: string, animationDuration?: number): void;
     /**
      * Zooms the display so that the current selected nodes are all visible, optionally animating the transition.
      * @param params Optional method params
@@ -501,29 +506,28 @@ export declare class Surface extends BrowserUI<SurfaceEvents> implements Support
     /**
      * Center on the current object and zoom in on it.
      * @param element - The element to center. Can be a DOM element, vertex id, or a Node/Group
-     * @param fillRatio How much of the viewport to fill with the object we zoom in on. This will be limited by the
-     *     current zoom range. Defaults to 0.6.
+     * @param fillRatio How much of the viewport to fill with the object we zoom in on. This will be limited by the current zoom range. Defaults to 0.6.
      * @param doNotAnimate - by default, this operation will be animated.
+     * @canvasPosition
      *
      */
     centerOnAndZoom(element: string | Vertex | Element, fillRatio?: number, doNotAnimate?: boolean): void;
     /**
-     * Takes a node/group as argument and positions the surface canvas such that the given node is at the center in
-     * both axes.
+     * Takes a node/group as argument and positions the surface canvas such that the given node is at the center in both axes.
      * @param element - The element to center. Can be a DOM element, vertex id, or a Node/Group.
-     *
+     * @canvasPosition
      */
     centerOn(element: string | Vertex | Element): void;
     /**
      * Takes a node/group as argument and positions the surface canvas such that the given node is at the center in the horizontal axis.
      * @param element - The element to center. Can be a DOM element, vertex id, or a Node/Group
-     *
+     * @canvasPosition
      */
     centerOnHorizontally(element: string | Vertex | Element): void;
     /**
      * Takes a node/group as argument and positions the surface canvas such that the given node is at the center in the vertical axis.
      * @param element - The element to center. Can be a DOM element, vertex id, or a Node/Group
-     *
+     * @canvasPosition
      */
     centerOnVertically(element: string | Vertex | Element): void;
     /**
@@ -532,6 +536,11 @@ export declare class Surface extends BrowserUI<SurfaceEvents> implements Support
      *
      */
     setClamping(clamping: boolean): void;
+    /**
+     * Sets the location of the canvas such that the given point appears at the center of the viewport.
+     * @param xy - location of the point on the canvas to position in the center of the viewport.
+     */
+    setViewportCenter(xy: PointXY): void;
     /**
      * Returns whether or not the given point (relative to page origin) is within the viewport for the widget.
      * @param x X location of point to test

package/types/browser-ui/svg-element-overlay.d.ts

@@ -20,6 +20,7 @@ export interface SvgSimpleShapeOverlayPaintParams<EL> extends SvgOverlayPaintPar
 export interface SVGLabelOverlayPaintParams extends OverlayPaintParams {
     d: {
         loc: PointXY;
+        rotation?: number;
     };
 }
 /**

package/types/browser-ui/svg-export/definitions.d.ts

@@ -1,6 +1,8 @@
 import { PointXY } from "../../core";
 /**
  * Options for an SVG export.
+ * @group Input and Output
+ * @category SVG Export
  */
 export interface SvgExportOptions {
     /**
@@ -112,30 +114,40 @@ export type ImageReadyFunction = (result: {
  * The modal backing element for SVG/PNG/JPG export dialog
  * @cssClass
  * @context svg-png-jpg-export
+ * @group Components
+ * @category SVG/PNG/JPG Export
  */
 export declare const CLASS_EXPORT_UNDERLAY = "vjs-export-underlay";
 /**
  * Content element for SVG/PNG/JPG export dialog
  * @cssClass
  * @context svg-png-jpg-export
+ * @group Components
+ * @category SVG/PNG/JPG Export
  */
 export declare const CLASS_EXPORT_OVERLAY = "vjs-export-overlay";
 /**
  * Class assigned to the cancel button on an export dialog
  * @cssClass
  * @context svg-png-jpg-export
+ * @group Components
+ * @category SVG/PNG/JPG Export
  */
 export declare const CLASS_EXPORT_CANCEL = "vjs-export-cancel";
 /**
  * Class assigned to the dimensions drop down in an export dialog
  * @cssClass
  * @context svg-png-jpg-export
+ * @group Components
+ * @category SVG/PNG/JPG Export
  */
 export declare const CLASS_EXPORT_DIMENSIONS = "vjs-export-dimensions";
 /**
  * Class assigned to the element containing buttons and dimensions picker on an export dialog
  * @cssClass
  * @context svg-png-jpg-export
+ * @group Components
+ * @category SVG/PNG/JPG Export
  */
 export declare const CLASS_EXPORT_DOWNLOAD_TOOLS = "vjs-export-download-tools";
 export declare const DEFAULT_EXPORT_FILENAME = "visuallyjs-export";

package/types/browser-ui/svg-export/image-exporter.d.ts

@@ -6,6 +6,8 @@ import { RectangleXY } from "../../core";
  * @param ui
  * @param options
  * @param onready
+ * @group Input and Output
+ * @category Image Export
  */
 export declare function exportImage(ui: BrowserUI, options: ImageExportOptions, onready: ImageReadyFunction): void;
 export declare function $doImageExport(svgElementInfo: {

package/types/browser-ui/svg-export/svg-exporter.d.ts

@@ -1,6 +1,9 @@
 import { RectangleXY } from "../../core";
 import { BrowserUI } from "../browser-visuallyjs-instance";
 import { SvgExportOptions } from "./definitions";
+/**
+ * @internal
+ */
 export declare function exportSvg(ui: BrowserUI, options?: SvgExportOptions): {
     element: SVGElement;
     extents: RectangleXY;

package/types/browser-ui/templating/custom-tag-definition.d.ts

@@ -25,8 +25,7 @@ export interface CustomTagDefinition {
      */
     updated: (el: Element, data: any, instance: Recado, ui: Surface, vertex: Vertex) => any;
     /**
-     * If set to true, the element rendered for this tag is removed from the DOM. The Toolkit uses this capability internally
-     * to add endpoints to the DOM.
+     * If set to true, the element rendered for this tag is removed from the DOM.
      */
     remove?: boolean;
 }

package/types/browser-ui/util.d.ts

@@ -1,4 +1,6 @@
 /**
  * Abstraction of HTML/SVG element. Used extensively internally, and by a number of methods in the public API.
+ * @group UI
+ * @category Definitions
  */
 export type BrowserElement = HTMLElement | SVGElement;

package/types/charts/bar-and-column/bar-plot.d.ts

@@ -25,6 +25,8 @@ export interface StackablePlotOptions {
 }
 /**
  * Defines the format for data labels options.
+ * @group Charts
+ * @category Options
  */
 export type DataLabelsOptions = boolean | string;
 /**

package/types/charts/base-chart.d.ts

@@ -6,44 +6,66 @@ import { TooltipOptions } from "./tooltip";
 import { ChartDimensions } from "./definitions";
 import { ChartExporter, ChartExporterOptions } from "./chart-exporter";
 import { ChartZoomControls } from "./chart-zoom-controls";
+/**
+ * The default background color for charts, and for their plot area, is #FFFFFF.
+ * @constant
+ * @group Charts
+ * @category Constants
+ */
 export declare const DEFAULT_BACKGROUND_COLOR = "#FFFFFF";
+/**
+ * The default label color for charts is #000000.
+ * @constant
+ * @group Charts
+ * @category Constants
+ */
+export declare const DEFAULT_LABEL_COLOR = "#000000";
 export declare const DEFAULT_MARGIN = 15;
 /**
  * Middle alignment (centered) for chart title.
  * @constant
  * @group Charts
+ * @category Options
  */
 export declare const CHART_TITLE_ALIGN_MIDDLE = "middle";
 /**
  * Left alignment  for chart title.
  * @constant
  * @group Charts
+ * @category Options
  */
 export declare const CHART_TITLE_ALIGN_LEFT = "left";
 /**
  * Right alignment for chart title.
  * @constant
  * @group Charts
+ * @category Options
  */
 export declare const CHART_TITLE_ALIGN_RIGHT = "right";
 /**
  * Chart title alignment
+ * @group Charts
+ * @category Options
  */
 export type ChartTitleAlignment = typeof CHART_TITLE_ALIGN_LEFT | typeof CHART_TITLE_ALIGN_MIDDLE | typeof CHART_TITLE_ALIGN_RIGHT;
 /**
  * Defines placing the chart title at the top of the chart
  * @constant
  * @group Charts
+ * @category Options
  */
 export declare const CHART_TITLE_PLACEMENT_TOP = "top";
 /**
  * Defines placing the chart title at the bottom of the chart
  * @constant
  * @group Charts
+ * @category Options
  */
 export declare const CHART_TITLE_PLACEMENT_BOTTOM = "bottom";
 /**
  * Chart title placement - at the top or the bottom.
+ * @group Charts
+ * @category Options
  */
 export type ChartTitlePlacement = typeof CHART_TITLE_PLACEMENT_TOP | typeof CHART_TITLE_PLACEMENT_BOTTOM;
 /**
@@ -107,22 +129,27 @@ export interface SubtitleSpec extends BaseTitleSpec {
  * Middle alignment (centered) for axis title.
  * @constant
  * @group Charts
+ * @category Options
  */
 export declare const CHART_AXIS_TITLE_ALIGN_MIDDLE = "middle";
 /**
  * At start alignment for axis title.
  * @constant
  * @group Charts
+ * @category Options
  */
 export declare const CHART_AXIS_TITLE_ALIGN_START = "start";
 /**
  * At end alignment for axis title.
  * @constant
  * @group Charts
+ * @category Options
  */
 export declare const CHART_AXIS_TITLE_ALIGN_END = "end";
 /**
  * Axis title alignment - start, middle or end. Middle is the default.
+ * @group Charts
+ * @category Options
  */
 export type AxisTitleAlignment = typeof CHART_AXIS_TITLE_ALIGN_MIDDLE | typeof CHART_AXIS_TITLE_ALIGN_START | typeof CHART_AXIS_TITLE_ALIGN_END;
 /**
@@ -185,10 +212,6 @@ export interface BaseChartOptions {
      * Height for the chart. If omitted, height is computed from the width of the chart's container
      */
     height?: number;
-    /**
-     * Background color for chart. Defaults to #FFFFFF. You can also use the `.vjs-chart-background` css class to set this.
-     */
-    backgroundColor?: string;
     /**
      * Title for the chart.
      */
@@ -253,13 +276,27 @@ export declare const DEFAULT_GRID_LINE_COLOR = "#AAAAAA";
 export declare const DEFAULT_LEGEND_OUTLINE_WIDTH = 1;
 export declare const DEFAULT_LEGEND_BACKGROUND_COLOR = "#FFFFFFCC";
 /**
+ * Style options for a chart. This is a realised object; no settings are blank.
  * @internal
  */
 export interface ChartStyle {
+    /**
+     * Color for chart's gridlines. Defaults to #AAAAAA.
+     */
     gridLineColor: string;
     legendOutlineColor: string;
     legendOutlineWidth: number;
     legendBackgroundColor: string;
+    /**
+     * Background color for chart. Defaults to #FFFFFF. You can also use the `.vjs-chart-background` css class to set this.
+     */
+    backgroundColor: string;
+    /**
+     * Background color for chart's plot area. Defaults to being the same as the value calculated for `backgroundColor`. You can also use the `.vjs-chart-plot-background` css class to set this.
+     */
+    plotBackgroundColor: string;
+    labelColor: string;
+    labelColorGenerator?: (v: any, idx: number) => string;
 }
 /**
  * Basic style options for a chart.
@@ -268,7 +305,7 @@ export interface ChartStyle {
  */
 export interface ChartStyleOptions {
     /**
-     * What color to draw gridlines.
+     * What color to draw gridlines. Defaults to #AAAAAA.
      */
     gridLineColor?: string;
     /**
@@ -287,6 +324,24 @@ export interface ChartStyleOptions {
      * What color to draw crosshairs
      */
     crosshairColor?: string;
+    /**
+     * Background color for chart. Defaults to #FFFFFF. You can also use the `.vjs-chart-background` css class to set this.
+     */
+    backgroundColor?: string;
+    /**
+     * Background color for chart's plot area. Defaults to being the same as the value calculated for `backgroundColor`. You can also use the `.vjs-chart-plot-background` css class to set this.
+     */
+    plotBackgroundColor?: string;
+    /**
+     * Color for labels, defaults to #000000. Can be overridden in axis definitions via the `labelColor` property.
+     */
+    labelColor?: string;
+    /**
+     * Optional function invoked to compute a custom color for a given label
+     * @param v
+     * @param idx
+     */
+    labelColorGenerator?: (v: number, idx: number) => string;
 }
 /**
  * Base class for charts. This class is abstract; you won't need to interact with this class unless you're making your own chart type.
@@ -305,7 +360,6 @@ export declare abstract class BaseChart extends OptimisticEventGenerator {
     $resizeObserver: ResizeObserver;
     $eventManager: EventManager;
     colorGenerator: ColorGenerator<ObjectData>;
-    private _backgroundColor;
     /**
      * color to use for every series. Not set by default.
      * @internal
@@ -369,6 +423,8 @@ export declare abstract class BaseChart extends OptimisticEventGenerator {
      */
     $precomputeTitle(svgRoot: SVGElement, width: number): ChartSVGElement;
     $getBackgroundColor(): string;
+    $getPlotBackgroundColor(): string;
+    $getLabelColor(): string;
     abstract hasData(): boolean;
     /**
      * Map the given page location to an x/y location on the chart's canvas

package/types/charts/chart-exporter.d.ts

@@ -2,6 +2,8 @@ import { BaseChart } from "./base-chart";
 import { BrowserElement } from "../browser-ui";
 /**
  * Options for a chart export menu.
+ * @group Charts
+ * @category Input and Output
  */
 export interface ChartExporterOptions {
     /**
@@ -19,6 +21,7 @@ export interface ChartExporterOptions {
 }
 /**
  * Component that adds an export menu to a chart.
+ * @group Charts
  */
 export declare class ChartExporter {
     private chart;