Convert Figma logo to code with AI

highcharts logohighcharts

Highcharts JS, the JavaScript charting framework

12,019
3,622
12,019
1,037
View on GitHubView on NPM

Top Related Projects

chartjs's avatar

Chart.js

64,568

Simple HTML5 Charts using the <canvas> tag

d3's avatar

d3

108,427

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

plotly's avatar

plotly.js

16,856

Open-source JavaScript charting library behind Plotly and Dash

apexcharts's avatar

apexcharts.js

14,209

📊 Interactive JavaScript Charts built on SVG

mrdoob's avatar

three.js

101,622

JavaScript 3D Library.

recharts's avatar

recharts

23,884

Redefined chart library built with React and D3

Quick Overview

Highcharts is a powerful, feature-rich JavaScript charting library that allows developers to create interactive and visually appealing charts for web and mobile applications. It offers a wide range of chart types, from basic line and bar charts to more complex 3D and stock charts, making it suitable for various data visualization needs.

Pros

  • Extensive chart types and customization options
  • Responsive and mobile-friendly design
  • Strong browser compatibility, including older versions
  • Excellent documentation and active community support

Cons

  • Not free for commercial use, requiring a license purchase
  • Large file size, which may impact page load times
  • Steep learning curve for advanced features and customizations
  • Limited built-in accessibility features

Code Examples

  1. Creating a basic line chart:
Highcharts.chart('container', {
  title: { text: 'Monthly Sales' },
  xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] },
  series: [{
    name: 'Sales',
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
  }]
});
  1. Adding multiple series to a column chart:
Highcharts.chart('container', {
  chart: { type: 'column' },
  title: { text: 'Monthly Revenue by Department' },
  xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] },
  series: [{
    name: 'Sales',
    data: [49.9, 71.5, 106.4, 129.2, 144.0]
  }, {
    name: 'Marketing',
    data: [83.6, 78.8, 98.5, 93.4, 106.0]
  }]
});
  1. Creating a pie chart with custom colors:
Highcharts.chart('container', {
  chart: { type: 'pie' },
  title: { text: 'Browser Market Share' },
  plotOptions: {
    pie: { allowPointSelect: true, cursor: 'pointer' }
  },
  series: [{
    name: 'Share',
    data: [
      { name: 'Chrome', y: 61.41, color: '#0088FE' },
      { name: 'Firefox', y: 11.84, color: '#00C49F' },
      { name: 'Edge', y: 4.67, color: '#FFBB28' },
      { name: 'Safari', y: 4.18, color: '#FF8042' }
    ]
  }]
});

Getting Started

  1. Include Highcharts in your HTML file:
<script src="https://code.highcharts.com/highcharts.js"></script>
  1. Create a container for your chart:
<div id="container"></div>
  1. Initialize a chart with JavaScript:
Highcharts.chart('container', {
  title: { text: 'My First Chart' },
  series: [{
    data: [1, 2, 3, 4, 5]
  }]
});

This will create a basic line chart with default settings. Customize the chart by adding more options to the configuration object.

Competitor Comparisons

chartjs logo

Chart.js

64,568

Simple HTML5 Charts using the <canvas> tag

Pros of Chart.js

  • Free and open-source, suitable for both commercial and non-commercial projects
  • Lightweight and fast, with a smaller file size compared to Highcharts
  • Simple and intuitive API, making it easier for beginners to get started

Cons of Chart.js

  • Less feature-rich compared to Highcharts, with fewer chart types and customization options
  • Limited support for real-time data updates and animations
  • Smaller community and ecosystem, resulting in fewer plugins and extensions

Code Comparison

Chart.js:

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3]
        }]
    }
});

Highcharts:

Highcharts.chart('container', {
    chart: { type: 'bar' },
    xAxis: { categories: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'] },
    series: [{
        name: '# of Votes',
        data: [12, 19, 3, 5, 2, 3]
    }]
});

Both libraries offer straightforward ways to create charts, but Highcharts provides more detailed configuration options out of the box. Chart.js focuses on simplicity, while Highcharts offers more advanced features for complex visualizations.

d3 logo

d3

108,427

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

Pros of D3

  • Highly flexible and customizable, allowing for complex and unique visualizations
  • Large and active community with extensive resources and examples
  • Free and open-source, suitable for both commercial and non-commercial projects

Cons of D3

  • Steeper learning curve, requiring more time and effort to master
  • Lower-level API, often requiring more code to create basic charts
  • Less out-of-the-box functionality compared to Highcharts

Code Comparison

D3 example:

const svg = d3.select("body").append("svg")
    .attr("width", 400)
    .attr("height", 300);

svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * 40)
    .attr("y", d => 300 - d * 10)
    .attr("width", 35)
    .attr("height", d => d * 10);

Highcharts example:

Highcharts.chart('container', {
    chart: { type: 'bar' },
    series: [{
        data: [1, 2, 3, 4, 5]
    }]
});

