Highcharts JS, the JavaScript charting framework

Overview

Highcharts JS is a JavaScript charting library based on SVG, with fallbacks to VML and canvas for old browsers.

Download and install Highcharts

This is the working repo for Highcharts. If you simply want to include Highcharts into a project, use the distribution package instead, or read the download page. Please note that there are several ways to use Highcharts. For general installation instructions, see the docs.

Use our CDN

Instead of downloading, you can use our CDN to access files directly. See code.highcharts.com for details.

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

Install from npm

See npm documentation on how to get started with npm.

npm install --save highcharts

Install from Bower

Bower is deprecated, but to install, run:

bower install highcharts

Load Highcharts from the CDN as ECMAScript modules

Starting with v6.1.0, Highcharts is available on our CDN as ECMAScript modules. You can import ES modules directly in modern browsers without any bundling tools by using <script type="module"> (demo):

<script type="module">
    import Highcharts from 'https://code.highcharts.com/es-modules/masters/highcharts.src.js';
    import 'https://code.highcharts.com/es-modules/masters/modules/accessibility.src.js';

    Highcharts.chart('container', {
        ...
    });
</script>

The following example shows dynamic import with lazy-loading:

const loadHighchartsAndCreateChart = async () => {
    const { default: Highcharts } =
        await import('https://code.highcharts.com/es-modules/masters/highcharts.src.js');
    await import('https://code.highcharts.com/es-modules/masters/highcharts-more.src.js');
    await import('https://code.highcharts.com/es-modules/masters/modules/exporting.src.js');
    await import('https://code.highcharts.com/es-modules/masters/modules/export-data.src.js');

    Highcharts.chart('container', { /* options */ });
};

View it live on jsFiddle;

Load Highcharts from the CDN as an AMD module

Highcharts is compatible with AMD module loaders (such as RequireJS). The following example demonstrates loading Highcharts along with two modules from our CDN using RequireJS.

<html>
    <head>
        <script src="require.js"></script>
        <script>
            require.config({
                packages: [{
                    name: 'highcharts',
                    main: 'highcharts'
                }],
                paths: {
                    // Change this to your server if you do not wish to use our CDN.
                    'highcharts': 'https://code.highcharts.com'
                }
            });
        </script>
    </head>
    <body>
        <div id="container"></div>
        <script>
            require([
                'highcharts',
                'highcharts/modules/exporting',
                'highcharts/modules/accessibility'
            ], function (Highcharts) {
                // This function runs when the above files have been loaded.

                // Create a test chart.
                Highcharts.chart('container', {
                    series: [{
                        data: [1,2,3,4,5]
                    }]
                });
            });
        </script>
    </body>
</html>

See it live on jsFiddle. When using AMD modules, Highcharts also allows to load multiple versions in the same page.

Load Highcharts as a CommonJS module

Highcharts is using an UMD module pattern, as a result it has support for CommonJS. The following examples presumes you are using npm to install Highcharts, see Download and install Highcharts for more details.

// Load Highcharts
var Highcharts = require('highcharts');
// Alternatively, this is how to load Highstock. Highmaps and Highcharts Gantt are similar.
// var Highcharts = require('highcharts/highstock');

// Load the exporting module, and initialize it.
require('highcharts/modules/exporting')(Highcharts);

// Generate the chart
Highcharts.chart('container', {
  // options - see https://api.highcharts.com/highcharts
});

Load Highcharts as a transpiled ES6/UMD module

Since Highcharts supports ES6 (ESM - ECMAScript modules) and UMD (AMD, CommonJS), it can be also loaded as a module with the use of transpilers. Two common transpilers are Babel and TypeScript. The following examples assume you have used npm to install Highcharts; see Download and install Highcharts for more details.

Babel

import Highcharts from 'highcharts';
// Alternatively, this is how to load Highstock. Highmaps and Highcharts Gantt are similar.
// import Highcharts from 'highcharts/highstock';

// Load the exporting module.
import Exporting from 'highcharts/modules/exporting';
// Initialize exporting module. (CommonJS only)
Exporting(Highcharts);

// Generate the chart
Highcharts.chart('container', {
  // options - see https://api.highcharts.com/highcharts
});

TypeScript + UMD

import Highcharts from 'highcharts';
// Alternatively, this is how to load Highstock. Highmaps and Highcharts Gantt are similar.
// import Highcharts from 'highcharts/highstock';

// Load the exporting module.
import Exporting from 'highcharts/modules/exporting';
// Initialize exporting module. (CommonJS only)
Exporting(Highcharts);

