Chart Class API

Complete reference for the Highcharts Chart class

Chart Class

The Chart class is the main entry point for creating and managing Highcharts visualizations. It controls rendering, updates, and lifecycle management.

Source: ts/Core/Chart/Chart.ts:285

Constructor

Highcharts.Chart()

Creates a new chart instance.

renderTo · string | HTMLElement

The DOM element to render to, or its id

options · Highcharts.Options · required

The chart configuration object

callback · Function

Function to run when the chart has loaded. Equivalent to chart.events.load

// Using element ID
const chart = new Highcharts.Chart('container', {
  title: { text: 'My Chart' },
  series: [{ data: [1, 3, 2, 4] }]
});

// Using DOM element
const element = document.getElementById('container');
const chart = new Highcharts.Chart(element, options);

// With callback
const chart = new Highcharts.Chart('container', options, function(chart) {
  console.log('Chart loaded');
});

Static Methods

Highcharts.chart()

Factory function for creating basic charts (recommended approach).

const chart = Highcharts.chart('container', {
  title: { text: 'My Chart' },
  series: [{ data: [1, 3, 2, 4] }]
});

Returns: Highcharts.Chart

Source: ts/Core/Chart/Chart.ts:333

Properties

chart.axes

axes · Array<Highcharts.Axis> · required

All axes in the chart (xAxis, yAxis, colorAxis, etc.)

chart.axes.forEach(axis => {
  console.log(axis.isXAxis ? 'X-Axis' : 'Y-Axis');
});

chart.series

series · Array<Highcharts.Series> · required

All series in the chart

chart.series.forEach(series => {
  console.log(series.name, series.data.length);
});

chart.xAxis

xAxis · Array<Highcharts.Axis>

All x-axes in the chart

// Access first x-axis
const xAxis = chart.xAxis[0];
xAxis.setExtremes(0, 100);

chart.yAxis

yAxis · Array<Highcharts.Axis>

All y-axes in the chart

chart.container

container · HTMLElement · required

The HTML container element

chart.container.style.border = '1px solid black';

chart.chartWidth

chartWidth · number · required

Current pixel width of the chart

chart.chartHeight

chartHeight · number · required

Current pixel height of the chart

chart.options

options · Highcharts.Options · required

Current chart configuration options

chart.index

index · number · required

Position in the Highcharts.charts array

Methods

chart.addSeries()

Add a new series to the chart after render time.

options · SeriesOptions · required

Series configuration object

redraw · boolean · default: "true"

Whether to redraw the chart after adding

animation · boolean | AnimationOptions

Animation options for the series

chart.addSeries({
  type: 'line',
  name: 'New Series',
  data: [1, 2, 3, 4, 5]
});

// Without redraw
chart.addSeries({ data: [5, 4, 3] }, false);
chart.addSeries({ data: [2, 3, 4] }, false);
chart.redraw(); // Redraw once

Returns: Highcharts.Series

chart.addAxis()

Add a new axis to the chart after render time.

options · AxisOptions · required

Axis configuration object

isX · boolean · default: "false"

Whether it’s an X axis (true) or Y axis (false)

redraw · boolean · default: "true"

Whether to redraw the chart

// Add secondary Y axis
chart.addAxis({
  id: 'secondary-y',
  title: { text: 'Secondary Axis' },
  opposite: true
}, false, true);

Returns: Highcharts.Axis

chart.get()

Get an axis, series, or point object by ID.

id · string · required

The ID of the object to find

const series = chart.get('sales-series');
const xAxis = chart.get('primary-x');
const point = chart.get('point-1');

Returns: Highcharts.Axis | Highcharts.Series | Highcharts.Point | undefined

chart.update()

Update the chart options after initialization.

options · Highcharts.Options · required

New chart options to merge

redraw · boolean · default: "true"

Whether to redraw the chart

oneToOne · boolean · default: "false"

