or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-features.mdaxes-scaling.mdchart-management.mdexport-accessibility.mdindex.mdinteractivity-events.mdseries-data.mdstyling-theming.md
tile.json

tessl/npm-highcharts

JavaScript charting framework for creating interactive, responsive, and visually appealing charts

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/highcharts@12.4.x

To install, run

npx @tessl/cli install tessl/npm-highcharts@12.4.0

index.mddocs/

Highcharts

Highcharts is a comprehensive JavaScript charting library that provides developers with powerful tools to create interactive, responsive, and visually appealing charts for web applications. Built on SVG rendering technology, it offers a wide range of chart types including basic charts (line, area, column, bar, pie, scatter), specialized financial charts (candlestick, OHLC), geographic visualizations (maps), and project management charts (Gantt).

Package Information

  • Package Name: highcharts
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: 
    npm install highcharts

Core Imports

ES6 Modules (Recommended)

import Highcharts from 'highcharts';

// For specialized chart packages
import Highcharts from 'highcharts/highstock';  // Financial charts
import Highcharts from 'highcharts/highmaps';   // Geographic maps
import Highcharts from 'highcharts/highcharts-gantt'; // Gantt charts

// Loading additional modules
import 'highcharts/modules/exporting';
import 'highcharts/modules/accessibility';

CommonJS

const Highcharts = require('highcharts');

// For specialized chart packages
const Highcharts = require('highcharts/highstock');
const Highcharts = require('highcharts/highmaps');
const Highcharts = require('highcharts/highcharts-gantt');

// Loading additional modules
require('highcharts/modules/exporting');
require('highcharts/modules/accessibility');

UMD (Browser)

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

Basic Usage

import Highcharts from 'highcharts';

// Create a basic line chart
Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: 'My Chart'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  },
  yAxis: {
    title: {
      text: 'Values'
    }
  },
  series: [{
    name: 'Sales',
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
  }]
});

// Create chart with callback
const chart = Highcharts.chart('container', {
  // configuration options
}, function (chart) {
  // Chart created callback
  console.log('Chart created', chart);
});

Architecture

Highcharts is built around several key components:

  • Chart Management: 
    Chart
    class manages the entire chart lifecycle, rendering, and updates
  • Series System: 
    Series
    and 
    Point
    classes handle data representation and visualization
  • Axis System: 
    Axis
    and 
    Tick
    classes manage scaling, labeling, and axis rendering
  • Rendering Engine: 
    SVGRenderer
    provides cross-browser SVG rendering capabilities
  • Interaction Layer: 
    Pointer
    and 
    Tooltip
    classes handle user interactions and feedback
  • Options System: Comprehensive configuration system covering all chart aspects
  • Module System: Extensible architecture allowing selective feature loading

Capabilities

Chart Creation and Management

Core functionality for creating, configuring, and managing chart instances with comprehensive customization options.

// Main chart creation function
function chart(options: Options, callback?: ChartCallbackFunction): Chart;
function chart(renderTo: string | HTMLDOMElement, options: Options, callback?: ChartCallbackFunction): Chart;

// Chart class for direct instantiation
class Chart {
  constructor(options: Options, callback?: ChartCallbackFunction);
  constructor(renderTo: string | HTMLDOMElement, options: Options, callback?: ChartCallbackFunction);
}

Chart Creation and Management

Series and Data Handling

Comprehensive system for managing data series, supporting 80+ chart types from basic line/column charts to advanced financial indicators and geographic visualizations.

class Series {
  addPoint(options: PointOptionsObject, redraw?: boolean, shift?: boolean, animation?: boolean | AnimationOptionsObject): void;
  setData(data: Array<PointOptionsObject>, redraw?: boolean, animation?: boolean | AnimationOptionsObject): void;
  update(options: SeriesOptionsType, redraw?: boolean): void;
  remove(redraw?: boolean): void;
}

class Point {
  update(options: PointOptionsObject, redraw?: boolean, animation?: boolean | AnimationOptionsObject): void;
  remove(redraw?: boolean, animation?: boolean | AnimationOptionsObject): void;
  select(selected?: boolean, accumulate?: boolean): void;
}

Series and Data Handling

Axes and Scaling

Flexible axis system supporting linear, logarithmic, datetime, and category axes with extensive customization for labels, ticks, plot lines, and scaling.

class Axis {
  addPlotBand(options: AxisPlotBandsOptions): PlotLineOrBand;
  addPlotLine(options: AxisPlotLinesOptions): PlotLineOrBand;
  setExtremes(min?: number, max?: number, redraw?: boolean, animation?: boolean | AnimationOptionsObject): void;
  update(options: AxisOptions, redraw?: boolean): void;
}

Axes and Scaling

Styling and Theming

Comprehensive styling system with built-in themes, responsive design support, and extensive customization options for colors, fonts, and visual elements.

// Global options configuration
function setOptions(options: Options): void;
function getOptions(): Options;

// Color utilities
class Color {
  constructor(input: ColorType);
  brighten(alpha: number): Color;
  setOpacity(alpha: number): Color;
}

Styling and Theming

Interactivity and Events

Rich event system and interaction capabilities including tooltips, legends, zooming, panning, selection, and custom event handling.

// Event management utilities
function addEvent<T>(el: T | Class<T>, type: string, fn: Function | EventCallbackFunction<T>, options?: EventOptionsObject): Function;
function fireEvent<T>(el: T, type: string, eventArguments?: Event | Dictionary<any>, defaultFunction?: Function | EventCallbackFunction<T>): void;
function removeEvent<T>(el: T | Class<T>, type?: string, fn?: EventCallbackFunction<T>): void;

class Tooltip {
  refresh(points: Point | Array<Point>, mouseEvent?: PointerEventObject): void;
  hide(delay?: number): void;
}

Interactivity and Events

Export and Accessibility

Built-in export capabilities for various formats (PNG, JPEG, PDF, SVG) and comprehensive accessibility features including keyboard navigation and screen reader support.

class Chart {
  exportChart(options?: ExportingOptions, chartOptions?: Options): void;
  print(): void;
  getSVG(chartOptions?: Options): string;
}

Export and Accessibility

Advanced Features

Extended functionality including 3D rendering, annotations, data loading, boost performance module, and specialized chart types.

// Advanced chart features
class Annotation {
  update(userOptions: AnnotationsOptions): void;
  destroy(): void;
}

// Data loading utilities
function data(options: DataOptions): void;

Advanced Features

Chart Type Variants

Highcharts Core

Standard charting library with basic chart types (line, area, column, bar, pie, scatter, spline).

Highstock

Financial charting package with time-based data handling, technical indicators, range selectors, and candlestick charts.

Highmaps

Geographic visualization package with map charts, choropleth maps, and geographic overlays.

Highcharts Gantt

Project management charts with timeline visualization, task dependencies, and resource management.

Global Configuration

// Global configuration options
interface Options {
  chart?: ChartOptions;
  title?: TitleOptions;
  subtitle?: SubtitleOptions;
  xAxis?: XAxisOptions | Array<XAxisOptions>;
  yAxis?: YAxisOptions | Array<YAxisOptions>;
  series?: Array<SeriesOptionsType>;
  plotOptions?: PlotOptions;
  tooltip?: TooltipOptions;
  legend?: LegendOptions;
  colors?: Array<ColorString>;
  accessibility?: AccessibilityOptions;
  responsive?: ResponsiveOptions;
  // ... many more configuration options
}

Type Definitions

The package includes comprehensive TypeScript definitions providing full type safety and IntelliSense support for all API components, options, and event handlers.