Series Types and Data

Understand Highcharts series configuration, data formats, and how to work with different series types.

Series Types and Data

Series are the heart of any Highcharts chart. They represent the data to be visualized and determine how that data appears on the chart.

Understanding Series

A series is a collection of data points that share common properties and are visualized together. Each chart can contain multiple series.

series: [{
    name: 'Series 1',
    type: 'line',
    data: [1, 2, 3, 4, 5]
}, {
    name: 'Series 2',
    type: 'column',
    data: [2, 3, 4, 5, 6]
}]

Series Configuration

Basic Configuration

Essential series options from the TypeScript SeriesOptions interface:

interface SeriesOptions {
    type?: string;              // Series type: 'line', 'column', etc.
    name?: string;              // Series name (appears in legend)
    data?: Array<number | [number, number] | PointOptions>;
    color?: ColorType;          // Series color
    visible?: boolean;          // Initial visibility
    showInLegend?: boolean;     // Show in legend
    events?: SeriesEventsOptions;
    animation?: AnimationOptions;
    index?: number;             // Display order
    legendIndex?: number;       // Legend order
}

Example:

series: [{
    name: 'Revenue',
    type: 'line',
    color: '#3b82f6',
    visible: true,
    showInLegend: true,
    data: [29.9, 71.5, 106.4, 129.2, 144.0]
}]

Data Formats

Highcharts supports multiple data formats for flexibility:

// Simple array of values
data: [1, 2, 3, 4, 5]

// Array of [x, y] pairs
data: [
    [0, 1],
    [1, 2],
    [2, 3]
]

// Array of point objects
data: [{
    x: 0,
    y: 1,
    name: 'Point 1',
    color: '#ff0000'
}, {
    x: 1,
    y: 2,
    name: 'Point 2',
    color: '#00ff00'
}]

// Mixed formats
data: [1, [2, 5], { y: 3, color: 'red' }, 4]

Series Events

React to series interactions with event handlers:

interface SeriesEventsOptions {
    click?: Function;           // Series click
    hide?: Function;            // Series hidden
    show?: Function;            // Series shown
    mouseOver?: Function;       // Mouse over series
    mouseOut?: Function;        // Mouse out of series
    afterAnimate?: Function;    // After initial animation
}

Example:

series: [{
    name: 'Interactive Series',
    data: [1, 2, 3],
    events: {
        click: function(event) {
            alert('Series clicked at ' + event.point.y);
        },
        hide: function() {
            console.log('Series hidden');
        },
        show: function() {
            console.log('Series shown');
        }
    }
}]

Series Types

Highcharts provides numerous series types for different visualization needs:

Line Series

Display data as connected points

{ type: 'line', data: [1, 2, 3] }

Column Series

Vertical bars for category comparison

{ type: 'column', data: [1, 2, 3] }

Bar Series

Horizontal bars for rankings

{ type: 'bar', data: [1, 2, 3] }

Area Series

Filled area under line

{ type: 'area', data: [1, 2, 3] }

Pie Series

Part-to-whole relationships

{ type: 'pie', data: [1, 2, 3] }

Scatter Series

Individual points without connection

{ type: 'scatter', data: [[1,2], [3,4]] }

Point Configuration

Individual points within a series can have custom properties:

interface PointOptions {
    x?: number;                 // X value
    y?: number;                 // Y value
    name?: string;              // Point name
    color?: ColorType;          // Point color
    marker?: PointMarkerOptions; // Custom marker
    dataLabels?: DataLabelOptions; // Custom label
    events?: PointEventsOptions;   // Point events
}

Custom Points

series: [{
    name: 'Temperature',
    data: [
        7.0,
        6.9,
        {
            y: 9.5,
            marker: {
                symbol: 'url(https://example.com/icon.png)',
                width: 20,
                height: 20
            },
            name: 'Peak',
            color: '#ff0000'
        },
        14.5,
        18.2
    ]
}]

Series Methods

Manipulate series dynamically after chart creation:

Add & Remove

// Add new series
chart.addSeries({
    name: 'New Series',
    data: [1, 2, 3]
});

// Remove series
chart.series[0].remove();

// Remove with animation disabled
chart.series[0].remove(false);

Update Data

// Update entire series data
chart.series[0].setData([5, 6, 7, 8]);

// Update with animation
chart.series[0].setData([5, 6, 7, 8], true);

// Add a point
chart.series[0].addPoint(9);

// Add point with custom options
chart.series[0].addPoint({
    y: 10,
    color: 'red'
});

Visibility

// Hide series
chart.series[0].hide();

// Show series
chart.series[0].show();

// Toggle visibility
chart.series[0].setVisible(!chart.series[0].visible);

Update Options

// Update series options
chart.series[0].update({
    name: 'Updated Name',
    color: '#ff0000',
    lineWidth: 3
});

// Update without redraw
chart.series[0].update({
    name: 'New Name'
}, false);
chart.redraw();

Data Sorting

Control how data is sorted and matched during updates:

series: [{
    name: 'Sales',
    dataSorting: {
        enabled: true,
        matchByName: true,
        sortKey: 'y'
    },
    data: [
        { name: 'Product A', y: 100 },
        { name: 'Product B', y: 200 },
        { name: 'Product C', y: 150 }
    ]
}]

dataSorting.enabled · boolean · default: false

Enable or disable data sorting for the series.

dataSorting.matchByName · boolean · default: false

Whether to allow matching points by name in an update.

dataSorting.sortKey · string · default: "y"

Determines what data value should be used to sort by.

Real-World Examples

Multi-Series Chart

Highcharts.chart('container', {
    title: {
        text: 'Monthly Sales Comparison'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    yAxis: {
        title: {
            text: 'Sales ($)'
        }
    },
    series: [{
        name: '2023',
        type: 'column',
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0]
    }, {
        name: '2024',
        type: 'column',
        data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5]
    }, {
        name: 'Average',
        type: 'spline',
        data: [66.75, 75.15, 102.45, 111.3, 125.0, 130.25],
        marker: {
            lineWidth: 2,
            fillColor: 'white'
        }
    }]
});

TypeScript Interface Reference

Key interfaces from SeriesOptions.ts:

interface SeriesOptions {
    type?: string;
    name?: string;
    data?: Array<PointShortOptions>;
    id?: string;
    index?: number;
    legendIndex?: number;
    stack?: string;
    xAxis?: number | string;
    yAxis?: number | string;
    zIndex?: number;
    visible?: boolean;
    showInLegend?: boolean;
    events?: SeriesEventsOptions;
    animation?: AnimationOptions;
    color?: ColorType;
    dataSorting?: SeriesDataSortingOptions;
}

type PointShortOptions = (
    number | 
    [number, number] | 
    [string, number] | 
    PointOptions | 
    null
);

All series extend the base SeriesOptions interface with type-specific options. For example, pie charts add slicedOffset and line charts add step options.

Best Practices

1. Performance - For large datasets (>1000 points), use the boost module
2. Data Structure - Use point objects for complex configurations, simple arrays for basic data
3. Type Safety - Leverage TypeScript interfaces for compile-time validation
4. Updates - Use setData() for complete replacements, addPoint() for incremental updates

Avoid mixing data formats within a single series. Choose one format (simple array, coordinate array, or object array) and use it consistently.

Next Steps

Axes Configuration

Configure X and Y axes for your series

Data Handling

Advanced data loading and processing

Chart Types

Explore all available chart types

API Reference

Complete series API documentation