highcharts

Highcharts Enterprise Charting Skill

Create professional, enterprise-grade interactive charts with Highcharts - trusted by Fortune 500 companies worldwide.

When to Use This Skill

Use Highcharts when you need:

Enterprise features - Stock charts, Gantt charts, network diagrams
Accessibility - WCAG compliant, screen reader support
Financial charts - Advanced stock/trading visualizations
Professional quality - Polished, production-ready charts
Export capabilities - PDF, PNG, SVG, Excel exports built-in
Commercial support - Professional licensing and support available

License Note: Highcharts is free for non-commercial use. Commercial use requires a license.

Avoid when:

Budget constraints (use Chart.js or ECharts)
Maximum customization needed (use D3.js)
Only need basic charts (use Chart.js)

Core Capabilities

Basic Line Chart

<!DOCTYPE html> <html> <head> <script src="https://code.highcharts.com/highcharts.js"></script> </head> <body> <div id="container" style="width: 100%; height: 400px;"></div> <script> Highcharts.chart('container', { title: { text: 'Monthly Sales' }, subtitle: { text: 'Source: Sales Department' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] }, yAxis: { title: { text: 'Sales (units)' } }, series: [{ name: 'Product A', data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0] }], credits: { enabled: false } }); </script> </body> </html>

Column Chart with Multiple Series

