tessl/npm-highcharts
JavaScript charting framework for creating interactive, responsive, and visually appealing charts
—
Pending
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Securityby
Pending
The risk profile of this skill
advanced-features.mddocs/
Advanced Features
Extended functionality including 3D rendering, annotations, data loading, boost performance module, and specialized chart types.
Capabilities
3D Charts
Three-dimensional chart rendering with depth, rotation, and perspective controls.
interface Chart3dOptions {
/** Enable 3D rendering */
enabled?: boolean;
/** 3D viewing box depth */
depth?: number;
/** Viewing angle alpha (rotation around x-axis) */
alpha?: number;
/** Viewing angle beta (rotation around y-axis) */
beta?: number;
/** 3D frame configuration */
frame?: Chart3dFrameOptions;
/** Perspective viewpoint distance */
viewDistance?: number;
/** Axis label positioning */
axisLabelPosition?: string;
/** Fit to plot area */
fitToPlot?: boolean;
}
interface Chart3dFrameOptions {
/** Visible faces of the 3D frame */
visible?: string;
/** Frame size */
size?: number;
/** Back frame options */
back?: Chart3dFrameBackOptions;
/** Side frame options */
side?: Chart3dFrameSideOptions;
/** Bottom frame options */
bottom?: Chart3dFrameBottomOptions;
}
// Loading 3D module
import 'highcharts/highcharts-3d';Data Loading Module
Advanced data import and processing capabilities for various data sources.
interface DataOptions {
/** CSV data string */
csv?: string;
/** CSV data URL */
csvURL?: string;
/** Rows of data */
rows?: Array<Array<string | number>>;
/** Columns of data */
columns?: Array<Array<string | number>>;
/** Google Sheets URL */
googleSpreadsheetKey?: string;
googleSpreadsheetWorksheet?: string | number;
/** Data table ID */
table?: string | HTMLElement;
/** Data refresh interval */
enablePolling?: boolean;
dataRefreshRate?: number;
/** CSV parsing options */
lineDelimiter?: string;
itemDelimiter?: string;
firstRowAsNames?: boolean;
startRow?: number;
endRow?: number;
startColumn?: number;
endColumn?: number;
/** Data transformation */
beforeParse?: DataBeforeParseCallbackFunction;
parsed?: DataParsedCallbackFunction;
complete?: DataCompleteCallbackFunction;
/** Date parsing */
parseDate?: DataParseDateCallbackFunction;
dateFormat?: string;
/** Series mapping */
seriesMapping?: Array<Dictionary<any>>;
/** Column types */
columnTypes?: Array<string>;
/** Switch rows and columns */
switchRowsAndColumns?: boolean;
}
type DataBeforeParseCallbackFunction = (csv: string) => string;
type DataParsedCallbackFunction = (columns: Array<Array<any>>) => boolean | undefined;
type DataCompleteCallbackFunction = (chartOptions: Options) => void;
type DataParseDateCallbackFunction = (dateValue: string) => number;
/**
* Configure data loading for chart
* @param options - Data loading options
*/
function data(options: DataOptions): void;
// Loading data module
import 'highcharts/modules/data';Boost Performance Module
High-performance rendering for large datasets using WebGL and optimized algorithms.
interface BoostOptions {
/** Enable boost module */
enabled?: boolean;
/** Use GPU translations */
useGPUTranslations?: boolean;
/** Use pre-allocated arrays */
useAllocateBuffers?: boolean;
/** Point threshold for boost activation */
seriesThreshold?: number;
/** Debug boost rendering */
debug?: BoostDebugOptions;
/** Pixel ratio for high-DPI displays */
pixelRatio?: number;
/** Allow fallback to non-boost rendering */
allowFallback?: boolean;
}
interface BoostDebugOptions {
/** Show skip summary */
showSkipSummary?: boolean;
/** Time series processing */
timeSeriesProcessing?: boolean;
/** Time k-d tree building */
timeKDTree?: boolean;
/** Time rendering */
timeRendering?: boolean;
/** Time setup */
timeSetup?: boolean;
/** Time buffer copy */
timeBufferCopy?: boolean;
}
// Loading boost module
import 'highcharts/modules/boost';Annotations System
Interactive annotations for highlighting and marking chart areas and points.
class Annotation {
/** Annotation options */
options: AnnotationsOptions;
/** Chart containing this annotation */
chart: Chart;
/** Annotation shapes */
shapes: Array<AnnotationShape>;
/** Annotation labels */
labels: Array<AnnotationLabel>;
/** Control points for editing */
controlPoints: Array<AnnotationControlPoint>;
/**
* Update annotation options
* @param userOptions - New annotation options
*/
update(userOptions: AnnotationsOptions): void;
/**
* Remove annotation
*/
destroy(): void;
/**
* Redraw annotation
*/
redraw(): void;
/**
* Set annotation visibility
* @param visible - Whether annotation should be visible
*/
setVisible(visible?: boolean): void;
}
interface AnnotationsOptions {
/** Annotation ID */
id?: number | string;
/** Annotation shapes */
shapes?: Array<AnnotationShapeOptions>;
/** Annotation labels */
labels?: Array<AnnotationLabelOptions>;
/** Animation options */
animation?: boolean | AnimationOptionsObject;
/** Control point options */
controlPointOptions?: AnnotationControlPointOptions;
/** Cropping behavior */
crop?: boolean;
/** Draggable configuration */
draggable?: AnnotationDraggableValue;
/** Annotation events */
events?: AnnotationEventsOptions;
/** Label options */
labelOptions?: AnnotationLabelOptions;
/** Shape options */
shapeOptions?: AnnotationShapeOptions;
/** Type description */
typeOptions?: AnnotationTypeOptionsObject;
/** Visibility */
visible?: boolean;
/** Z-index */
zIndex?: number;
}
// Chart annotation methods
class Chart {
/**
* Add annotation to chart
* @param options - Annotation options
* @returns Annotation instance
*/
addAnnotation(options: AnnotationsOptions): Annotation;
/**
* Remove annotation by ID
* @param id - Annotation ID
*/
removeAnnotation(id: string | number): void;
}
// Loading annotations module
import 'highcharts/modules/annotations';Drilldown Functionality
Hierarchical data exploration with drill-down and drill-up navigation.
interface DrilldownOptions {
/** Active axis label style */
activeAxisLabelStyle?: CSSObject;
/** Active data label style */
activeDataLabelStyle?: CSSObject;
/** Allow point drilldown */
allowPointDrilldown?: boolean;
/** Animation options */
animation?: boolean | AnimationOptionsObject;
/** Breadcrumbs options */
breadcrumbs?: BreadcrumbsOptions;
/** Drilldown series data */
series?: Array<SeriesOptionsType>;
/** Map data for map charts */
mapData?: Array<any>;
/** Drill up button */
drillUpButton?: DrilldownDrillUpButtonOptions;
}
interface BreadcrumbsOptions {
/** Button theme */
buttonTheme?: SVGAttributes;
/** Show full path */
showFullPath?: boolean;
/** Position */
position?: BreadcrumbsPositionOptions;
/** Separator */
separator?: BreadcrumbsSeparatorOptions;
/** Click handler */
events?: BreadcrumbsEventsOptions;
}
// Loading drilldown module
import 'highcharts/modules/drilldown';Stock Tools
Advanced drawing tools for financial charts including trend lines, annotations, and technical analysis.
interface StockToolsOptions {
/** Stock tools GUI options */
gui?: StockToolsGuiOptions;
/** Navigation bindings */
bindings?: Dictionary<NavigationBindingsOptions>;
}
interface StockToolsGuiOptions {
/** Enable GUI */
enabled?: boolean;
/** Icon URL */
iconsURL?: string;
/** Toolbar definitions */
definitions?: Dictionary<StockToolsGuiDefinitionsOptions>;
/** Toolbar options */
toolbarClassName?: string;
}
// Loading stock tools module
import 'highcharts/modules/stock-tools';Pattern Fill
Custom pattern fills for chart elements using SVG patterns.
interface PatternOptions {
/** Pattern path */
path?: string | PatternPathOptions;
/** Pattern width */
width?: number;
/** Pattern height */
height?: number;
/** Pattern color */
color?: ColorString;
/** Pattern opacity */
opacity?: number;
/** Pattern ID */
id?: string;
/** Pattern transform */
patternTransform?: string;
/** Pattern units */
patternUnits?: string;
/** Pattern aspect ratio */
aspectRatio?: string;
/** Pattern image */
image?: string;
}
// Loading pattern fill module
import 'highcharts/modules/pattern-fill';Broken Axis
Support for broken/discontinuous axes to handle gaps in data ranges.
interface AxisBreaksOptions {
/** Break start value */
from?: number;
/** Break end value */
to?: number;
/** Break repeat interval */
repeat?: number;
/** Break size */
breakSize?: number;
}
interface AxisOptions {
/** Axis breaks */
breaks?: Array<AxisBreaksOptions>;
}
// Loading broken axis module
import 'highcharts/modules/broken-axis';Offline Exporting
Client-side chart export without requiring external server.
interface ExportingOptions {
/** Use offline exporting */
useLocalCanvas?: boolean;
/** Fallback to export server if offline fails */
fallbackToExportServer?: boolean;
/** Offline export lib URL */
libURL?: string;
}
// Loading offline exporting module
import 'highcharts/modules/offline-exporting';Full Screen Mode
Full screen viewing capability for charts.
// Chart full screen methods
class Chart {
/**
* Toggle full screen mode
*/
fullscreen: {
/**
* Open chart in full screen
*/
open(): void;
/**
* Close full screen mode
*/
close(): void;
/**
* Toggle full screen state
*/
toggle(): void;
/** Whether chart is in full screen */
isOpen: boolean;
};
}
interface ChartEventsOptions {
/** Full screen opened event */
fullscreenOpen?: Function;
/** Full screen closed event */
fullscreenClose?: Function;
}
// Loading full screen module
import 'highcharts/modules/full-screen';No Data to Display
Customizable message display when chart has no data.
interface NoDataOptions {
/** No data message style */
style?: CSSObject;
/** Use HTML for message */
useHTML?: boolean;
/** No data message attributes */
attr?: SVGAttributes;
/** Position of message */
position?: NoDataPositionOptions;
}
interface NoDataPositionOptions {
/** Horizontal alignment */
align?: AlignValue;
/** Vertical alignment */
verticalAlign?: VerticalAlignValue;
/** X offset */
x?: number;
/** Y offset */
y?: number;
}
// Chart no data methods
class Chart {
/**
* Show no data message
* @param str - Custom message text
*/
showNoData(str?: string): void;
/**
* Hide no data message
*/
hideNoData(): void;
/**
* Check if chart has data
* @returns True if chart has cartesian data
*/
hasData(): boolean;
}
// Loading no data module
import 'highcharts/modules/no-data-to-display';SVG Rendering Engine
Direct access to Highcharts' powerful SVG rendering system for creating custom shapes, elements, and charts independent of chart data.
class SVGRenderer {
/**
* Create a new SVG renderer
* @param container - Container element or element ID
* @param width - Renderer width in pixels
* @param height - Renderer height in pixels
* @param style - CSS styles for the container
* @param forExport - Whether renderer is for export
* @param allowHTML - Whether to allow HTML content
* @param styledMode - Whether to use styled mode (CSS styling)
*/
constructor(
container: string | HTMLElement,
width: number,
height: number,
style?: CSSObject,
forExport?: boolean,
allowHTML?: boolean,
styledMode?: boolean
);
/** SVG root element */
box: SVGElement;
/** Renderer container element */
boxWrapper: HTMLElement;
/** Defs element for patterns, gradients, etc. */
defs: SVGElement;
/** Renderer width */
width: number;
/** Renderer height */
height: number;
/**
* Create SVG element
* @param nodeName - SVG element type (rect, circle, path, etc.)
* @param attributes - Element attributes
* @param styles - CSS styles
* @param parent - Parent element
* @param inverted - Whether to invert element
* @returns SVG element wrapper
*/
createElement(
nodeName: string,
attributes?: SVGAttributes,
styles?: CSSObject,
parent?: SVGElement,
inverted?: boolean
): SVGElement;
/**
* Create rectangle element
* @param x - X position
* @param y - Y position
* @param width - Rectangle width
* @param height - Rectangle height
* @param r - Border radius
* @param stroke - Stroke width
* @returns Rectangle element
*/
rect(x?: number, y?: number, width?: number, height?: number, r?: number, stroke?: number): SVGElement;
/**
* Create circle element
* @param x - Center X coordinate
* @param y - Center Y coordinate
* @param r - Circle radius
* @returns Circle element
*/
circle(x?: number, y?: number, r?: number): SVGElement;
/**
* Create path element
* @param path - SVG path data
* @returns Path element
*/
path(path?: Array<string | number>): SVGElement;
/**
* Create text element
* @param str - Text content
* @param x - X position
* @param y - Y position
* @param useHTML - Whether to use HTML content
* @returns Text element
*/
text(str?: string, x?: number, y?: number, useHTML?: boolean): SVGElement;
/**
* Create group element
* @param name - Group name/class
* @returns Group element
*/
g(name?: string): SVGElement;
/**
* Create image element
* @param src - Image URL
* @param x - X position
* @param y - Y position
* @param width - Image width
* @param height - Image height
* @param onload - Load callback
* @returns Image element
*/
image(
src: string,
x?: number,
y?: number,
width?: number,
height?: number,
onload?: Function
): SVGElement;
/**
* Create symbol (predefined shape)
* @param symbol - Symbol name (circle, square, diamond, triangle, etc.)
* @param x - X position
* @param y - Y position
* @param width - Symbol width
* @param height - Symbol height
* @param options - Symbol options
* @returns Symbol element
*/
symbol(
symbol: string,
x?: number,
y?: number,
width?: number,
height?: number,
options?: SymbolOptionsObject
): SVGElement;
/**
* Set renderer size
* @param width - New width
* @param height - New height
* @param animate - Whether to animate resize
*/
setSize(width: number, height: number, animate?: boolean): void;
/**
* Define reusable element (gradient, pattern, etc.)
* @param def - Definition object
* @returns Definition element
*/
definition(def: DefinitionObject): SVGElement;
/**
* Get SVG string representation
* @returns SVG markup
*/
getStyle(): string;
/**
* Destroy renderer and clean up
*/
destroy(): void;
}
/**
* Get renderer class by type
* @param rendererType - Renderer type identifier
* @returns Renderer class constructor
*/
function getRendererType(rendererType?: string): Class<SVGRenderer>;
/**
* Register custom renderer type
* @param rendererType - Type identifier
* @param rendererClass - Renderer class
* @param setAsDefault - Whether to set as default
*/
function registerRendererType(
rendererType: string,
rendererClass: Class<SVGRenderer>,
setAsDefault: boolean
): void;Usage Examples:
import Highcharts from 'highcharts';
// Create standalone renderer
const renderer = new Highcharts.SVGRenderer(
document.getElementById('custom-svg'),
400,
300
);
// Draw custom shapes
const redCircle = renderer.circle(100, 100, 50)
.attr({
fill: 'red',
stroke: 'black',
'stroke-width': 2
})
.add();
const blueRect = renderer.rect(200, 50, 100, 80)
.attr({
fill: 'blue',
rx: 5, // Rounded corners
ry: 5
})
.add();
// Add text
const label = renderer.text('Custom SVG', 50, 200)
.attr({
fill: 'black',
'font-size': '16px',
'font-weight': 'bold'
})
.add();
// Create complex path
const customPath = renderer.path([
'M', 150, 200, // Move to
'L', 200, 250, // Line to
'L', 100, 250, // Line to
'Z' // Close path
])
.attr({
fill: 'yellow',
stroke: 'orange',
'stroke-width': 3
})
.add();
// Use chart's renderer for custom overlays
const chart = Highcharts.chart('container', {
series: [{ data: [1, 2, 3, 4, 5] }]
});
// Add custom annotation using chart's renderer
const customAnnotation = chart.renderer.text('Peak', 200, 100)
.attr({
fill: 'red',
'font-weight': 'bold'
})
.add();
// Add custom shape to chart
const customShape = chart.renderer.circle(300, 150, 20)
.attr({
fill: 'rgba(255, 0, 0, 0.5)',
stroke: 'red',
'stroke-width': 2
})
.add();Usage Examples:
// 3D Chart
import Highcharts from 'highcharts';
import 'highcharts/highcharts-3d';
const chart3D = Highcharts.chart('container', {
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
}]
});
// Data Loading
import 'highcharts/modules/data';
const dataChart = Highcharts.chart('container', {
data: {
csvURL: 'https://example.com/data.csv',
firstRowAsNames: true,
complete: function(options) {
console.log('Data loaded:', options);
}
},
title: { text: 'Data from CSV' }
});
// Boost for Large Datasets
import 'highcharts/modules/boost';
const boostChart = Highcharts.chart('container', {
boost: {
enabled: true,
seriesThreshold: 1000
},
plotOptions: {
series: {
boostThreshold: 1000
}
},
series: [{
data: generateLargeDataset(100000) // Large dataset
}]
});
// Annotations
import 'highcharts/modules/annotations';
const annotatedChart = Highcharts.chart('container', {
annotations: [{
labels: [{
point: { x: 2, y: 50 },
text: 'Important Point'
}],
shapes: [{
type: 'circle',
point: { x: 2, y: 50 },
r: 10
}]
}],
series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0] }]
});
// Add annotation dynamically
annotatedChart.addAnnotation({
labels: [{
point: { x: 4, y: 144 },
text: 'Peak Value'
}]
});
// Drilldown
import 'highcharts/modules/drilldown';
const drilldownChart = Highcharts.chart('container', {
series: [{
name: 'Categories',
colorByPoint: true,
data: [{
name: 'Category A',
y: 61.41,
drilldown: 'category-a'
}, {
name: 'Category B',
y: 11.84,
drilldown: 'category-b'
}]
}],
drilldown: {
series: [{
name: 'Category A Details',
id: 'category-a',
data: [
['Sub A1', 24.13],
['Sub A2', 17.2],
['Sub A3', 8.11]
]
}, {
name: 'Category B Details',
id: 'category-b',
data: [
['Sub B1', 5.84],
['Sub B2', 3.0],
['Sub B3', 3.0]
]
}]
}
});
// Full Screen
import 'highcharts/modules/full-screen';
const fullScreenChart = Highcharts.chart('container', {
exporting: {
buttons: {
contextButton: {
menuItems: ['viewFullscreen', 'separator', 'downloadPNG']
}
}
},
series: [{ data: [1, 2, 3, 4, 5] }]
});
// Toggle full screen programmatically
fullScreenChart.fullscreen.toggle();
// No Data Display
import 'highcharts/modules/no-data-to-display';
const emptyChart = Highcharts.chart('container', {
lang: {
noData: 'No data available'
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px',
color: '#303030'
}
},
series: [] // Empty series
});
emptyChart.showNoData('Custom no data message');