Comprehensive system for managing data series, supporting 80+ chart types from basic line/column charts to advanced financial indicators and geographic visualizations.
The Series class represents a data series within a chart, handling data, rendering, and interactions.
class Series {
/** Series name displayed in legend */
name: string;
/** Series data points */
data: Array<Point>;
/** Series configuration options */
options: SeriesOptionsType;
/** Chart that contains this series */
chart: Chart;
/** Series type (line, column, pie, etc.) */
type: string;
/** Series visibility state */
visible: boolean;
/** Series color */
color: ColorString;
/** Series index in chart */
index: number;
/** Legend item for this series */
legendItem: LegendItem;
/** SVG group containing series elements */
group: SVGElement;
/** Series graph/line element */
graph: SVGElement;
/** Area fill element (for area series) */
area: SVGElement;
}Methods for adding, updating, and removing data points from series.
class Series {
/**
* Add a single data point to the series
* @param options - Point configuration or numeric value
* @param redraw - Whether to redraw chart immediately
* @param shift - Whether to remove first point (for shifting)
* @param animation - Animation options
*/
addPoint(options: number | PointOptionsObject, redraw?: boolean, shift?: boolean, animation?: boolean | AnimationOptionsObject): void;
/**
* Replace all series data
* @param data - Array of data values or point configurations
* @param redraw - Whether to redraw chart immediately
* @param animation - Animation options
* @param updatePoints - Whether to update existing points
*/
setData(data: Array<number | PointOptionsObject | Array<number>>, redraw?: boolean, animation?: boolean | AnimationOptionsObject, updatePoints?: boolean): void;
/**
* Remove the series from the chart
* @param redraw - Whether to redraw chart immediately
* @param animation - Animation options
* @param withEvent - Whether to fire series remove event
*/
remove(redraw?: boolean, animation?: boolean | AnimationOptionsObject, withEvent?: boolean): void;
/**
* Update series options
* @param options - New series options
* @param redraw - Whether to redraw chart immediately
*/
update(options: SeriesOptionsType, redraw?: boolean): void;
}The Point class represents individual data points within a series.
class Point {
/** Point's series */
series: Series;
/** Point category (x-axis value) */
category: string | number;
/** Point color */
color: ColorString;
/** Point x coordinate */
x: number;
/** Point y coordinate */
y: number;
/** Point configuration options */
options: PointOptionsObject;
/** Point selection state */
selected: boolean;
/** Point visibility state */
visible: boolean;
/** Point name/label */
name: string;
/** Point index in series */
index: number;
/** SVG graphic element for point */
graphic: SVGElement;
/** Data label element */
dataLabel: SVGElement;
}Methods for manipulating individual data points.
class Point {
/**
* Update point options and value
* @param options - New point options or numeric value
* @param redraw - Whether to redraw chart immediately
* @param animation - Animation options
*/
update(options: number | PointOptionsObject, redraw?: boolean, animation?: boolean | AnimationOptionsObject): void;
/**
* Remove point from series
* @param redraw - Whether to redraw chart immediately
* @param animation - Animation options
*/
remove(redraw?: boolean, animation?: boolean | AnimationOptionsObject): void;
/**
* Select or deselect the point
* @param selected - Whether point should be selected
* @param accumulate - Whether to add to existing selection
*/
select(selected?: boolean, accumulate?: boolean): void;
/**
* Get point's SVG path for markers/shapes
* @returns SVG path string
*/
getPath(): string;
/**
* Show point (make visible)
*/
show(): void;
/**
* Hide point (make invisible)
*/
hide(): void;
}Methods for controlling series visibility and state.
class Series {
/**
* Show the series
* @param redraw - Whether to redraw chart immediately
*/
show(redraw?: boolean): void;
/**
* Hide the series
* @param redraw - Whether to redraw chart immediately
*/
hide(redraw?: boolean): void;
/**
* Set series visibility
* @param visible - Whether series should be visible
* @param redraw - Whether to redraw chart immediately
*/
setVisible(visible?: boolean, redraw?: boolean): void;
/**
* Select all points in series
* @param selected - Whether points should be selected
*/
select(selected?: boolean): void;
/**
* Get extremes (min/max values) for the series
* @returns Object with dataMin, dataMax, etc.
*/
getExtremes(): DataExtremesObject;
}Highcharts supports 80+ different series types for various data visualization needs.
Standard chart types for common data visualization scenarios.
// Line series options
interface LineSeriesOptions extends SeriesOptions {
type: 'line';
data?: Array<number | PointOptionsObject | Array<number>>;
lineWidth?: number;
dashStyle?: DashStyleValue;
marker?: MarkerOptions;
step?: string;
}
// Column series options
interface ColumnSeriesOptions extends SeriesOptions {
type: 'column';
data?: Array<number | PointOptionsObject>;
borderWidth?: number;
borderColor?: ColorString;
grouping?: boolean;
pointPadding?: number;
groupPadding?: number;
}
// Area series options
interface AreaSeriesOptions extends SeriesOptions {
type: 'area';
data?: Array<number | PointOptionsObject | Array<number>>;
fillColor?: ColorType;
fillOpacity?: number;
lineWidth?: number;
threshold?: number;
}
// Pie series options
interface PieSeriesOptions extends SeriesOptions {
type: 'pie';
data?: Array<number | PointOptionsObject>;
size?: number | string;
innerSize?: number | string;
startAngle?: number;
endAngle?: number;
slicedOffset?: number;
}Specialized chart types for financial and stock market data.
// Candlestick series options
interface CandlestickSeriesOptions extends SeriesOptions {
type: 'candlestick';
data?: Array<Array<number>>; // [timestamp, open, high, low, close]
upColor?: ColorString;
upLineColor?: ColorString;
color?: ColorString; // down color
lineColor?: ColorString; // down line color
}
// OHLC series options
interface OHLCSeriesOptions extends SeriesOptions {
type: 'ohlc';
data?: Array<Array<number>>; // [timestamp, open, high, low, close]
groupPixelWidth?: number;
tickLength?: number;
}Advanced chart types for specific visualization needs.
// Heatmap series options
interface HeatmapSeriesOptions extends SeriesOptions {
type: 'heatmap';
data?: Array<Array<number>>; // [x, y, value]
colsize?: number;
rowsize?: number;
nullColor?: ColorString;
}
// Treemap series options
interface TreemapSeriesOptions extends SeriesOptions {
type: 'treemap';
data?: Array<TreemapPointOptions>;
layoutAlgorithm?: string;
layoutStartingDirection?: string;
alternateStartingDirection?: boolean;
levelIsConstant?: boolean;
levels?: Array<TreemapLevelOptions>;
}
// Networkgraph series options
interface NetworkgraphSeriesOptions extends SeriesOptions {
type: 'networkgraph';
data?: Array<NetworkgraphPointOptions>;
layoutAlgorithm?: string;
integration?: string;
link?: NetworkgraphLinkOptions;
}Highcharts supports various data formats for flexible data input.
// Simple numeric data
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
}]
// X-Y coordinate pairs
series: [{
data: [[0, 29.9], [1, 71.5], [2, 106.4]]
}]interface PointOptionsObject {
/** Point name */
name?: string;
/** Point x-value */
x?: number;
/** Point y-value */
y?: number;
/** Point color */
color?: ColorType;
/** Point marker options */
marker?: MarkerOptions;
/** Point data labels */
dataLabels?: DataLabelsOptions;
/** Point events */
events?: PointEventsOptions;
/** Point ID */
id?: string;
/** Custom point properties */
[key: string]: any;
}
// Point configuration example
series: [{
data: [
{ name: 'Point 1', y: 29.9, color: '#ff0000' },
{ name: 'Point 2', y: 71.5, color: '#00ff00' },
{ name: 'Point 3', y: 106.4, color: '#0000ff' }
]
}]// Time-based data points
series: [{
data: [
[Date.UTC(2023, 0, 1), 29.9],
[Date.UTC(2023, 1, 1), 71.5],
[Date.UTC(2023, 2, 1), 106.4]
]
}]
// With point configuration
series: [{
data: [
{ x: Date.UTC(2023, 0, 1), y: 29.9, name: 'January' },
{ x: Date.UTC(2023, 1, 1), y: 71.5, name: 'February' }
]
}]System for registering and managing different series types.
class SeriesRegistry {
/**
* Register a new series type
* @param type - Series type name
* @param parent - Parent series type to extend
* @param options - Default series options
* @param props - Series prototype properties
* @param pointProps - Point prototype properties
*/
static registerSeriesType(type: string, parent: string, options: SeriesOptionsType, props?: Dictionary<any>, pointProps?: Dictionary<any>): void;
/**
* Get series constructor by type
* @param type - Series type name
* @returns Series constructor function
*/
static getSeriesType(type: string): Class<Series>;
/** Object containing all registered series types */
static seriesTypes: Dictionary<Class<Series>>;
}
// Register custom series type
function seriesType(type: string, parent: string, options: SeriesOptionsType | Dictionary<any>, props?: Dictionary<any>, pointProps?: Dictionary<any>): Series;Usage Examples:
// Basic series operations
const chart = Highcharts.chart('container', {
series: [{
name: 'Temperature',
data: [20, 22, 25, 27, 23, 19]
}]
});
// Add data dynamically
chart.series[0].addPoint(24);
chart.series[0].addPoint([6, 26]); // x=6, y=26
// Update entire dataset
chart.series[0].setData([18, 20, 22, 24, 26, 28, 25]);
// Add new series
chart.addSeries({
name: 'Humidity',
type: 'column',
data: [65, 70, 80, 75, 60, 55]
});
// Point manipulation
const point = chart.series[0].data[0];
point.update({ y: 30, color: '#ff0000' });
point.select(true);
point.remove();
// Series visibility
chart.series[0].hide();
chart.series[0].show();
chart.series[0].setVisible(false);