Chart Configuration Options

Complete reference for Highcharts chart configuration options

Chart Configuration Options

The chart option controls the rendering container, dimensions, appearance, and behavior of the chart itself.

Source: ts/Core/Chart/ChartOptions.ts

Basic Configuration

Highcharts.chart('container', {
  chart: {
    type: 'line',
    width: 800,
    height: 400,
    backgroundColor: '#f0f0f0'
  }
});

Rendering Options

chart.type

chart.type · string · default: "line"

Default series type for the chart

chart: {
  type: 'column'  // 'line', 'bar', 'pie', 'scatter', etc.
}

chart.renderTo

chart.renderTo · string | HTMLElement

The HTML element where the chart will be rendered

chart: {
  renderTo: 'container'  // Element ID or DOM element
}

chart.width

chart.width · number | null

Explicit pixel width of the chart. If null, uses container width.

chart: {
  width: 800  // Fixed width
}

chart.height

chart.height · number | null

Explicit pixel height of the chart. If null, uses container height or defaults to 400px.

chart: {
  height: 600  // Fixed height
}

Appearance Options

chart.backgroundColor

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

Background color or gradient for the outer chart area

chart: {
  backgroundColor: '#f8f8f8',
  // Or gradient
  backgroundColor: {
    linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
    stops: [
      [0, '#ffffff'],
      [1, '#e0e0e0']
    ]
  }
}

chart.borderWidth

chart.borderWidth · number · default: "0"

Width of the outer chart border in pixels

chart: {
  borderWidth: 2,
  borderColor: '#cccccc'
}

chart.borderColor

chart.borderColor · ColorType · default: "#335cad"

Color of the outer chart border

chart.borderRadius

chart.borderRadius · number · default: "0"

Corner radius of the outer chart border

chart: {
  borderWidth: 1,
  borderRadius: 10
}

chart.plotBackgroundColor

chart.plotBackgroundColor · ColorType

Background color for the plot area (where the data is rendered)

chart: {
  plotBackgroundColor: '#fffef0'
}

chart.plotBorderWidth

chart.plotBorderWidth · number · default: "0"

Width of the plot area border

chart: {
  plotBorderWidth: 1,
  plotBorderColor: '#cccccc'
}

chart.plotBorderColor

chart.plotBorderColor · ColorType · default: "#cccccc"

Color of the plot area border

chart.className

chart.className · string

CSS class name to apply to the chart container

chart: {
  className: 'my-custom-chart'
}

Spacing & Margins

chart.margin

chart.margin · number | [number, number, number, number]

Margin around the chart. Can be a single number or array [top, right, bottom, left]

chart: {
  margin: [50, 50, 100, 50]  // [top, right, bottom, left]
}

chart.marginTop

chart.marginTop · number

Top margin in pixels

chart.marginRight

chart.marginRight · number

Right margin in pixels

chart.marginBottom

chart.marginBottom · number

Bottom margin in pixels

chart.marginLeft

chart.marginLeft · number

Left margin in pixels

chart.spacing

chart.spacing · [number, number, number, number] · default: "[10, 10, 15, 10]"

Space between the chart border and the plot area [top, right, bottom, left]

chart: {
  spacing: [20, 20, 20, 20]
}

Interaction Options

chart.animation

chart.animation · boolean | AnimationOptions · default: "true"

Enable or configure chart animations

chart: {
  animation: false,  // Disable
  // Or configure
  animation: {
    duration: 1000,
    easing: 'easeOutBounce'
  }
}

chart.reflow

chart.reflow · boolean · default: "true"

Whether to reflow the chart when the window is resized

chart: {
  reflow: true
}

chart.panning

chart.panning · boolean | object · default: "false"

Enable panning in the chart

chart: {
  panning: {
    enabled: true,
    type: 'x'  // 'x', 'y', or 'xy'
  }
}

chart.zooming

chart.zooming · object

Zooming configuration

