Built-in export capabilities for various formats (PNG, JPEG, PDF, SVG) and comprehensive accessibility features including keyboard navigation and screen reader support.
Methods for exporting charts to various formats and downloading functionality.
class Chart {
/**
* Export chart to specified format
* @param options - Export configuration options
* @param chartOptions - Additional chart options for export
*/
exportChart(options?: ExportingOptions, chartOptions?: Options): void;
/**
* Print the chart using browser print dialog
*/
print(): void;
/**
* Get chart as SVG string
* @param chartOptions - Additional chart options for SVG generation
* @returns SVG string representation of the chart
*/
getSVG(chartOptions?: Options): string;
/**
* Download chart as image file
* @param options - Download options including format and filename
*/
downloadChart(options?: ExportingOptions): void;
/**
* Get chart as base64 encoded data URL
* @param options - Export options
* @param chartOptions - Additional chart options
* @param callback - Callback function receiving data URL
*/
getDataURL(options?: ExportingOptions, chartOptions?: Options, callback?: Function): void;
}Comprehensive options for configuring export functionality.
interface ExportingOptions {
/** Enable exporting */
enabled?: boolean;
/** Export format */
type?: ExportingTypeValue; // 'image/png' | 'image/jpeg' | 'application/pdf' | 'image/svg+xml'
/** Export URL (for server-side export) */
url?: string;
/** Print URL */
printMaxWidth?: number;
/** Export scale */
scale?: number;
/** Chart width for export */
width?: number;
/** Chart height for export */
height?: number;
/** Export filename */
filename?: string;
/** JPEG quality (0-1) */
jpegQuality?: number;
/** PDF options */
pdf?: ExportingPdfOptions;
/** CSV options */
csv?: ExportingCsvOptions;
/** XLS options */
xls?: ExportingXlsOptions;
/** Export buttons configuration */
buttons?: ExportingButtonsOptions;
/** Menu item definitions */
menuItemDefinitions?: Dictionary<ExportingMenuObject>;
/** Use local canvas for export */
useLocalCanvas?: boolean;
/** Use multi-level headers */
useMultiLevelHeaders?: boolean;
/** Use row span for headers */
useRowspanHeaders?: boolean;
/** Allow HTML content in export */
allowHTML?: boolean;
/** Fallback to export server */
fallbackToExportServer?: boolean;
/** Error callback */
error?: ExportingErrorCallbackFunction;
/** Source width */
sourceWidth?: number;
/** Source height */
sourceHeight?: number;
/** Export lib URL */
libURL?: string;
/** Chart options for export */
chartOptions?: Options;
}
type ExportingTypeValue = 'image/png' | 'image/jpeg' | 'application/pdf' | 'image/svg+xml';
type ExportingErrorCallbackFunction = (options: ExportingOptions, error: Error) => void;Configuration for export menu buttons and custom export actions.
interface ExportingButtonsOptions {
/** Context button (hamburger menu) */
contextButton?: ExportingButtonsContextButtonOptions;
/** Custom export buttons */
[key: string]: ExportingButtonOptions;
}
interface ExportingButtonsContextButtonOptions extends ExportingButtonOptions {
/** Context button class name */
className?: string;
/** Menu items */
menuItems?: Array<string | ExportingMenuObject>;
/** Button onclick handler */
onclick?: ExportingButtonClickFunction;
/** Button symbol */
symbol?: string;
/** Button symbol options */
symbolOptions?: ExportingButtonSymbolOptions;
/** Button theme */
theme?: SVGAttributes;
/** Title key for button */
titleKey?: string;
}
interface ExportingButtonOptions {
/** Button alignment */
align?: AlignValue;
/** Button enabled state */
enabled?: boolean;
/** Button height */
height?: number;
/** Button onclick handler */
onclick?: ExportingButtonClickFunction;
/** Button symbol fill */
symbolFill?: ColorString;
/** Button symbol size */
symbolSize?: number;
/** Button symbol stroke */
symbolStroke?: ColorString;
/** Button symbol stroke width */
symbolStrokeWidth?: number;
/** Button symbol x position */
symbolX?: number;
/** Button symbol y position */
symbolY?: number;
/** Button text */
text?: string;
/** Button theme */
theme?: SVGAttributes;
/** Button title key */
titleKey?: string;
/** Button vertical alignment */
verticalAlign?: VerticalAlignValue;
/** Button width */
width?: number;
/** Button x position */
x?: number;
/** Button y position */
y?: number;
}
type ExportingButtonClickFunction = (this: Chart) => void;Configuration for server-side export functionality using Highcharts Export Server.
interface ExportingOptions {
/** Export server URL */
url?: string;
/** Export server options */
server?: ExportingServerOptions;
/** Form attributes for server export */
formAttributes?: Dictionary<string>;
/** Additional POST data */
additionalOptions?: Dictionary<any>;
}
interface ExportingServerOptions {
/** Server URL */
url?: string;
/** Request timeout */
timeout?: number;
/** HTTP method */
method?: string;
/** Custom headers */
headers?: Dictionary<string>;
}Export chart data to various formats (CSV, XLS, etc.).
interface ExportDataOptions {
/** Column header formatter */
columnHeaderFormatter?: ExportDataColumnHeaderFormatter;
/** Date format */
dateFormat?: string;
/** CSV column delimiter */
csvColumnDelimiter?: string;
/** CSV line delimiter */
csvLineDelimiter?: string;
/** Export data table caption */
tableCaption?: string | false;
/** Export data table summary */
tableSummary?: string;
/** Use local decimal point */
useLocalDecimalPoint?: boolean;
/** Use multi-level headers */
useMultiLevelHeaders?: boolean;
/** Use row span headers */
useRowspanHeaders?: boolean;
}
type ExportDataColumnHeaderFormatter = (item: Series | Axis, key?: string, keyLength?: number) => string;
// Export data methods
class Chart {
/**
* Export chart data as CSV
* @param options - CSV export options
*/
downloadCSV(options?: ExportDataOptions): void;
/**
* Export chart data as XLS
* @param options - XLS export options
*/
downloadXLS(options?: ExportDataOptions): void;
/**
* Get chart data as CSV string
* @param options - CSV options
* @returns CSV string
*/
getCSV(options?: ExportDataOptions): string;
/**
* Get chart data as data table HTML
* @param options - Table options
* @returns HTML table string
*/
getTable(options?: ExportDataOptions): string;
}Comprehensive accessibility support for screen readers and keyboard navigation.
interface AccessibilityOptions {
/** Enable accessibility module */
enabled?: boolean;
/** High contrast mode */
highContrastMode?: boolean;
/** High contrast theme */
highContrastTheme?: Options;
/** Keyboard navigation options */
keyboardNavigation?: AccessibilityKeyboardNavigationOptions;
/** Screen reader options */
screenReaderSection?: AccessibilityScreenReaderOptions;
/** Point descriptions */
point?: AccessibilityPointOptions;
/** Series descriptions */
series?: AccessibilitySeriesOptions;
/** Chart description */
description?: string;
/** Chart type description */
typeDescription?: string;
/** Custom accessibility announcements */
announceNewData?: AccessibilityAnnounceNewDataOptions;
/** Landmark verbal descriptions */
landmarkVerbosity?: AccessibilityLandmarkVerbosityValue;
}Configuration for keyboard navigation and focus management.
interface AccessibilityKeyboardNavigationOptions {
/** Enable keyboard navigation */
enabled?: boolean;
/** Focus border options */
focusBorder?: AccessibilityKeyboardNavigationFocusBorderOptions;
/** Wrap around navigation */
wrapAround?: boolean;
/** Skip null points */
skipNullPoints?: boolean;
/** Custom key handlers */
mode?: string;
/** Series navigation order */
order?: Array<string>;
}
interface AccessibilityKeyboardNavigationFocusBorderOptions {
/** Enable focus border */
enabled?: boolean;
/** Focus border style */
style?: CSSObject;
/** Focus border margin */
margin?: number;
/** Hide browser focus outline */
hideBrowserFocusOutline?: boolean;
}Configuration for screen reader compatibility and ARIA labels.
interface AccessibilityScreenReaderOptions {
/** Section element */
element?: string | HTMLDOMElement;
/** Before chart format */
beforeChartFormat?: string;
/** Before chart formatter */
beforeChartFormatter?: AccessibilityScreenReaderFormatterFunction;
/** After chart format */
afterChartFormat?: string;
/** After chart formatter */
afterChartFormatter?: AccessibilityScreenReaderFormatterFunction;
/** Before region label */
beforeRegionLabel?: string;
/** After region label */
afterRegionLabel?: string;
/** Axis range descriptions */
axisRangeDateFormat?: string;
}
type AccessibilityScreenReaderFormatterFunction = (chart: Chart) => string;Configuration for describing individual points and series to screen readers.
interface AccessibilityPointOptions {
/** Point description format */
descriptionFormat?: string;
/** Point description formatter */
descriptionFormatter?: AccessibilityPointDescriptionFormatterFunction;
/** Value description format */
valueDescriptionFormat?: string;
/** Value prefix */
valuePrefix?: string;
/** Value suffix */
valueSuffix?: string;
/** Date format */
dateFormat?: string;
/** Date formatter */
dateFormatter?: AccessibilityPointDateFormatterFunction;
}
interface AccessibilitySeriesOptions {
/** Series description format */
descriptionFormat?: string;
/** Series description formatter */
descriptionFormatter?: AccessibilitySeriesDescriptionFormatterFunction;
/** Point description threshold */
pointDescriptionEnabledThreshold?: number | false;
}
type AccessibilityPointDescriptionFormatterFunction = (point: Point) => string;
type AccessibilitySeriesDescriptionFormatterFunction = (series: Series) => string;
type AccessibilityPointDateFormatterFunction = (point: Point) => string;Audio representation of chart data for accessibility.
interface SonificationOptions {
/** Enable sonification */
enabled?: boolean;
/** Default instrument options */
defaultInstrumentOptions?: SonificationDefaultInstrumentOptions;
/** Default speech options */
defaultSpeechOptions?: SonificationDefaultSpeechOptions;
/** Global tracks */
globalTracks?: Array<SonificationGlobalTrackOptions>;
/** Event options */
events?: SonificationEventsOptions;
/** Duration of sonification */
duration?: number;
/** After series wait time */
afterSeriesWait?: number;
/** Master volume */
masterVolume?: number;
/** Order of series */
order?: string;
/** Point grouping */
pointGrouping?: SonificationPointGroupingOptions;
}
// Sonification methods
class Chart {
/**
* Play sonification of chart data
* @param options - Sonification options
*/
sonify(options?: SonificationOptions): void;
/**
* Cancel current sonification
*/
cancelSonify(): void;
/**
* Pause sonification
*/
pauseSonify(): void;
/**
* Resume sonification
*/
resumeSonify(): void;
}Usage Examples:
// Comprehensive export configuration
const exportChart = Highcharts.chart('container', {
exporting: {
enabled: true,
type: 'image/png',
scale: 2,
filename: 'my-chart',
buttons: {
contextButton: {
menuItems: [
'viewFullscreen',
'printChart',
'separator',
'downloadPNG',
'downloadJPEG',
'downloadPDF',
'downloadSVG',
'separator',
'downloadCSV',
'downloadXLS'
]
},
customButton: {
text: 'Custom Export',
onclick: function() {
this.exportChart({
type: 'image/png',
width: 1200,
height: 800
});
}
}
},
chartOptions: {
title: {
text: 'Exported Chart'
}
}
},
series: [{ data: [1, 2, 3, 4, 5] }]
});
// Accessibility configuration
const accessibleChart = Highcharts.chart('container', {
accessibility: {
enabled: true,
description: 'This chart shows sales data over time',
keyboardNavigation: {
enabled: true,
focusBorder: {
enabled: true,
style: {
color: '#0066cc',
lineWidth: 2
}
}
},
screenReaderSection: {
beforeChartFormat: '<h3>Chart: {chartTitle}</h3><p>{chartSubtitle}</p><p>{chartLongdesc}</p><p>The chart has {numSeries} data series.</p>',
afterChartFormat: '<p>End of interactive chart.</p>'
},
point: {
valueDescriptionFormat: '{value}',
descriptionFormatter: function(point) {
return point.series.name + ', ' + point.category + ': ' + point.y;
}
},
announceNewData: {
enabled: true,
minAnnounceInterval: 5000
}
},
title: {
text: 'Accessible Sales Chart'
},
series: [{
name: 'Sales',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0],
accessibility: {
description: 'Monthly sales figures showing upward trend'
}
}]
});
// Programmatic export
exportChart.exportChart({
type: 'application/pdf',
filename: 'sales-report'
});
// Get chart as SVG
const svgString = exportChart.getSVG();
console.log(svgString);
// Export data
exportChart.downloadCSV();
// Sonification example
const sonificationChart = Highcharts.chart('container', {
sonification: {
enabled: true,
duration: 3000,
defaultInstrumentOptions: {
instrument: 'sine',
minFrequency: 200,
maxFrequency: 800
}
},
series: [{ data: [1, 3, 2, 4, 3, 5, 4, 6] }]
});
// Play sonification
sonificationChart.sonify();