Claude Code LogoVibe Coding Guide
Back to All Skills

Highcharts

by vamseeachanta

art
View on GitHub

Create enterprise-grade interactive charts with Highcharts

Skill Details

Repository Files

1 file in this skill directory

name: highcharts version: 1.0.0 description: Create enterprise-grade interactive charts with Highcharts author: workspace-hub category: data-visualization tags: [charts, highcharts, enterprise, stock, maps, accessibility] platforms: [web, javascript, typescript]

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

1. 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>

2. 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]
  }]
});

3. 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

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

<script>
// Load stock data from CSV
fetch('../data/stock_prices.csv')
  .then(response => response.text())
  .then(csvText => {
    const lines = csvText.split('\n');
    const data = [];

    for (let i = 1; i < 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

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

<script>
Highcharts.ganttChart('container', {
  title: {
    text: 'Project Timeline'
  },
  xAxis: {
    min: Date.UTC(2024, 0, 1),
    max: Date.UTC(2024, 11, 31)
  },
  series: [{
    name: 'Project Tasks',
    data: [{
      name: 'Planning',
      start: Date.UTC(2024, 0, 1),
      end: Date.UTC(2024, 1, 15),
      completed: 1
    }, {
      name: 'Development',
      start: Date.UTC(2024, 1, 15),
      end: Date.UTC(2024, 7, 1),
      completed: 0.65,
      dependency: 'Planning'
    }, {
      name: 'Testing',
      start: Date.UTC(2024, 6, 1),
      end: Date.UTC(2024, 9, 1),
      completed: 0.3,
      dependency: 'Development'
    }, {
      name: 'Deployment',
      start: Date.UTC(2024, 9, 1),
      end: Date.UTC(2024, 10, 15),
      completed: 0,
      dependency: 'Testing'
    }]
  }]
});
</script>

Example 5: 3D Chart

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<div id="container"></div>

<script>
Highcharts.chart('container', {
  chart: {
    type: 'column',
    options3d: {
      enabled: true,
      alpha: 15,
      beta: 15,
      depth: 50,
      viewDistance: 25
    }
  },
  title: {
    text: '3D Column Chart'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
  },
  yAxis: {
    title: {
      text: 'Sales'
    }
  },
  plotOptions: {
    column: {
      depth: 25
    }
  },
  series: [{
    name: 'Sales',
    data: [29.9, 71.5, 106.4, 129.2, 144.0]
  }]
});
</script>

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 <= 0; i += 1) {
        data.push({
          x: time + i * 1000,
          y: Math.random() * 100
        });
      }
      return data;
    }())
  }]
});

Best Practices

1. Enable Accessibility

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

2. Customize Tooltips

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

3. 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
          }
        }
      }
    }]
  }
});

4. 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

<!-- Basic Highcharts -->
<script src="https://code.highcharts.com/highcharts.js"></script>

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

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

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

<!-- Additional modules -->
<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)

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

<script>
Highcharts.chart('container', {
  boost: {
    useGPUTranslations: true,
    usePreAllocated: true
  },
  series: [{
    boostThreshold: 1, // Start boosting at 1 point
    data: largeDataArray // 100,000+ points
  }]
});
</script>

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

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

<script>
Highcharts.chart('container', {
  series: [{
    data: [{
      name: 'Category A',
      y: 5,
      drilldown: 'category-a'
    }]
  }],
  drilldown: {
    series: [{
      id: 'category-a',
      data: [
        ['Subcategory 1', 2],
        ['Subcategory 2', 3]
      ]
    }]
  }
});
</script>

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

<template>
  <div ref="chartContainer"></div>
</template>

<script>
import Highcharts from 'highcharts';

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

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

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

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

View on GitHub

Related Skills

Team Composition Analysis

This skill should be used when the user asks to "plan team structure", "determine hiring needs", "design org chart", "calculate compensation", "plan equity allocation", or requests organizational design and headcount planning for a startup.

artdesign

Startup Financial Modeling

This skill should be used when the user asks to "create financial projections", "build a financial model", "forecast revenue", "calculate burn rate", "estimate runway", "model cash flow", or requests 3-5 year financial planning for a startup.

art

Startup Metrics Framework

This skill should be used when the user asks about "key startup metrics", "SaaS metrics", "CAC and LTV", "unit economics", "burn multiple", "rule of 40", "marketplace metrics", or requests guidance on tracking and optimizing business performance metrics.

art

Market Sizing Analysis

This skill should be used when the user asks to "calculate TAM", "determine SAM", "estimate SOM", "size the market", "calculate market opportunity", "what's the total addressable market", or requests market sizing analysis for a startup or business opportunity.

art

Anndata

This skill should be used when working with annotated data matrices in Python, particularly for single-cell genomics analysis, managing experimental measurements with metadata, or handling large-scale biological datasets. Use when tasks involve AnnData objects, h5ad files, single-cell RNA-seq data, or integration with scanpy/scverse tools.

arttooldata

Geopandas

Python library for working with geospatial vector data including shapefiles, GeoJSON, and GeoPackage files. Use when working with geographic data for spatial analysis, geometric operations, coordinate transformations, spatial joins, overlay operations, choropleth mapping, or any task involving reading/writing/analyzing vector geographic data. Supports PostGIS databases, interactive maps, and integration with matplotlib/folium/cartopy. Use for tasks like buffer analysis, spatial joins between dat

artdatacli

Market Research Reports

Generate comprehensive market research reports (50+ pages) in the style of top consulting firms (McKinsey, BCG, Gartner). Features professional LaTeX formatting, extensive visual generation with scientific-schematics and generate-image, deep integration with research-lookup for data gathering, and multi-framework strategic analysis including Porter's Five Forces, PESTLE, SWOT, TAM/SAM/SOM, and BCG Matrix.

artdata

Plotly

Interactive scientific and statistical data visualization library for Python. Use when creating charts, plots, or visualizations including scatter plots, line charts, bar charts, heatmaps, 3D plots, geographic maps, statistical distributions, financial charts, and dashboards. Supports both quick visualizations (Plotly Express) and fine-grained customization (graph objects). Outputs interactive HTML or static images (PNG, PDF, SVG).

artdata

Excel Analysis

Analyze Excel spreadsheets, create pivot tables, generate charts, and perform data analysis. Use when analyzing Excel files, spreadsheets, tabular data, or .xlsx files.

artdata

Neurokit2

Comprehensive biosignal processing toolkit for analyzing physiological data including ECG, EEG, EDA, RSP, PPG, EMG, and EOG signals. Use this skill when processing cardiovascular signals, brain activity, electrodermal responses, respiratory patterns, muscle activity, or eye movements. Applicable for heart rate variability analysis, event-related potentials, complexity measures, autonomic nervous system assessment, psychophysiology research, and multi-modal physiological signal integration.

arttooldata

Skill Information

Category:Creative
Version:1.0.0
Last Updated:1/25/2026