Getting started with highcharts
Highcharts is free for non-commercial and personal use, with licenses only needed for commercial applications.
In Highcharts, there is an array containing the default colors for the chart's series. When all colors are used, new colors are pulled from the start again.
Defaults colors for version 4.x and 5.x are:
In Highcharts 3.x, the default colors were:
In Highcharts 2.x, the default colors were:
|Internet Explorer||6.0 +|
|iOS (Safari)||3.0 +|
|Android Browser||2.0 +|
Begin by including
highcharts.js in your
<div> to contain your chart
Specify the configuration to create the chart. The mininum configuration required to create a chart is -
Where does the chart go? - chart.renderTo
This creates a plot as follows - fiddle.
There are numerous configuration options that can be added to the chart, a few common ones being,
- chart.type - What type of chart do you want to plot?
- title - Configuration for the title of the chart
- xAxis/yAxis - Configuration for the x-axis/y-axis of the chart
A complete list of all configuration options can be found here.
A good place to start in the Highcharts doc would be here.
Installation or Setup
Ways to get Highcharts:
- Through bower;
To load the main library from vendor's CDN, simply add the following to your code:
Supplementary libraries, such as the exporting module should be loaded after your
Calling the libraries directly from Highcharts will provide you the most up-to-date version. However, if you have specific charts that function best with a certain version or you wish to optimize your website's performance, you may consider storing the files locally.
The following resources offer detailed information on installing and configuring Highcharts, as well as supplementary libraries and modules you can use to customize your charts beyond the default installation.
- Installation instructions for Highcharts
- Export module overview
- Highcharts file service, including all modules and versions