Questions tagged [highcharts]

Highcharts is a Javascript charting library that uses HTML, SVG, and VML. The editor offers both open source/nonprofit and commercial editions of the product.

Highcharts is a charting library written in pure , offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports many chart types, including line, spline, area, areaspline, column, bar, pie, scatter, bubble, gauge and polar chart types (for a full list, see below). Many of the chart types can be combined in one chart. Users can export the chart to PNG, JPG, PDF or SVG format at the click of a button, or print the chart directly from the web page.

The Highcharts library works in all modern browsers, including those for iOS devices (iPhone/iPad) and Internet Explorer from version 6. Standard browsers use SVG for the graphics rendering. In legacy Internet Explorer, graphics are drawn using VML.

One of the key features of Highcharts is that, under any of the licenses, free or not, you are allowed to download the source code and make your own edits. This allows for personal modifications and a great flexibility.

Highcharts is solely based on native browser technologies and doesn't require client-side plugins like Flash or Java. Furthermore, you don't need to install anything on your server, such as PHP or ASP.NET. Just include the highcharts.js file in your webpage.

Setting the Highcharts configuration options requires no special programming skills. The options are given in a JavaScript object notation structure, which is basically a set of keys and values connected by colons, separated by commas and grouped by curly brackets.


###Supported Chart Types Include:

  • Line and Spline
  • Area and Area-range
  • Area-spline and Spark-line
  • Column, Column-range and Bar
  • Pie and Donut
  • Combination(s) of Column, Line and Pie
  • Scatter and Bubble
  • Dynamic and Master-detail
  • 3D and Meteogram
  • Angular Gauge and VU Meter
  • Clock
  • Heat Map
  • Polar chart
  • Spiderweb
  • Wind rose
  • Box plot
  • Error bar
  • Waterfall
  • Funnel and Pyramid chart(s)
  • General drawing

###Resources :


###Related tags

25763 questions
63
votes
4 answers

Highcharts: Format all numbers with comma?

I'm using Highcharts and I want to format all numbers showed anywhere in the chart (tooltips, axis labels...) with comma-separated thousands. Otherwise, the default tooltips and labels are great, and i want to keep them exactly the same. For…
Richard
  • 62,943
  • 126
  • 334
  • 542
59
votes
2 answers

HighCharts : Is it possible to customize the colors of individual series?

I am using HighCharts for a line graph report. In this specific report I have been asked to Customize the colours of each series. The series will always stay the same. So for example: John series: Blue dashed line Mary series: Solid Red Line Does…
Tjaart
  • 3,912
  • 2
  • 37
  • 61
59
votes
6 answers

Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?

So I'm creating a page with tabbed content using Twitter's Bootstrap, yet the content of my starting active div is always different than that of my other tabs. For example, I am putting in charts using highcharts.js in my different tabs, yet the…
VirtualValentin
  • 1,131
  • 1
  • 11
  • 19
57
votes
4 answers

set different colors for each column in highcharts

I need to set different colors for each column in Highcharts graph dynamically. My Highcharts graph is: options = { chart: { renderTo: 'chart', type: 'column', width: 450 }, title: { …
user750487
  • 1,033
  • 2
  • 12
  • 13
55
votes
12 answers

Responsive Highcharts not sizing correctly until window resize

I'm using Highcharts within Zurb's Foundation framework for a class project. I have three charts within a section tab. One is within a 12-column div, the other two are on the same row within 6-column divs. When the page loads, the featured chart…
55
votes
2 answers

HighCharts turn animation false for line chart

I'm new to highCharts and want to know how I can turn off the animation for line charts. I've tried setting it to false in plotlines but no success.
user1869421
  • 837
  • 5
  • 14
  • 22
54
votes
4 answers

how to hide highchart x - axis data values

I am drawing a bar chart using highchart.js I do not want to show the x - axis data values. Can any one tell me which option does it? full config: var chart = new Highcharts.Chart({ chart: { renderTo: container, …
Nurul Asad
  • 541
  • 1
  • 4
  • 4
54
votes
2 answers

How to modify highcharts legend item click event?

I need to modify click event on highcharts legend items. Highcharts demo http://www.highcharts.com/demo/line-basic . I want for example: first action will be some alert and second action will be action by default(clean Tokyo line from chart).…
alexche8
  • 1,270
  • 3
  • 19
  • 26
51
votes
8 answers

How can I change the colors of my highcharts piechart?

I'm using highcharts to make a piechart but I'm having trouble loading a custom color set for my chart. Here is my code: