Documentation Index
Fetch the complete documentation index at: https://mintlify.com/highcharts/highcharts/llms.txt
Use this file to discover all available pages before exploring further.
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