chart: {
  zooming: {
    type: 'x',  // 'x', 'y', or 'xy'
    mouseWheel: {
      enabled: true,
      sensitivity: 1.1
    },
    resetButton: {
      theme: {
        fill: '#white',
        stroke: '#cccccc'
      },
      position: {
        align: 'right',
        x: -10,
        y: 10
      }
    }
  }
}

chart.events

chart.events · object

Event handlers for chart-level events

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('Chart clicked at', event.xAxis[0].value);
    },
    selection: function(event) {
      console.log('Selected range:', event.xAxis[0].min, event.xAxis[0].max);
      return false; // Prevent default zoom
    },
    addSeries: function(event) {
      console.log('Series added:', event.options);
    }
  }
}

Source: ts/Core/Chart/ChartOptions.ts:83

3D Options

chart.options3d

chart.options3d · object

3D chart configuration

chart: {
  options3d: {
    enabled: true,
    alpha: 15,
    beta: 30,
    depth: 300,
    viewDistance: 25
  }
}

Advanced Options

chart.inverted

chart.inverted · boolean · default: "false"

Whether to invert the axes so X is vertical and Y is horizontal

chart: {
  inverted: true  // Creates horizontal bar chart from column
}

chart.polar

chart.polar · boolean · default: "false"

Whether the chart is a polar chart

chart: {
  polar: true
}

chart.alignTicks

chart.alignTicks · boolean · default: "true"

Whether to align tick marks on multiple axes

chart.ignoreHiddenSeries

chart.ignoreHiddenSeries · boolean · default: "true"

Whether hidden series should affect axis extremes

chart: {
  ignoreHiddenSeries: false  // Hidden series still affect scale
}

chart.parallel Coordinates

chart.parallelCoordinates · boolean · default: "false"

Enable parallel coordinates chart type

chart: {
  parallelCoordinates: true,
  parallelAxes: {
    lineWidth: 2
  }
}

chart.scrollablePlotArea

chart.scrollablePlotArea · object

Make the plot area scrollable for large datasets

chart: {
  scrollablePlotArea: {
    minWidth: 700,
    scrollPositionX: 1,
    opacity: 0.85
  }
}

Export & Print Options

chart.printMaxWidth

chart.printMaxWidth · number · default: "780"

Maximum width for the chart when printing

chart: {
  printMaxWidth: 600
}

Complete Example

Highcharts.chart('container', {
  chart: {
    type: 'line',
    width: 800,
    height: 400,
    
    // Appearance
    backgroundColor: {
      linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
      stops: [
        [0, '#ffffff'],
        [1, '#f0f0f0']
      ]
    },
    borderWidth: 2,
    borderColor: '#cccccc',
    borderRadius: 10,
    
    plotBackgroundColor: '#fffef0',
    plotBorderWidth: 1,
    plotBorderColor: '#cccccc',
    
    // Spacing
    margin: [70, 50, 100, 80],
    spacing: [10, 10, 15, 10],
    
    // Interaction
    animation: {
      duration: 1000
    },
    
    zooming: {
      type: 'x',
      mouseWheel: {
        enabled: true
      }
    },
    
    panning: {
      enabled: true,
      type: 'x'
    },
    
    // Events
    events: {
      load: function() {
        console.log('Chart loaded at', new Date());
      },
      selection: function(event) {
        const min = event.xAxis[0].min;
        const max = event.xAxis[0].max;
        console.log('Selected range:', min, max);
      },
      click: function(event) {
        console.log('Clicked at:', event.xAxis[0].value);
      }
    },
    
    // Behavior
    reflow: true,
    ignoreHiddenSeries: true,
    alignTicks: true
  },
  
  title: {
    text: 'Fully Configured Chart'
  },
  
  series: [{
    data: [1, 3, 2, 4, 5, 4, 6, 7, 6, 5]
  }]
});

See Also

• Chart Class API - Chart methods and properties
• Responsive Options - Responsive configuration
• Events API - Chart events
• Series Options - Series configuration