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
Default series type for the chart
chart: {
type: 'column' // 'line', 'bar', 'pie', 'scatter', etc.
}
chart.renderTo
The HTML element where the chart will be rendered
chart: {
renderTo: 'container' // Element ID or DOM element
}
chart.width
Explicit pixel width of the chart. If null, uses container width.
chart: {
width: 800 // Fixed width
}
chart.height
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
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
Corner radius of the outer chart border
chart: {
borderWidth: 1,
borderRadius: 10
}
chart.plotBackgroundColor
chart.plotBackgroundColor
Background color for the plot area (where the data is rendered)
chart: {
plotBackgroundColor: '#fffef0'
}
chart.plotBorderWidth
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
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.marginRight
chart.marginBottom
chart.marginLeft
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
Whether to reflow the chart when the window is resized
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: {
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
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);
}
}
}
ts/Core/Chart/ChartOptions.ts:83
3D Options
chart.options3d
chart: {
options3d: {
enabled: true,
alpha: 15,
beta: 30,
depth: 300,
viewDistance: 25
}
}
Advanced Options
chart.inverted
Whether to invert the axes so X is vertical and Y is horizontal
chart: {
inverted: true // Creates horizontal bar chart from column
}
chart.polar
Whether the chart is a polar chart
chart.alignTicks
Whether to align tick marks on multiple axes
chart.ignoreHiddenSeries
Whether hidden series should affect axis extremes
chart: {
ignoreHiddenSeries: false // Hidden series still affect scale
}
chart.parallel Coordinates
chart.parallelCoordinates
Enable parallel coordinates chart type
chart: {
parallelCoordinates: true,
parallelAxes: {
lineWidth: 2
}
}
Make the plot area scrollable for large datasets
chart: {
scrollablePlotArea: {
minWidth: 700,
scrollPositionX: 1,
opacity: 0.85
}
}
Export & Print Options
chart.printMaxWidth
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