// Generate the chart
Highcharts.chart('container', {
  // options - see https://api.highcharts.com/highcharts
});
{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "module": "umd",
    "moduleResolution": "node"
  }
}

TypeScript + ESM from CDN

// Load modules the ES6 way
import Highcharts from 'https://code.highcharts.com/es-modules/masters/highcharts.src.js';
import 'https://code.highcharts.com/es-modules/masters/modules/exporting.src.js';

// Generate the chart
Highcharts.chart('container', {
  // options - see https://api.highcharts.com/highcharts
});
{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "baseUrl": "./",
    "module": "es6",
    "moduleResolution": "node",
    "target": "es6",
    "paths": {
      "https://code.highcharts.com/es-modules/masters/*.src.js": [
        "node_modules/highcharts/*.src"
      ]
    }
  }
}

Create your own custom build of Highcharts

To reduce file size, or combine modules into one file to reduce latency, you may want to create your own build of the Highcharts modules. See Creating custom Highcharts files for the description.

Build and debug

If you want to do modifications to Highcharts or fix issues, you may build your own files. Highcharts uses Gulp as the build system. After npm install in the root folder, run gulp, which will set up a watch task for the JavaScript and SCSS files. Now any changes in the files of the /js or /css folders will result in new files being built and saved in the code folder. Other tasks are also available, like gulp lint.

npm install
gulp

Generate API docs

Run in this highcharts repository the doc generator with npx gulp jsdoc-watch, which also starts a new server with the generated API documentation.

