So far, we've been able to create charts and modify their containers using CSS, or the chart itself using options. One element that we haven't looked into is layout. This recipe will show us how we can put Highcharts in jQuery UI tabs, but these steps will be very similar to the steps for using other jQuery UI elements, such as an accordion.
To set up a basic page and install jQuery and Highcharts, refer to the Getting ready section of the Creating your first chart recipe in Chapter 1, Getting Started with Highcharts.
We will also need to include CSS and JavaScript for jQuery UI by performing the following steps:
Modify
bower.json
to includejquery-ui
as follows:{ "name": "highcharts-cookbook-chapter-6", "dependencies": { "jquery": "^1.9", "jquery-ui": "^1.10", "highcharts": "~3.0" } }
Install bower dependencies with the following code:
bower install
Include jQuery UI theming on the page as follows:
<title>Chapter 6 - Integrating with...