ENG
  • KOR
  • ENG
  • JPN

highcharts

chart visualization ui-component

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie, and scatter chart types. Highcharts is NOT free for commercial use.

Latest Ver 12.2.0
Homepage
Github
0
12,231
📢 Highcharts is a JavaScript chart library supporting various chart types, requiring a license for commercial use.

CDN Download

License: CC-BY-NC-3.0
View All Versions
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/A11yI18n.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/A11yI18n.min.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/Accessibility.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/Accessibility.min.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/AccessibilityComponent.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/AccessibilityComponent.min.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/Components/AnnotationsA11y.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/Components/AnnotationsA11y.min.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/Components/ContainerComponent.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/Components/ContainerComponent.min.js

Sample Code

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment. 
📄 HTML
<div id='container' style='width:100%; height:400px;'>
</div>

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

⚙️ JavaScript
document.addEventListener('DOMContentLoaded', function () {
  var myChart = Highcharts.chart('container', {
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Fruit Consumption'
    },
    xAxis: {
      categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
      title: {
        text: 'Fruit eaten'
      }
    },
    series: [{
      name: 'Jane',
      data: [1, 0, 4]
    }, {
      name: 'John',
      data: [5, 7, 3]
    }]
  });
});

Related Libraries

Library Icon
Chart.js

Chart.js is a lightweight client-side library that provides simple, responsive charts for web pages. It supports a variety of chart types and is easy to configure and use.

⚡ Top Tools for Developers
Text Compare

Text Comparison

Easily spot the differences between two texts.

Favicon Generator

Favicon Generator

Quickly and easily generate favicons.

Lorem Ipsum Generator

Lorem Ipsum Generator

Generate placeholder text for your designs.

Character Counter

Character Counter

Check character and word count in real time.

SRT ↔ SMI

SRT ↔ SMI Converter

Easily convert between subtitle formats.

Text Extract(OCR)

Image Text Extractor

Automatically extract text from images.