Highcharts.chart('container', { chart: { type: 'column' }, title: { text: 'Quarterly Revenue Comparison' }, xAxis: { categories: ['Q1', 'Q2', 'Q3', 'Q4'] }, yAxis: { min: 0, title: { text: 'Revenue (thousands)' } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: [{ name: '2023', data: [49.9, 71.5, 106.4, 129.2] }, { name: '2024', data: [83.6, 78.8, 98.5, 93.4] }] });

Pie Chart with Drilldown

Highcharts.chart('container', { chart: { type: 'pie' }, title: { text: 'Browser Market Share' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, accessibility: { point: { valueSuffix: '%' } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %' }, showInLegend: true } }, series: [{ name: 'Share', colorByPoint: true, data: [{ name: 'Chrome', y: 61.41, sliced: true, selected: true }, { name: 'Firefox', y: 11.84 }, { name: 'Edge', y: 4.67 }, { name: 'Safari', y: 4.18 }, { name: 'Other', y: 17.9 }] }] });

Complete Examples

Example 1: Stock Chart with Time Series

for (let i = 1; i &#x3C; lines.length; i++) {
  const row = lines[i].split(',');
  if (row.length >= 2) {
    const date = new Date(row[0]).getTime();
    const price = parseFloat(row[1]);
    data.push([date, price]);
  }
}

Highcharts.stockChart('container', {
  rangeSelector: {
    selected: 1
  },
  title: {
    text: 'Stock Price History'
  },
  series: [{
    name: 'Price',
    data: data,
    tooltip: {
      valueDecimals: 2
    }
  }],
  navigator: {
    enabled: true
  },
  scrollbar: {
    enabled: true
  }
});

}); </script>

Example 2: Combination Chart (Column + Line)

Highcharts.chart('container', { title: { text: 'Sales vs Profit Margin' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] }, yAxis: [{ title: { text: 'Sales' } }, { title: { text: 'Profit Margin (%)' }, opposite: true }], tooltip: { shared: true }, series: [{ type: 'column', name: 'Sales', data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0] }, { type: 'spline', name: 'Profit Margin', yAxis: 1, data: [15.2, 16.8, 18.9, 19.3, 20.1, 21.4], marker: { enabled: true }, dashStyle: 'shortdot' }] });

Example 3: Heatmap

Highcharts.chart('container', { chart: { type: 'heatmap' }, title: { text: 'Sales per employee per weekday' }, xAxis: { categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'] }, yAxis: { categories: ['Employee 1', 'Employee 2', 'Employee 3', 'Employee 4', 'Employee 5'], title: null }, colorAxis: { min: 0, minColor: '#FFFFFF', maxColor: Highcharts.getOptions().colors[0] }, legend: { align: 'right', layout: 'vertical', margin: 0, verticalAlign: 'top', y: 25, symbolHeight: 280 }, tooltip: { formatter: function () { return '<b>' + this.series.yAxis.categories[this.point.y] + '</b> sold <br><b>' + this.point.value + '</b> items on <br><b>' + this.series.xAxis.categories[this.point.x] + '</b>'; } }, series: [{ name: 'Sales per employee', borderWidth: 1, data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115]], dataLabels: { enabled: true, color: '#000000' } }] });

Example 4: Gantt Chart

Example 5: 3D Chart

Example 6: Live Updating Chart

Highcharts.chart('container', { chart: { type: 'spline', animation: Highcharts.svg, marginRight: 10, events: { load: function () { var series = this.series[0]; setInterval(function () { var x = (new Date()).getTime(), y = Math.random() * 100; series.addPoint([x, y], true, true); }, 1000); } } }, time: { useUTC: false }, title: { text: 'Live Random Data' }, xAxis: { type: 'datetime', tickPixelInterval: 150 }, yAxis: { title: { text: 'Value' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { headerFormat: '<b>{series.name}</b><br/>', pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}' }, legend: { enabled: false }, exporting: { enabled: false }, series: [{ name: 'Random data', data: (function () { var data = [], time = (new Date()).getTime(), i;

  for (i = -19; i &#x3C;= 0; i += 1) {
    data.push({
      x: time + i * 1000,
      y: Math.random() * 100
    });
  }
  return data;
}())

}] });

Best Practices

Enable Accessibility

Highcharts.chart('container', { accessibility: { enabled: true, description: 'Chart showing sales trends over time', keyboardNavigation: { enabled: true } }, // ... rest of config });

Customize Tooltips

tooltip: { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y.toFixed(2); } }

Use Responsive Options

Highcharts.chart('container', { chart: { height: (9 / 16 * 100) + '%' // 16:9 ratio }, responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { legend: { align: 'center', verticalAlign: 'bottom', layout: 'horizontal' }, yAxis: { labels: { align: 'left', x: 0, y: -5 }, title: { text: null } } } }] } });

Export Functionality

exporting: { enabled: true, buttons: { contextButton: { menuItems: [ 'downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadSVG', 'separator', 'downloadCSV', 'downloadXLS' ] } } }

Chart Types Available

Basic Charts

Line, Spline, Area, Column, Bar, Pie, Scatter

Advanced Charts

Stock charts, Gantt charts, Heatmap, Treemap, Network graphs

Financial Charts

Candlestick, OHLC, Flags

Statistical Charts

Box plot, Error bars, Histogram, Bell curve

3D Charts

3D Column, 3D Pie, 3D Scatter

Maps

Map chart, Mapbubble, Mapline, Tilemap

Installation

CDN

<script src="https://code.highcharts.com/highcharts.js"></script>

<script src="https://code.highcharts.com/stock/highstock.js"></script>

<script src="https://code.highcharts.com/maps/highmaps.js"></script>

<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>

<script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <script src="https://code.highcharts.com/modules/accessibility.js"></script>

NPM

npm install highcharts

import Highcharts from 'highcharts'; import HighchartsStock from 'highcharts/modules/stock'; import HighchartsMap from 'highcharts/modules/map';

HighchartsStock(Highcharts); HighchartsMap(Highcharts);

TypeScript Support

import * as Highcharts from 'highcharts';

const options: Highcharts.Options = { title: { text: 'TypeScript Example' }, series: [{ type: 'line', data: [1, 2, 3, 4, 5] }] };

Highcharts.chart('container', options);

Advanced Features

Boost Module (Large Datasets)

Annotations

annotations: [{ labels: [{ point: { x: 3, y: 50, xAxis: 0, yAxis: 0 }, text: 'Important milestone' }], labelOptions: { backgroundColor: 'rgba(255,255,255,0.5)', borderColor: 'silver' } }]

Drill-down

Theming

// Apply custom theme Highcharts.setOptions({ colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00'], chart: { backgroundColor: '#f4f4f4', style: { fontFamily: 'Arial, sans-serif' } }, title: { style: { color: '#000', font: 'bold 16px Arial' } } });

Integration Examples

With React

import { useEffect, useRef } from 'react'; import Highcharts from 'highcharts';

function HighchartsComponent({ options }) { const chartRef = useRef(null);

useEffect(() => { const chart = Highcharts.chart(chartRef.current, options);

return () => {
  chart.destroy();
};

}, [options]);

return <div ref={chartRef} />; }

With Vue

export default { props: ['options'], mounted() { this.chart = Highcharts.chart(this.$refs.chartContainer, this.options); }, beforeUnmount() { if (this.chart) { this.chart.destroy(); } }, watch: { options: { deep: true, handler(newOptions) { this.chart.update(newOptions); } } } }; </script>

Resources

Official Docs: https://www.highcharts.com/docs/
API Reference: https://api.highcharts.com/highcharts/
Demos: https://www.highcharts.com/demo
GitHub: https://github.com/highcharts/highcharts
Support: https://www.highcharts.com/support

Licensing

Free for non-commercial/personal use
Commercial license required for business use
OEM licenses available for redistribution
Visit: https://shop.highsoft.com/

Performance Tips

Use Boost module for datasets >5k points
Disable animations for real-time updates
Limit tooltip calculations
Use turboThreshold wisely
Optimize data format (avoid objects when arrays suffice)

Use this skill for enterprise-grade, professional charts with extensive features and support!

Safety Notice

Copy this and send it to your AI assistant to learn

Source Transparency

Related Skills

echarts

pandoc

mkdocs

gis