The D3 example demonstrates more low-level control over the chart creation process, while the Highcharts example shows a simpler, more declarative approach to creating a basic chart.

plotly logo

plotly.js

16,856

Open-source JavaScript charting library behind Plotly and Dash

Pros of Plotly.js

  • Open-source and free for commercial use
  • Supports a wider range of chart types, including 3D plots and statistical charts
  • More customizable and interactive features out-of-the-box

Cons of Plotly.js

  • Larger file size, which may impact page load times
  • Steeper learning curve due to more complex API
  • Less extensive documentation compared to Highcharts

Code Comparison

Plotly.js:

Plotly.newPlot('myDiv', [{
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  type: 'scatter'
}]);

Highcharts:

Highcharts.chart('container', {
  series: [{
    data: [10, 15, 13, 17]
  }]
});

Both libraries offer powerful charting capabilities, but Plotly.js provides more flexibility and chart types at the cost of a larger file size and steeper learning curve. Highcharts, while not free for commercial use, offers a more streamlined API and extensive documentation. The code comparison shows that Plotly.js requires more specific configuration, while Highcharts can create basic charts with minimal setup.

apexcharts logo

apexcharts.js

14,209

📊 Interactive JavaScript Charts built on SVG

Pros of ApexCharts

  • Lightweight and faster rendering compared to Highcharts
  • More extensive customization options for modern, interactive charts
  • Free for commercial use with MIT license

Cons of ApexCharts

  • Smaller community and less extensive documentation
  • Fewer chart types and features compared to Highcharts
  • Less mature and battle-tested in enterprise environments

Code Comparison

ApexCharts:

var options = {
  chart: { type: 'line' },
  series: [{ data: [30, 40, 35, 50, 49, 60, 70] }],
  xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997] }
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

Highcharts:

Highcharts.chart('container', {
  chart: { type: 'line' },
  series: [{ data: [30, 40, 35, 50, 49, 60, 70] }],
  xAxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997] }
});

Both libraries offer similar syntax for basic chart creation, with ApexCharts requiring an additional step to render the chart. Highcharts provides a more concise API for simple use cases, while ApexCharts offers more granular control over chart options.

mrdoob logo

three.js

101,622

JavaScript 3D Library.

Pros of Three.js

  • Specializes in 3D graphics rendering, offering advanced capabilities for creating complex 3D scenes and animations
  • Extensive community support and a wide range of examples and tutorials available
  • Highly flexible and can be used for various applications, from games to data visualization

Cons of Three.js

  • Steeper learning curve, especially for developers new to 3D graphics programming
  • May be overkill for simple 2D charts and graphs, which Highcharts excels at
  • Requires more manual setup and configuration compared to Highcharts' out-of-the-box solutions

Code Comparison

Three.js (basic scene setup):

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Highcharts (basic chart setup):

Highcharts.chart('container', {
  chart: { type: 'bar' },
  title: { text: 'Sample Chart' },
  series: [{ data: [1, 2, 3, 4, 5] }]
});

This comparison highlights the different focus areas of the two libraries. Three.js is more suited for complex 3D visualizations, while Highcharts provides a simpler API for creating standard charts and graphs.

recharts logo

recharts

23,884

Redefined chart library built with React and D3

Pros of Recharts

  • Free and open-source, suitable for commercial use without licensing fees
  • Lightweight and optimized for performance
  • Seamless integration with React applications

Cons of Recharts

  • Limited chart types compared to Highcharts
  • Less extensive documentation and community support
  • Fewer customization options for advanced visualizations

Code Comparison

Recharts:

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

<LineChart width={600} height={300} data={data}>
  <Line type="monotone" dataKey="value" stroke="#8884d8" />
  <CartesianGrid stroke="#ccc" />
  <XAxis dataKey="name" />
  <YAxis />
</LineChart>

Highcharts:

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

const options = {
  series: [{ data: [1, 2, 3] }]
};

<HighchartsReact highcharts={Highcharts} options={options} />

Both libraries offer declarative ways to create charts, but Recharts follows a more React-centric approach with individual components for chart elements. Highcharts uses a configuration object, which can be more flexible for complex charts but may require more setup for simple use cases.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Highcharts JS is a JavaScript charting library based on SVG and some canvas/WebGL.

Highcharts is a source available product. Please refer to shop.highcharts.com for details on licensing.

Installing and using Highcharts

This is the working repo for Highcharts code. 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

ES6 modules, AMD, CommonJS and others

For other ways to use Highcharts in your projects, please refer to our installation docs.

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 more information.

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 CSS 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

Node setup for Apple Mx CPU

When running Node natively on ARM64 MacOS, some Node packages like node-canvas with integrated compiling might fail. Install additional tools to resolve the problem:

  • Homebrew and run brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman

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.

NPM DownloadsLast 30 Days