Chart Configuration and Structure

Learn about Highcharts chart configuration, structure, and core chart options for creating interactive visualizations.

Chart Configuration and Structure

Highcharts charts are created by passing a configuration object to the chart constructor. Understanding the chart structure and configuration options is fundamental to creating effective visualizations.

Creating a Chart

The basic pattern for creating a Highcharts chart involves initializing it with a configuration object:

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Chart Title'
    },
    xAxis: {
        categories: ['Category 1', 'Category 2', 'Category 3']
    },
    yAxis: {
        title: {
            text: 'Values'
        }
    },
    series: [{
        name: 'Series 1',
        data: [1, 2, 3]
    }]
});

Chart Structure

Every Highcharts chart consists of several key components:

Chart Container

The chart object defines the chart type, dimensions, and rendering options.

interface ChartOptions {
    type?: string;           // Chart type: 'line', 'column', 'bar', etc.
    width?: number;          // Chart width in pixels
    height?: number;         // Chart height in pixels
    backgroundColor?: ColorType;
    borderWidth?: number;
    borderRadius?: number;
    events?: ChartEventsOptions;
    animation?: AnimationOptions;
    renderTo?: string | HTMLDOMElement;
    polar?: boolean;         // Enable polar chart
    zoomType?: 'x' | 'y' | 'xy';  // Enable zooming
}

Key Properties:

• type - Default series type for the chart
• renderTo - DOM element ID where chart renders
• zoomType - Enable mouse zooming on x, y, or both axes
• polar - Convert the chart to polar coordinates

Title & Subtitle

Chart titles provide context for your visualization.

title: {
    text: 'Monthly Revenue Report',
    align: 'left',
    style: {
        fontSize: '18px',
        fontWeight: 'bold'
    }
},
subtitle: {
    text: 'Source: Company Analytics',
    align: 'left'
}

Chart Events

Charts support various events for interactivity.

interface ChartEventsOptions {
    load?: Function;         // Fires when chart is loaded
    render?: Function;       // Fires after chart is rendered
    addSeries?: Function;    // Fires when series is added
    click?: Function;        // Fires on chart click
    selection?: Function;    // Fires on zoom/selection
}

Example:

chart: {
    events: {
        load: function() {
            console.log('Chart loaded');
        },
        click: function(event) {
            console.log('Clicked at:', event.xAxis[0].value);
        }
    }
}

Chart Methods

Once created, chart instances expose methods for dynamic updates:

Chart Updates

// Get chart instance
const chart = Highcharts.chart('container', options);

// Add a series
chart.addSeries({
    name: 'New Series',
    data: [5, 3, 4, 7, 2]
});

// Update chart options
chart.update({
    title: {
        text: 'Updated Title'
    }
});

// Redraw the chart
chart.redraw();

Chart Types

Highcharts supports numerous chart types through the chart.type option:

Type	Description	Use Case
line	Line chart	Trends over time
column	Vertical bars	Comparing categories
bar	Horizontal bars	Ranking data
area	Area chart	Cumulative values
pie	Pie chart	Part-to-whole relationships
scatter	Scatter plot	Correlation analysis
bubble	Bubble chart	Three-dimensional data
heatmap	Heat map	Matrix data visualization

The chart type can be set globally with chart.type or overridden per series with series.type.

Real-World Example

Here’s a complete chart configuration with multiple features:

Highcharts.chart('container', {
    chart: {
        type: 'column',
        backgroundColor: '#f9f9f9',
        borderRadius: 8,
        events: {
            load: function() {
                this.renderer.text(
                    'Custom watermark',
                    100,
                    100
                ).add();
            }
        }
    },
    title: {
        text: 'Corn vs Wheat Production for 2023',
        align: 'left'
    },
    subtitle: {
        text: 'Source: Agriculture Statistics',
        align: 'left'
    },
    xAxis: {
        categories: ['USA', 'China', 'Brazil', 'EU', 'Argentina', 'India'],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: '1000 metric tons (MT)'
        }
    },
    tooltip: {
        valueSuffix: ' (1000 MT)'
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Corn',
        data: [387749, 280000, 129000, 64300, 54000, 34300]
    }, {
        name: 'Wheat',
        data: [45321, 140000, 10000, 140500, 19500, 113500]
    }]
});

Chart Options Interface

The complete TypeScript interface from ChartOptions.ts:

chart.type · string · default: "line"

The default series type for the chart. Can be any of the chart type options.

chart.width · number

An explicit width for the chart. By default, the chart adapts to the container element’s width.

chart.height · number

An explicit height for the chart. If not set, the height is calculated from the offset height of the containing element.

chart.backgroundColor · ColorType · default: "#FFFFFF"

The background color for the chart area.

chart.zoomType · 'x' | 'y' | 'xy'

Decides in what dimensions the user can zoom by dragging the mouse.

chart.polar · boolean · default: false

When true, cartesian charts like line, spline, area, and column are transformed into the polar coordinate system.

chart.events · ChartEventsOptions

Event listeners for the chart. Events include: load, render, addSeries, click, selection.

Best Practices

Always specify a container element that exists in the DOM before initializing the chart. The chart will fail to render if the container doesn’t exist.

1. Container Setup - Ensure your container element has defined dimensions
2. Performance - Use chart.reflow() instead of recreating charts on resize
3. Accessibility - Include descriptive titles and axis labels
4. Responsive Design - Use the responsive options for mobile-friendly charts

Next Steps

Series Configuration

Learn about configuring data series

Axes

Configure chart axes and scales

Responsive Charts

Make charts responsive to screen size

Options

Explore all configuration options