Whether to update one-to-one or recursively merge

animation · boolean | AnimationOptions

Animation configuration

// Update chart title and colors
chart.update({
  title: { text: 'Updated Title' },
  colors: ['#ff0000', '#00ff00', '#0000ff']
});

// Update multiple options
chart.update({
  chart: { backgroundColor: '#f0f0f0' },
  plotOptions: {
    series: { animation: false }
  }
});

chart.redraw()

Redraw the chart after changes have been made.

animation · boolean | AnimationOptions

Animation options

// Make multiple changes without redrawing
chart.series[0].addPoint([10, 20], false);
chart.series[1].addPoint([15, 25], false);
chart.redraw(); // Single redraw

chart.reflow()

Reflow the chart to fit the container size.

// After container resize
window.addEventListener('resize', () => {
  chart.reflow();
});

chart.setSize()

Resize the chart to specific dimensions.

width · number | null

New width in pixels (null to maintain current)

height · number | null

New height in pixels (null to maintain current)

animation · boolean | AnimationOptions

Animation configuration

// Set to 800x600
chart.setSize(800, 600);

// Only change height
chart.setSize(null, 400);

// With animation
chart.setSize(1000, 500, { duration: 1000 });

chart.setTitle()

Set the chart title and subtitle.

title · TitleOptions

New title options

subtitle · SubtitleOptions

New subtitle options

redraw · boolean · default: "true"

Whether to redraw

chart.setTitle(
  { text: 'New Title' },
  { text: 'New Subtitle' }
);

chart.showLoading()

Display a loading indicator.

message · string

Custom loading message

chart.showLoading('Loading data...');

// Fetch data
fetch('/api/data')
  .then(res => res.json())
  .then(data => {
    chart.series[0].setData(data);
    chart.hideLoading();
  });

chart.hideLoading()

Hide the loading indicator.

chart.hideLoading();

chart.destroy()

Destroy the chart and free resources.

// Clean up when done
chart.destroy();

chart.zoomOut()

Zoom out from a zoomed chart.

chart.zoomOut();

Source: ts/Core/Chart/ChartBase.ts:163

chart.showResetZoom()

Display the zoom reset button.

Source: ts/Core/Chart/ChartBase.ts:156

Events

Chart events are configured in the chart.events option:

Highcharts.chart('container', {
  chart: {
    events: {
      load: function() {
        console.log('Chart loaded');
      },
      redraw: function() {
        console.log('Chart redrawn');
      },
      render: function() {
        console.log('Chart rendered');
      },
      click: function(event) {
        console.log('Clicked at', event.xAxis[0].value);
      },
      addSeries: function(event) {
        console.log('Series added:', event.options);
      }
    }
  }
});

See Events API for complete event documentation.

Example: Complete Chart Lifecycle

// Create chart
const chart = Highcharts.chart('container', {
  chart: {
    type: 'line',
    events: {
      load: function() {
        const chart = this;
        
        // Add series dynamically after 1 second
        setTimeout(() => {
          chart.addSeries({
            name: 'Dynamic Series',
            data: [5, 7, 3, 9]
          });
        }, 1000);
      }
    }
  },
  title: { text: 'Interactive Chart' },
  xAxis: { categories: ['A', 'B', 'C', 'D'] },
  series: [{
    name: 'Initial Series',
    data: [1, 3, 2, 4]
  }]
});

// Update after 2 seconds
setTimeout(() => {
  chart.update({
    title: { text: 'Updated Chart' },
    chart: { backgroundColor: '#f0f0f0' }
  });
}, 2000);

// Resize after 3 seconds
setTimeout(() => {
  chart.setSize(800, 400, true);
}, 3000);

// Clean up after 10 seconds
setTimeout(() => {
  chart.destroy();
}, 10000);

See Also

• Chart Options - Configuration reference
• Series Class - Working with data series
• Methods API - All chart methods
• Events API - Event handling