Comments
  • Null values in area charts

    Null values in area charts

    Hi,

    I'm a little bit confused with this behaviour and I don't know if it is expected or a bug. Let's consider the following serie of values : 70000, null, 50000, null, null, 50000, 60000

    I would expect that Highcharts doesn't draw any line/area at all for the 5 first points and would draw one between the last two values. The first and third values should get a point each but no line/area.

    This is what happens for line charts, but not for area charts. I've put together a JSFiddle to show this: http://jsfiddle.net/3qZFS/1/

    Thanks

    Type: Bug 
    opened by karellm 75
  • Series.update breaks adaptToUpdatedData=false for multiple navigator series

    Series.update breaks adaptToUpdatedData=false for multiple navigator series

    Expected behaviour

    Series[index].update(options) combined with navigator: { adaptToUpdatedData: false, series: navdata } works the same way for multiple series in navigator as a single series.

    Actual behaviour

    When doing a dynamic update using series[index].update(options) combined with navigator: { adaptToUpdatedData: false, series: navdata }, all navigation series are updated with data from the main series. So it's not possible to update line color without getting problems with the time range in navigator. As a workaround I'm now recreating the whole chart with the new set option, but this kind of defeats the purpose of the series[index].update(options) function. Am I missing an options here somwhere, or is this a bug? Note that this only happens with multiple series in navigator, array instead of single series object.

    Live demo with steps to reproduce

    Click the 'Update' button to see the problem reproduced example: http://jsfiddle.net/3mf5dv56/

    Working without multiple series (array) in navigator: http://jsfiddle.net/3mf5dv56/1/

    Affected browser(s)

    Same behaviour in Chrome and IE

    Type: Bug Product: Highcharts Stock Fix suggested 
    opened by josteinkjellsen 56
  • Loading dependent Highcharts modules or highcharts-more via RequireJS fails from ver 6.1.2.

    Loading dependent Highcharts modules or highcharts-more via RequireJS fails from ver 6.1.2.

    I'm using RequireJS to dynamically load Highcharts to specific pages on my site. I have configured it with shim to load the highcharts-more and additionals modules that I'm using. Starting from few days ago with the version 6.1.2 update in Highchart CDN, it now fails to correctly load the highcharts-more and the modules.

    Expected behaviour

    I expect to be able to use the highcharts-more and other modules' features.

    Actual behaviour

    The files are fetched, but initializing Highcharts fails with error code 17 unknown chart type for arearange and other weird behaviour. For example polar area charts are not polar etc. It does fetch the actual files, but for some reason does not account for the additional features anymore.

    Live demo with steps to reproduce

    Working demo with Highcharts 6.1.1: http://jsfiddle.net/3kpazfw4/ Failing demo with CDN: http://jsfiddle.net/6zypqedn/

    Product version

    Highcharts 6.1.2

    Affected browser(s)

    Chrome 68.

    Type: Enhancement Priority: High 
    opened by jee7 51
  • Pie Chart - The chart does not display the original size after exiting full screen mode

    Pie Chart - The chart does not display the original size after exiting full screen mode

    Actual behaviour

    The initial demo version of the pie chart is displayed as with the given sizes.

    After running "View full screen" / "Exit full screen" note that the size of the chart changes (it has been reduced or increased).

    The problem occurs in the official Highcharts demo:

    https://www.highcharts.com/demo/pie-basic

    As well as in the editor with a simplified code:

    https://jsfiddle.net/BlackLabel/weo19uvy/

    Product version

    Highcharts v8.0.4

    Affected browser(s)

    Chrome 80.0.3987.149

    Product: Highcharts Type: Undecided Flow: Done 
    opened by madepiet 46
  • Highcharts flickers when hovering

    Highcharts flickers when hovering

    Expected behaviour

    Normal Chart usage

    Actual behaviour

    Crazy flickering when hovering

    Live demo with steps to reproduce

    See gif Gif of chart

    I'm currently writing a jsfiddle, but it seems hard to reproduce. I will try to deliver it in the next few hours. Maybe there was already a similar Issue? Couldn't find one.

    Product version

    Highstock v6.0.4

    Affected browser(s)

    Only Chrome Tested also Firefox and Edge

    Type: Bug 
    opened by TrAnn3l 44
  • Multi-[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event ++

    Multi-[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event ++

    Situation

    On MacOS/Chrome CandleStick: When the StockTools are enabled Lot of noticeable non proper handled eventListners thrown in the console. mainly refers to touchstart event [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.

    To reproduce

    This can be easily noticeable in the console of any react-based demo of StockChart with enabled stock-toos module.

    Here is a quick live demos: https://codesandbox.io/s/10yv629397 https://www.highcharts.com/stock/demo/stock-tools-gui

    Video: https://i.imgur.com/Z80XISw.mp4

    Screenshot 2019-07-08 at 16 38 38

    Tested on MacOS (Mojave) Chrome (Version 75.0.3770.100) and other Mac machines and Chrome versions.

    Type: Bug Flow: Done 
    opened by slashvortal 43
  • stacked areaspline

    stacked areaspline

    Hi, if there is a stacked area, the fillcolor is stacked too. (the fillcolor of above series are not drawn to the bottom of the chart but to next serie beneath only) But when using areaspline, the color is filled from bottom up for all series. Could be seen on stacked area demo in jsfiddle. when toggling the blue serie, the red area get more red (caused by blue colors absence)

    this happens in highcharts and in highstocks.

    Type: Enhancement 
    opened by horstlaubenthal 39
  • Exporting chartOptions with dataLabels

    Exporting chartOptions with dataLabels

    Example: http://jsfiddle.net/YARYv/

    Steps to reproduce:

    • try to export chart to PNG or others

    As you can see, background is changed properly, but dataLabels aren't added to the exported image.

    Edit:

    • demo with version 4.2.x: http://jsfiddle.net/YARYv/27/
    Type: Bug Priority: Normal 
    opened by pawelfus 38
  • Mouse leaves are not always triggered in IE, so tooltip stays and line width doesn't change.

    Mouse leaves are not always triggered in IE, so tooltip stays and line width doesn't change.

    More information at http://highslide.com/forum/viewtopic.php?f=9&t=8515

    Demo at http://www.highcharts.com/studies/performance.php?seriesType=line&chartCount=8&seriesPerChart=2&pointsPerSeries=32&chartWidth=500&libSource=highcharts.src.js

    User reports success with putting an event listener on the surrounding div to hide the tooltip.

    Product: Highcharts Flow: Done 
    opened by TorsteinHonsi 38
  • Memory leak when trending raw data in high chart

    Memory leak when trending raw data in high chart

    Expected behaviour

    When we run the trend chart with 8 pens getting data every second the raw data is plotted for a time interval of 8 hrs there should not be any memory leak

    Actual behaviour

    When we run the trend chart with 8 pens getting data every second the raw data is plotted for a time interval of 8 hrs and i leave the trend plotting data for around 15 hrs, there is a memory leak and the application consumes around 1.35 GB of memory

    Live demo with steps to reproduce

    GE Digital - license ID is 100038820-1nk6g4

    Affected browser(s)

    Chrome


    Edit: The points are being added up until 8 hours. After that, points older than 8hr are removed, but the memory continues to grow.

    Type: Undecided 
    opened by abhik04 36
  • "Highcharts not defined" as ES6 imports (browserify, babel)

    I've tried everything possible to get Highcharts to work with Babel / Browserify / ES6 imports. I'm getting a ReferenceError: Highcharts is not defined error. I was previously using highstock-browserify but it broke after the adaptor was removed.

    I did a

    npm install highcharts --save-dev
    

    I've done a

    //highcharts libraries
    import Highcharts from 'highcharts/highstock';
    import 'highcharts-ng'; //angular highcharts bindings
    

    If I look in dev tools the file is being imported fine:

    image

    Any help appreciated. Possibly related issue on stackoverflow.

    EDIT:

    Also tried, in desperation ( :P ) with highcharts-release package.

    And more. I've also tried the recommended method. File appears to be included in the source, but Highcharts is still undefined.

    //highcharts libraries
    let Highcharts = require('highcharts/highstock');
    import 'highcharts-ng';
    

    CC- @laytzehwu

    Type: Enhancement Product: Docs 
    opened by vviikk 36
  • Custom markers for pie chart connectors are not rendered in exported PDF file

    Custom markers for pie chart connectors are not rendered in exported PDF file

    Expected behaviour

    I want to export a pdf with a pie chart that has custom SVG markers. But they disappear on rendered pdf. I use chart.exportChartLocal method for export. Export with a server works fine, but I would like to export it locally.
    I thought the issue might be the library that converts svg to pdf, but I tried it in https://raw.githack.com/yWorks/svg2pdf.js/master/index.html and it rendered markers fine.

    Actual behaviour

    SVG markers are in the exported PDF.

    Live demo with steps to reproduce

    http://jsfiddle.net/anna_sh/qgxf5d86/5/

    Click menu in the corner and try export to pdf

    Product version

    10.3.2

    Affected browser(s)

    All

    opened by annashakhbazian 0
  • Errors with HC 10.3.2 vs 10.3.1:

    Errors with HC 10.3.2 vs 10.3.1: "attribute transform: Trailing garbage"

    I have put in an override in my code for Highcharts.Pointer.scaleGroups so that, when panning/zooming on a mobile device touch screen, all SVG components in my chart.seriesGroup are transformed together, rather than leaving some behind. In this respect, I have also overridden Highcharts.PlotLineOrBand.render (based on this demo from @TorsteinHonsi).

    The following demos differ only in the version of highcharts being used:

    https://jsfiddle.net/1c9vtrup/ (10.3.1) https://jsfiddle.net/1c9vtrup/1/ (10.3.2)

    With 10.3.1, panning/zooming on a mobile touch screen works fine. To simulate this in a Chome browser I am opening devtools and clicking Toggle device toolbar to get the mobile touchscreen device:

    image

    I am also loading the "raw" versions of the above, without the code panels etc:

    https://jsfiddle.net/1c9vtrup/show (10.3.1) https://jsfiddle.net/1c9vtrup/1/show (10.3.2)

    With 10.3.2, I am getting a stream of errors like the following in the console, when panning:

    Error: <g> attribute transform: Trailing garbage, "translate(-91,NaN) scale(1 1)".
    Error: <g> attribute transform: Trailing garbage, "translate(-94,NaN) scale(1 1)".
    Error: <g> attribute transform: Trailing garbage, "translate(-96,NaN) scale(1 1)".
    

    Seems like a bug in 10.3.2? I see that the changelog for this version has "Refactored and simplified series group inversion logic" so it must relate to that... either it has introduced a bug, or there is a knock-on effect which means that my overrides need to be changed to account for any new behaviours?

    opened by drmrbrewer 0
  • Gantt Chart Range selector not consistent

    Gantt Chart Range selector not consistent

    Hi Team, I'm trying to check Gantt chart meet our requirements. Range selector didn't allow me to select valid date from date picker. it is going to first row date range.

    2023-01-05_15h11_01

    When i select Jan 22nd. it is going to Jan 19 (first row date range). Please check on live demo Live Demo : Project Management - JSFiddle - Code Playground

    #2 When I try to export with collapsed, collapsed items are not showing the result. And navigator showing the result

    opened by shihabkaniyarath 0
  • How to implement internationalization of 'no data' text in highcharts with Angular 13

    How to implement internationalization of 'no data' text in highcharts with Angular 13

    Expected behaviour

    {lang: {noData: this.translate.instant('no.data.found')}})

    Expectation: for En: 'No data found' , for DE : 'Es wurden keine Daten gefunden'

    Actual behaviour

    The chart is not updated on language change event in Angular

    Live demo with steps to reproduce

    Product version

    Affected browser(s)

    opened by DuyguTemel 0
  • Map SVG line colour doesn't cycle through defined colours when set for individual lines

    Map SVG line colour doesn't cycle through defined colours when set for individual lines

    Expected behaviour

    If there a more lines in the data than there are colours defined I expected it to cycle through the colours array and reuse colours, as it does for series colours.

    Actual behaviour

    The last colour in the array is used for all lines where the array index is greater than the number of array items. Only happens when the colours are set on individual lines, if set at series level it cycles as expected.

    Live demo with steps to reproduce

    https://jsfiddle.net/god0Lpr5/28/

    In the example there are 3 colours defined and 6 flight routes. I expected to see each colour used twice but red and green are used once and everything else is blue.

    Product version

    10.3.2

    Affected browser(s)

    Chrome 108

    opened by FusionSnowball 0
Owner
Highsoft
The creators of Highcharts JS, the JavaScript charting framework
Highsoft
An easy-to-use cross-framework JS charting library

Compact Chart Visualize your data under a minute, in any Javascript framework Table of Contents About How to use it Examples Demo Plain HTML Example w

Mireo 1 Jul 28, 2021
Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Ember Charts A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to

Addepar 793 Dec 7, 2022
Simple yet powerful JavaScript Charting library built using d3.js

uvCharts Simple, robust, extensible JavaScript charting library built using d3 designed to help developers embed, build charts in less than couple of

Imaginea 267 May 20, 2021
Open-source JavaScript charting library behind Plotly and Dash

Plotly.js is a standalone Javascript data visualization library, and it also powers the Python and R modules named plotly in those respective ecosyste

Plotly 15.3k Jan 4, 2023
Simple yet flexible JavaScript charting for designers & developers

Simple yet flexible JavaScript charting for designers & developers Documentation All the links point to the new version 3 of the lib. Introduction Get

Chart.js 59.4k Jan 10, 2023
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 9, 2023
A reusable charting library written in d3.js

NVD3 - A reusable D3 charting library Inspired by the work of Mike Bostock's Towards Reusable Charts, and supported by a combined effort of Novus and

Novus 7.2k Jan 3, 2023
Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js

dc.js Dimensional charting built to work natively with crossfilter rendered using d3.js. In dc.js, each chart displays an aggregation of some attribut

null 7.4k Jan 4, 2023
:dango: An interactive and responsive charting library

English | 简体中文 G2Plot A charting library based on the Grammar of Graphics. G2Plot is an interactive and responsive charting library. Based on the gram

AntV team 2.3k Dec 30, 2022
📱📈An elegant, interactive and flexible charting library for mobile.

中文 README F2 is born for mobile, developed for developers as well as designers. It is Html5 Canvas-based, and is also compatible with Node.js, Weex an

AntV team 7.8k Dec 31, 2022
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 5, 2023
Liquify charting library

Liquify Liquify: fast, multi-threaded visualization of stream data with ChartJS & Angular. The aim of Liquify is to provide a fast, customizable and e

null 4 Aug 23, 2022
React components for Chart.js, the most popular charting library

react-chartjs-2 React components for Chart.js, the most popular charting library. Supports Chart.js v3 and v2. Quickstart • Docs • Slack • Stack Overf

null 5.6k Jan 4, 2023
Chart.js module for charting financial securities

Chart.js Financial Charting Chart.js module for Candlestick and OHLC charts Roadmap Chart.js 2.7.0 added our timeseries scale as new option called dis

Chart.js 630 Dec 29, 2022
📱📈An elegant, interactive and flexible charting library for mobile.

F2,一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(node, 小程序,weex)。完备的图形语法理论,满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。英文 README 在此衷心感谢《The Grammar of Graphics》的作者

AntV team 7.8k Dec 27, 2022
A server-side-rendered charting library for Fresh

fresh_charts A server side rendered charting library for Fresh based on Chart.js. Usage There are two main ways to render a chart. There is the JSX/TS

Deno 57 Jan 2, 2023
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

Babylon.js Getting started? Play directly with the Babylon.js API using our playground. It also contains a lot of samples to learn how to use it. Any

Babylon.js 19.1k Jan 4, 2023
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

Konva Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching,

konva 8.7k Jan 8, 2023
A framework for building reusable components with d3.js

Koto A framework for creating reusable charts with D3.js, written in ES6. Introduction KotoJS is HEAVILY inspired by another reusable charting framewo

KotoJS 280 Dec 23, 2022